figma-how-to-gradation
公開日: 2021.05.14  | 更新日: 2021.06.19

Figmaで図形やテキストのべた塗りとグラデーションの使用方法

Figmaで図形やテキストなどのオブジェクトにベタ塗りや様々な種類のグラデーションを適用する方法を紹介します。

この記事のターゲット

  • Figmaの初心者

  • テキストや図形にベタ塗りやグラデーションを適用する方法を知りたい方

  • Figmaで使用できるグラデーションの種類が知りたい方


テキストや図形にベタ塗りを適用する方法

figma-change-color
  1. ベタ塗りを追加・編集したいオブジェクトを選択

  2. 右プロパティの「Fill」の「+」でレイヤーを追加

  3. 追加したレイヤーの左端の□をクリックし、カラーパレットを表示

  4. カラーパレットから色を追加したり、選択した色を変更できる

ちなみに、Figmaで使用できるカラーモデル・色空間は以下になります。印刷物などで利用されるCMYKはサポートされていません。

figma-change-color-model
  • Hex - Webで一般的な16進数のカラーコードです。(例:#E5E5E5)

  • RGB - Hexとほぼ同じですが、RGBを個別に10進数で表現したものです。

  • CSS - CSS構文を使用してRGBa値を入力できます。

  • HSL - 色相(Hue)、彩度(Saturation)、輝度(Lightness)の3つの成分からなる色空間です。

  • HSB - 色相(Hue)、彩度(Saturation・Chroma)、明度(Value・Brightness)の三つの成分からなる色空間です。

テキストや図形にグラデーションを適用・変更する方法

テキストや図形の塗りをグラデーションにする、またはグラデーションの色に変更する方法は以下の通りです。

  1. グラデーションを追加・編集したいオブジェクトを選択

  2. 右プロパティの「Fill」の「+」で塗りのレイヤーを追加

  3. 追加したレイヤーの左端の□をクリックし、カラーパレットを表示

  4. カラーパレット上部の「Solid」を「Liner」に変更

  5. カラーパレットがグラデーション調整モードになるので、グラデーションの設定エリアで色を追加したり、選択した色を変更できる

create-sunset-background

FigmaのFillレイヤーの塗り方には、一方向の線形グラデーション「Liner」だけでなく、以下の種類から選択できます。

  • Solid:1色のベタ塗り

  • Liner:一方向に線形に変化する

  • Radical:中心から放射状(○)に広がっていく

  • Angular:時計回りに円形方向に変化する

  • Diamond:中心からひし形状(♢)に広がっていく

  • Image:画像を挿入する

figma-fill-style

その他、パスの扱い方やスタイルの変更方法など、Figmaの基本的な操作方法や困ったときのTipsを以下の記事にまとめていますので、併せてご覧ください。

Figma初心者が使い方に困った時に試してほしいTips

今回は、納品されたり引き継いだFigmaのデザインデータを、修正・変更して再利用しようとした時によく発生するトラブルと、その対応方法をいくつか紹介したいと思います。 ... 続きを読む

figma-beginners-tips

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告