Figmaで色のStylesを効率よく作成する
Figmaではファイル上で使う色をStylesとして登録ができます。
標準のFigmaの機能だとこれをひとつずつ、サイドのDesignパネルからやっていくことになるので、色数が多い場合は少し大変です。
そこで、プラグインを活用しながらもう少し効率的にやりましょう。
手順
1. Styleをまとめて登録するプラグインをインストールする
Chroma Colors
Chroma Colorsは、選択したオブジェクトのfillの色をStyle登録するというシンプルなプラグインです。このときに登録されるStyleの名前はオブジェクトのレイヤー名が使われます。
2. 登録したい色をfillにしたオブジェクトを並べる
登録する色を整理するのを兼ねて、登録したい色のオブジェクトを並べます。
3. ひとつずつレイヤー名をリネームする
これが少し煩わしい作業ですが、あとでリネームするより楽なのでがんばりましょう。
コツとして、レイヤーのリネームのショートカットを駆使しましょう。
オブジェクトを選んで、⌘ + R（Ctrl + R）
4. 登録対象のオブジェクトを選んでプラグインを実行
Figmaのプラグインを実行するときは、ツールバーなどから プラグイン を選ぶのも良いですが、⌘ + /（Ctrl + /）でSearchを起動して、プラグイン名を検索するのが楽です。今回の場合は Chroma と入力して実行してください。
これでひとつずつStyleを登録していくよりは簡単になるかと思います。
応用
Chroma Colorsで登録すると、Styleに登録される順番は（おそらく）アルファベット順になります。これがもし気になる場合は、レイヤー名をつけるときに01_などの接頭辞をつけて一度登録して、そのあとに接頭辞を外す、という方法もあります。
これもなかなか手間な作業に感じますが、Figma標準機能のリネームでは、複数のオブジェクトを選んで実行することができます。かつ、あらかじめ用意されているナンバリングの降順・昇順や正規表現も使える優れものです。
そしてまた別のプラグインもインストールします。
Regulator
こちらはStyleの名前を一度にリネームするプラグインです。リネームする機能そのものは前述のレイヤーのリネームと同じく正規表現が使えます。
これを踏まえて下記が応用手順です。
1. Styleの管理上で並べたい順番でレイヤー名のリネームをする
オブジェクトをまとめて選択し、リネームをします。このときのレイヤーの順場は、Layersパネルの順番を元にしているようなので、あらかじめLayersのほうで並べ替えておくと一括で昇順で番号を降ることができるので楽です
2. Chroma ColorsでStyle登録
リネームしたオブジェクト（レイヤー）をまとめて選択し、Chroma Colorsを実行します。
3. RegulatorでStyle名を一括変更
Regulatorを実行し、レイヤーのリネームと同じようにリネームします。この手順では01_ のような規則の接頭辞を削除するので、正規表現に \d+_ といれて、接頭辞を一括で削除します。
これで任意の順番かつ 01_ のような並び替え用の名前も取り除いたStylesの完成です。
余談
Chroma ColorsもRegulatorも、同じ作者によるプラグインで、彼はMicrosoftでVS Codeを開発しているメンバーのようですね。Figmaのプラグインは掘り出し物がありますが、なにか良いプラグインを見つけたら、その作者のプロフィールを除いてみると掘り出し物が見つかるかもしれません。
自分の宣伝
ちなみに僕もいくつかプラグインを公開しているので、欲しいものであれば是非ご利用ください。
Stylesを変数のコードにするプラグイン
Missing Fontがどこにあるかを一覧にするプラグイン
Discussion