Figmaでメッシュグラデーションを作ろう!【Noisy Gradients】

みなさんこんにちは!
最近さまざまなサイトでよく見かける「メッシュグラデーション」をご存知ですか?

メッシュグラデーションとは、複数のポイントから色を様々な方向に流したフワッとしたグラデーションのことです。

最近おしゃれなホームページでよく使われているグラデーションですね。
通常のグラデーションに比べてデザインの品質が少しUPしたように感じるので、手法としておすすめです。

それでは、Figmaでのメッシュグラデーションの作り方をご紹介します。

Figmaのプラグイン「Noisy Gradients」をダウンロード

まずは「Noisy Gradients」をダウンロードしましょう。
このプラグインは、ランダムな模様のメッシュグラデーションを生成することができます。

「Noisy Gradients」でグラデーションの生成

お好みの模様のメッシュグラデーションが生成されるまで、「Generate new」をクリックし続けます。
左下の小さな四角の所から色は変更可能です。

「Shapes」と「Noise」からグラデーションの形やノイズの量を調整できるのですが、こちらは有料プランの機能となっております、、
「Dark Mode」を選択すると四隅が暗い感じになります。横幅の調整も可能です。

インサート

「PNG」を選択するとpng形式で、選択しないとsvg形式でメッシュグラデーションをgetできます。
svg形式でインサートした場合、メッシュグラデーションの模様を動かすことができます!

まとめ

「普通のグラデーションに飽きてきた…」「デザインの品質アップをしたい!」そんな方にメッシュグラデーションは非常におすすめです。
Figmaで簡単に、しかも基本無料で生成することができるのでぜひお試しください!

■□■□■□■□■□■□■□■□■□■□

福岡のホームページ制作・運用は
株式会社レッドキリン

営業時間:平日9:00〜18:00

●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL:092-726-5550 FAX:092-726-5558

●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内

メールでのお問合せ
ホームページ制作実績
会社案内

■□■□■□■□■□■□■□■□■□■□

contact

ホームページ制作に関することなら、
バナー1個からでもお気軽にご連絡ください。

お電話でのお問い合わせ

<福岡本社・宮崎サテライトオフィス共通>
平日9:00〜12:00、13:00〜18:00まで。営業・セールス目的のお電話は固くお断りいたします。

092-726-5550 092-726-5550

メールでのお問い合わせ

ご相談をご希望の場合、まずはお問い合わせフォームよりご連絡ください。
確認後、担当者よりご連絡させていただきます。

お問い合わせフォーム

会社案内ダウンロード

社内で検討されたい方のために、弊社の特徴や実績、会社概要などをまとめた会社案内をご用意しています。ご自由にダウンロードください。

ダウンロードはこちら
yahoo!japanプロモーション広告

当社はYahoo!プロモーション広告の代理店です。
(福岡県福岡市中央区赤坂)

採用関連の電話営業やセールス目的でのお電話は業務の妨げとなりますので固くお断りいたします。
一度電話口でお断りした企業様は着信拒否登録をしております。ご了承ください。