Figmaでは、グラデーション系の
プラグインも多数用意されています。

Hanai Akihiro

Design

【動画あり】Figmaのプラグイン『uigradients』『Noisy Gradients』『Grainy Gradients』『Mesh Gradients』の使い方|魅力的なGradationを作ろう。

Post:2024.04.02 / Rewrite : 2024.03.25

View

247 views

uigradientsは、あらかじめ用意された数百のグラデーションをオブジェクトに反映させる事ができるプラグインです。

figma-plugin-gradation

動画で見る|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から、グラデーションのランダム生成も可能、色を変更して、サイズをしてし描き出せば、画像としてグラデーションが作成されます。

Contact

お問い合わせ

こんなことを伝えたい!こんな表現がしたい!
これくらいの期間・予算で考えてるんだけど...
まずは、あなたのご要望をお聞かせください。
誠心誠意、お応えいたします。

contact
tel tel