figma-how-to-use-color-styles
公開日: 2022.04.29  | 更新日: 2022.04.29

FigmaでColor Stylesをカスタマイズする方法

今回はFigmaで独自のカラーパレットを設定できる機能「Color Styles」の使い方を紹介します。Color Styles に色を設定すると、デザインシステムなどで定義した色を変数的に利用できるようになり、色を調整する際に指定した箇所が一括で適用されるので便利です。

この記事のターゲット

  • Figmaでカラーマネジメントを効率的に行いたい方

  • Figmaでデザインシステムなどで定義した色をライブラリ化したい方

  • Figmaで特定の画像をスタイルとして利用したい方


Color Stylesに色を登録する(階層なし)

単色をColor Stylesに登録する方法です。

今回はデモ用に用意したボタンの色をColor Stylesに登録して適用してみます。手順は次の通りです。

  1. 登録したい色の塗り(Fill)を持つオブジェクト(FrameやShapeなど)を選択する

  2. 右プロパティの「Fill」という見出しの右側にある4つの点が集まったアイコンをクリックする

  3. ポップアップが表示されるので、その右上の「+」をクリックする

  4. 画面中央に表示されるダイアログに登録したい色の名前を入力して「Create style」をクリック

color1

この要領で、ボタンの塗りに適用されていた赤・青・白のスタイルを登録できました。

次に、枠線で使われている灰色を登録してみます。

こちらも同じ要領で、オブジェクトを選択して今度は「Fill」ではなく「Stroke」から登録・適用します。

複数のオブジェクトを同時に選択することで同時に適用することもできます。

color2

最後に、フォントに適用されている色もColor Stylesに登録してみます。

やり方は同じように、フォントを直接選択して上記の手順で登録するだけです。

color3

黒色のフォントは新しくColor Stylesに登録し、白色はすでにあるものを適用できました。

ちなみに、複数のオブジェクトが含まれるFrameやGroupオブジェクトを選択すると、右プロパティに「Selection colors」という領域が表示されます。

「Selection colors」には、そのFrameやGroupに含まれるオブジェクトに適用されている色が一覧表示されるので、Color Stylesの適用が漏れている色を揃えたり、僅かにずれてしまった色を統一したりするときに非常に便利です。

以下のデモは、Variants内で適用されている色のうち、Color Stylesの適用が漏れているものに適用している様子になります。

color4

Color Styles に画像を登録する(階層付き)

Color Stylesには、実は画像を登録することができます。

概念的には、画像(Image)も「Fill」のバリエーションの一つということなのだと思います。

単色を登録するときと同じ要領で登録することができます。

また、登録時に「Image/Lion」のように半角スラッシュでテキストを区切って登録することで、何も選択していないときに表示される右プロパティのColor Stylesの一覧で、アコーディオン形式で折り畳める階層構造を作ることができます。

また、Color Stylesの一覧で任意の色を右クリックした際に表示されるメニューの「Add new foler」でも階層を追加できます。

以下のデモでは「Image/xxx」というフォーマットで登録することで、「Image」という階層の下にスラッシュ以下のテキストでそれぞれ登録している様子がわかります。

color5

登録されたスタイルを任意のオブジェクトに適用することができます。

ユーザーのアバター画像のダミーデータなどを利用する際に便利です。

color6

Color Styles にグラデーションを登録する(階層付き)

Color Stylesには、グラデーションも登録することができます。

グラデーションの種類や作り方については以下の記事で紹介しています。

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

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

figma-how-to-gradation

こちらも、これまでと同じ要領で登録できます。

color7

適用する際も、任意のオブジェクトに適用できます。

color8

登録したColor Stylesを編集する

最後に、登録したColor Stylesを編集・変更する方法を紹介します。

Color Stylesの一覧に登録されている色の右側のアイコンをクリックすると編集可能なポップアップが表示されます。

この中で、名前・説明テキスト・色などの要素を変更することができます。

color9

登録したColor Stylesを削除する

また、Color Stylesの一覧で任意の色を右クリックした際に表示されるメニューの「Delete style」をクリックすると削除できます。


この記事を読んだ方におすすめの記事

Figmaでシンプルなボタン・コンポーネントを作る方法

今回は、Figmaでシンプルなボタン・コンポーネントを作る方法を紹介します。テキストのシンプルなボタンを、「Component」と「Variants」と「Auto layout」を使って丁寧に作成します。また、自由に使えるサンプルファイルも用意していますので、ご活用ください。 ... 続きを読む

figma-how-to-create-button

Figmaで画像の色をセピアや単色のモノクロに変換する方法

今回は、SNSやブログなどで使用するバナー画像にすぐ使える、モノクロ画像をFigmaで簡単に作成する方法をまとめました。 ... 続きを読む

figma-brend-mode-luminosity

Figmaで画像を○や□などの好きな形に切り抜く方法

Figmaで画像をトリミングしたり、好きな形にくり抜く方法の紹介です。アプリのユーザーアイコンをデザインする際に円形にくり抜いたり、WEBやスライド資料などに差し込む画像の加工などに便利です。 ... 続きを読む

figma-how-to-crop-and-mask

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

うえんつ

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