FigmaでColor Stylesをカスタマイズする方法
今回はFigmaで独自のカラーパレットを設定できる機能「Color Styles」の使い方を紹介します。Color Styles に色を設定すると、デザインシステムなどで定義した色を変数的に利用できるようになり、色を調整する際に指定した箇所が一括で適用されるので便利です。
この記事のターゲット
Figmaでカラーマネジメントを効率的に行いたい方
Figmaでデザインシステムなどで定義した色をライブラリ化したい方
Figmaで特定の画像をスタイルとして利用したい方
Color Stylesに色を登録する（階層なし）
単色をColor Stylesに登録する方法です。
今回はデモ用に用意したボタンの色をColor Stylesに登録して適用してみます。手順は次の通りです。
登録したい色の塗り（Fill）を持つオブジェクト（FrameやShapeなど）を選択する
右プロパティの「Fill」という見出しの右側にある４つの点が集まったアイコンをクリックする
ポップアップが表示されるので、その右上の「＋」をクリックする
画面中央に表示されるダイアログに登録したい色の名前を入力して「Create style」をクリック
この要領で、ボタンの塗りに適用されていた赤・青・白のスタイルを登録できました。
次に、枠線で使われている灰色を登録してみます。
こちらも同じ要領で、オブジェクトを選択して今度は「Fill」ではなく「Stroke」から登録・適用します。
複数のオブジェクトを同時に選択することで同時に適用することもできます。
最後に、フォントに適用されている色もColor Stylesに登録してみます。
やり方は同じように、フォントを直接選択して上記の手順で登録するだけです。
黒色のフォントは新しくColor Stylesに登録し、白色はすでにあるものを適用できました。
ちなみに、複数のオブジェクトが含まれるFrameやGroupオブジェクトを選択すると、右プロパティに「Selection colors」という領域が表示されます。
「Selection colors」には、そのFrameやGroupに含まれるオブジェクトに適用されている色が一覧表示されるので、Color Stylesの適用が漏れている色を揃えたり、僅かにずれてしまった色を統一したりするときに非常に便利です。
以下のデモは、Variants内で適用されている色のうち、Color Stylesの適用が漏れているものに適用している様子になります。
Color Styles に画像を登録する（階層付き）
Color Stylesには、実は画像を登録することができます。
概念的には、画像（Image）も「Fill」のバリエーションの一つということなのだと思います。
単色を登録するときと同じ要領で登録することができます。
また、登録時に「Image/Lion」のように半角スラッシュでテキストを区切って登録することで、何も選択していないときに表示される右プロパティのColor Stylesの一覧で、アコーディオン形式で折り畳める階層構造を作ることができます。
また、Color Stylesの一覧で任意の色を右クリックした際に表示されるメニューの「Add new foler」でも階層を追加できます。
以下のデモでは「Image/xxx」というフォーマットで登録することで、「Image」という階層の下にスラッシュ以下のテキストでそれぞれ登録している様子がわかります。
登録されたスタイルを任意のオブジェクトに適用することができます。
ユーザーのアバター画像のダミーデータなどを利用する際に便利です。
Color Styles にグラデーションを登録する（階層付き）
Color Stylesには、グラデーションも登録することができます。
グラデーションの種類や作り方については以下の記事で紹介しています。
こちらも、これまでと同じ要領で登録できます。
適用する際も、任意のオブジェクトに適用できます。
登録したColor Stylesを編集する
最後に、登録したColor Stylesを編集・変更する方法を紹介します。
Color Stylesの一覧に登録されている色の右側のアイコンをクリックすると編集可能なポップアップが表示されます。
この中で、名前・説明テキスト・色などの要素を変更することができます。
登録したColor Stylesを削除する
また、Color Stylesの一覧で任意の色を右クリックした際に表示されるメニューの「Delete style」をクリックすると削除できます。
この記事を読んだ方におすすめの記事
