今回は、Figmaで図形やテキストにグラデーションを適用させる方法について詳しく解説します。グラデーションを利用することで、デザインの幅が大きく広がります。この機会にぜひマスターしてみてください。

図形やテキストの「塗り」にグラデーションを適用させる方法

図形やテキストを選択した状態で、右パネルの「塗り」をクリックします。表示されるモーダルの上部にある「単色」の隣の「グラデーション」を選択することで、「単色」から「グラデーション」へと変更することができます。

グラデーションのパターン

グラデーションのパターンは全部で4つあります。「線形」と書いてあるセレクトボックスを選択すると、線形・放射状・円錐形・菱形の4つからパターンを選択できるようになっています。一番よく使用されているのは「線形」のグラデーションです。

▼ グラデーションのパターンの変更方法

▼ 4つのグラデーションのパターンの違い

グラデーションの色の変え方・カラーストップを追加する方法

モーダル中央部に配置されているバーを利用して、色の切り替えポイント（カラーストップ）を追加・削除したり、カラーストップ間の間隔を調整することができます。新しいカラーストップを追加する際は、バー上の該当箇所をクリックし、削除する場合はカラーストップを選択しdeleteキーを押してください。

カラーストップを選択した状態で、色調・透明度を操作することでカラーストップの色・透明度を変更することができます。

グラデーションの方向の変え方

グラデーション設定を開いているときに、編集中の図形やテキスト上に表示される線と点をドラッグすることで、グラデーションの方向を編集することができます。また、この線上でクリックすることにより、新たなカラーストップを追加することもできます。

Figmaで綺麗なグラデーションを作るコツ

Figmaで、美しいグラデーションを作成する際のポイントや、効率的な手法について紹介します。一見単純なグラデーションも、配色の選び方によっては視覚的な違和感や不快感を生じさせることがありますので、ぜひ参考にしてみてください。

色相環を意識して配色を考える

色相環上で隣接する2色や3色を使ってグラデーションを作成すると、滑らかで自然な印象のグラデーションを作ることができます。

しかし、色相環上で遠く離れた色同士を直接繋ぐと、視覚的に不快感や違和感を与えることがあるため、中間色(ミッドポイント)を適切に配置し、滑らかな色の変化になるよう心掛けることが大切です。

明暗を意識して配色を考える

色相を揃え、明度や彩度のみを変えてグラデーションを作ると、自然なグラデーションを作ることができます。例として、青や黄色の色相を基調に、明るさの異なる色を組み合わせることで、下記の画像のような自然なグラデーションを作ることができました。

グラデーションのプラグイン「Uigradients」を利用する

Uigradientsは、さまざまなグラデーションパターンが用意されているプラグインです。グラデーションのパターンは350種類以上用意されており、選択した後にFigma上で色の調整も行うことができます。

素早く綺麗なグラデーションを作成したいときは、ぜひ利用してみてください。他にも、Figmaでの作業を効率化するプラグインを下記の記事で紹介していますので、ぜひご覧ください。

※ 参考記事：【2023年度版】Figmaのおすすめプラグイン20選！プラグインのインストール方法から使い方まで解説

まとめ

この記事では、Figmaのグラデーション機能について解説しました。グラデーションを利用することで、デザインをよりリッチに表現することができます。ぜひ活用してみてください。