Figmaでは、グラデーション系の
プラグインも多数用意されています。
Design
【動画あり】Figmaのプラグイン『uigradients』『Noisy Gradients』『Grainy Gradients』『Mesh Gradients』の使い方｜魅力的なGradationを作ろう。
Post：2024.10.27 / Rewrite : 2024.10.29
View
2,033 views
uigradientsは、あらかじめ用意された数百のグラデーションをオブジェクトに反映させる事ができるプラグインです。
目次
動画で見る｜Figmaのプラグイン『uigradients』『Noisy Gradients』『Grainy Gradients』『Mesh Gradients』の使い方
Figmaのプラグイン『uigradients』の使い方
グラデーションさせたいオブジェクトを選択した状態で、「plugin」「uiGradient」をクリックします。
グラデーションパレットが表示されるので、適用させたいグラデーションを選択します。
Figmaのプラグイン『Noisy Gradients』の使い方
Noisy Gradientsは、ノイズの乗ったざらつき感のあるグラデーションをオブジェクトに反映させる事ができるプラグインです。
グラデーションさせたいオブジェクトを選択した状態で、「plugin」「Noisy Gradients」をクリックします。
Generate Newから、好みのグラデーションを選択します。
有料版は、ノイズの量やグラデーションのシェイプも変更可能です。
Figmaのプラグイン『Grainy Gradients』の使い方
Grainy Gradientsは、ノイズの乗ったざらつき感のあるグラデーションをオブジェクトに反映させる事ができるプラグインです。
こちらは2024年2月現在、無料でノイズの有無を設定できます。
Randomizeから、グラデーションを生成し、Generateを押すと、画像として出力できます。
画像をcommand + option + c でスタイルとしてコピーし、オブジェクトにペーストする事ができます。
Figmaのプラグイン『Mesh Gradients』の使い方
Number of mesh pointsから、メッシュポイントを設定し、Control visibility
から、グラデーションのコントロール方法を設定し、Editable edgeをオンにすると、グラデーションの外側の修正も可能に。
Randomizeから、グラデーションのランダム生成も可能、色を変更して、サイズをしてし描き出せば、画像としてグラデーションが作成されます。
-
Design
【動画あり】Figmaのプラグイン『Mockup』『Vectary 3D』の使い方｜スマートフォンやPCのモックアップをデザインに挿入しよう。
Hanai Akhiro
date.2024.10.29
-
Design
【動画あり】Figmaのプラグイン『blobs』の使い方｜流体シェイプを作ろう。
Hanai Akhiro
date.2024.10.28
-
Design
【動画あり】Figmaのプラグイン『uigradients』『Noisy Gradients』『Grainy Gradients』『Mesh Gradients』の使い方｜魅力的なGradationを作ろう。
Hanai Akhiro
date.2024.10.27
-
Design
【動画あり】Figmaのプラグイン『Wave & Curve』『get waves』の使い方｜波線を描こう。
Hanai Akhiro
date.2024.04.01
-
Design
【動画あり】Figmaのプラグイン『FigMap』の使い方｜地図を挿入しよう。
Hanai Akhiro
date.2024.03.31
-
Design
【動画あり】Figmaのプラグイン『Split Shape』の使い方｜段組み（グリッド）繰り返しレイアウトを作成しよう。
Hanai Akhiro
date.2024.03.29
-
Design
【動画あり】Figmaのプラグイン『Skew』の使い方｜図形や文字に斜体をかけよう。
Hanai Akhiro
date.2024.03.28
-
Design
【動画あり】Figmaのプラグイン『Icons8 Background Remover』の使い方｜人物、背景を切り抜こう。
Hanai Akhiro
date.2024.03.27
Popular
-
【動画あり】Figmaのプラグイン『uigradients』『Noisy Gradients』『Grainy Gradients』『Mesh Gradients』の使い方｜魅力的なGradationを作ろう。
2024.10.27
-
【動画あり】Figmaのプラグイン『FigMap』の使い方｜地図を挿入しよう。
2024.03.31
-
【動画あり】Figmaのプラグイン『Split Shape』の使い方｜段組み（グリッド）繰り返しレイアウトを作成しよう。
2024.03.29
-
【動画あり】Figmaのプラグイン『blobs』の使い方｜流体シェイプを作ろう。
2024.10.28
-
【動画あり】Figmaのプラグイン『Wave & Curve』『get waves』の使い方｜波線を描こう。
2024.04.01
-
【動画あり】Figmaのプラグイン『Iconify』の使い方｜フリー素材のアイコンをデザインに挿入しよう。
2024.03.18
-
【動画あり】Figmaのプラグイン『Skew』の使い方｜図形や文字に斜体をかけよう。
2024.03.28
-
【動画あり】Figmaのプラグイン『Mockup』『Vectary 3D』の使い方｜スマートフォンやPCのモックアップをデザインに挿入しよう。
2024.10.29
