Figmaの色・文字・余白のルール。AIに渡せる指示文つき

こんにちは、bravesoftのUI/UXデザイナーの池田です。デザインシステムについて全3編で書いていて、今回は第2編です。

第1編の最後に、次は色・文字・余白のStyleとVariablesも、AIに精度高く作ってもらうためのルールを紹介すると書きました。実際、AIに画面を作ってもらうと、登録してある文字のStyleを使わずに、近いサイズを直接指定していることがありました。

コンポーネントがルールどおりでも、中で使う色・文字・余白がばらばらだと、画面ごとに見た目がずれていきます。色・文字・余白は、すべてのコンポーネントと画面が参照する土台です。ここが決まっていないと、AIも人も「それらしい値」を選ぶしかありません。

このシリーズで目指しているのは、案件の始まりに、意図に近いデザインシステムをAIに作ってもらうことです。今回は、色・文字・余白をFigmaに登録するときに私が決めていることをまとめました。まず基本となるVariablesとStyleの違いを整理してから、色・文字・余白の順に紹介します。

• 1章　基本：VariablesとStyleの違いと、どちらに登録するか
• 2章　色：色の値と使う場所の分け方、Modeで変えるもの
• 3章　文字：Styleの命名ルール
• 4章　余白：段階と命名ルール

どれも案件ごとの細かい値ではなく、最初に決めておく基本の部分です。これまで携わってきた、同じシリーズのアプリ3つを展開する案件や、8つのサービスの色を切り替える案件での経験をもとにしています。

記事の中では、AI（Claude×Figma MCP）に指示なしで作ってもらったときの結果も紹介しています。AIが自分で決めてしまうところが見えると、人が先に決めておくべきところも見えてきます。

デザインシステムをこれから作る人はもちろん、AIを使ってデザインシステムの精度を上げたい人にも、読んでもらえるとうれしいです。5章では、AIにそのまま渡せる指示文の全文を紹介します。第1編の指示文とセットで渡せば、コンポーネントと色・文字・余白のルールがそろいます。

前回の記事

Figmaコンポーネント設計の基本。AIに渡せる指示文つき

1. 基本：VariablesとStyleの違い

Figmaで色・文字・余白を登録する仕組みには、VariablesとStyleの2つがあります。色のようにどちらにも登録できるものもあるので、どちらに入れればいいのか、少し迷いますよね。まずは、それぞれの役割を見てみます。

Variables（バリアブル・変数）　「メインカラー」「余白16」のように、1つの値に名前を付けたものです。Modeを使うと、同じ名前のまま、サービスやライト／ダークごとに値を切り替えられます。色だけでなく、Auto Layoutの余白や角丸などの数値にも使えます。

Style（スタイル）　文字のように、フォント・サイズ・太さ・行間を組み合わせて登録するものです。影などのエフェクトや、グラデーションのようにVariablesに入れられないものも、Styleに登録します。

色と余白はVariables、文字はStyle。

ただ、Figmaでは色1色だけのStyleも作れます。Variablesができる前からある使い方なので、ファイルによっては、同じ色が両方に入っていることもあります。両方にあると、使うときも直すときも迷うので、Styleに色を入れるのは、グラデーションのようにVariablesでは扱えないものだけにしています。

当たり前に見えますよね。でも、指示なしでAIに作ってもらうと、色をVariablesに登録したうえで、同じ色をStyleにも8個作っていました。なので、AIにはここもはっきり書いて渡しています。

- 1つの値（色・余白・角丸・線幅）はVariables、複数の設定をまとめるもの（文字・グラデーション・エフェクト）はStyleに登録する。
- 同じ値を、VariablesとStyleの両方に登録しない。

ここまでが基本です。次からは、色、文字、余白の順に、実際に登録するときに決めていることを見ていきます。

2. 色の登録ルール（Variables）

まずは色です。1章で書いたとおり、色はVariablesに登録します。ここで私が決めているのは、色の値と使う場所の分け方と、Modeで何を変えるかの2つです。

色の値と、使う場所を分ける

色は、2段階で登録しています。まず、blue/500やgray/100のように、色そのものを「色の値」として登録します。使える色の一覧のようなものです。次に、メインカラー（background/primary）やテキストカラー（text/primary）のように、意味を表す「使う場所」の名前を作り、そこから色の値を参照させます。画面では使う場所の名前で色を使うので、Modeで参照先を切り替えるだけで、色をまとめて変えられます。一般に、Primitive（色の値）とSemantic token（使う場所）と呼ばれる分け方です。

使う場所の名前は、最初から全部そろえなくても大丈夫です。画面で使う色が見えてから足すこともあります。

Figmaでの登録手順も、簡単に書いておきます。登録は、画面左のナビゲーションにあるVariablesから行います。色の値と使う場所でコレクション（Variablesのグループ）を分け、使う場所のほうは、値を右クリックして「Create alias」から色の値を参照させます。

では、AIに任せるとどうなるか。色の値と使う場所を分けること自体はよく知られた考え方なので、指示しなくてもAIはできていました。ただ、blue/500やbackground/primaryのような名前の付け方までは、指示しないとこちらの意図どおりにはなりません。命名ルールは、5章の指示文に入れています。そしてもう1つ、人が先に決めておきたいのが、次のModeです。

Modeの使い方

Modeは、同じVariableにModeごとに別の値を持たせる仕組みです。サービスごとの色や、ライトとダークの切り替えに使います。Variablesの表の列見出しにある「＋」で足し、フレームを選んで右パネルの「Appearance」から切り替えます。

ちなみに、Modeを複数作れるのは、Professionalなどの有料プランと教育向けプランです。

Modeは、コレクション単位で増えます。Modeを足すと、コレクションのすべてのVariableに新しい列ができて、最初は一番左の列の値がそのまま入ります。あとは、サービスごとに変えたい値だけを書き換えれば大丈夫です。同じコレクションには、色だけでなく、数値やテキストも登録できるので、サービスごとに角丸などを変えることもできます。

このように、Modeでは色も角丸も、いろいろな値を変えられます。だからこそ、Modeを作る前に、Modeで何を変えて、何をそろえるかを決めておいたほうがいいと考えています。ここが決まっていれば、どの値を書き換えればいいかもすぐに分かります。

以前、複数のサービスで使うサイトのデザインシステムをAIに作ってもらったときは、色だけが違うボタンを、AIがサービスごとに別の部品にしていました。サービスが増えるたびに、ボタンも増えていく形です。これは1つのボタンにまとめて、色はModeで切り替える形に直しました。

どこまでModeで変えるかはサービスによって違うので、AIには分かりません。指示なしで作ってもらったときは、ボタンの角丸までModeで変えていました。そのため、ここは人が先に決めて、AIに渡しています。

- Modeを作る前に、サービス同士でそろえる要素と変える要素を決める。決まっていなければ確認する。
- 色だけが違う部品は、サービスごとに分けず、1つの部品にしてModeで切り替える。

ここで少し寄り道して、色の値を登録するときに私がよく使っているプラグインを紹介させてください。

コラム｜おすすめのプラグイン：ToneCurve Color Palette Generator

色の値を1つずつ手で入れるのは、登録も調整も、正直かなり大変です。最初のセットアップでは、先輩が作ったプラグイン「ToneCurve Color Palette Generator」を使っています。

ToneCurve Color Palette Generator（Figma Community）

1色からパレットを作成　基準となる色を1つ設定すると、濃淡の段階がそろったカラーパレットを作成できます。

VariablesとStyleへ登録　作成したカラーを、VariablesやStyleにまとめて登録できます。

確認用のフレームを書き出す　パレットをFigma上のフレームとして出力できるため、デザイナー以外のメンバーにも色の一覧を共有しやすくなります。

色を作って登録するまでのハードルがぐっと下がったので、デザインシステムを立ち上げるときによく使っています。色の登録に時間がかかっている人には、ぜひ一度試してみてほしいプラグインです。

3. 文字の登録ルール（Style）

色の次は文字です。文字は、フォント・サイズ・太さ・行間を組み合わせて使うので、Styleに登録しています。文字を選び、右パネルの文字の欄にあるスタイルのアイコンから「＋」で作れます。

ちなみに、フォントファミリーをVariablesに登録して、Styleから参照することもできます。こうしておくと、Modeでフォントを切り替えられます。この記事では、Styleにまとめる基本の形で書いています。

命名ルールは「使う場所_太さ – フォントサイズ」

文字のStyleで一番気にしているのは、命名ルールです。「見出し」や「Card/Title」のような名前だと、何pxで太字なのかは、覚えていないと分かりません。Figmaの一覧に並んだときも、どれを選べばいいか迷います。

そこで私は、名前に使う場所・太さ・サイズを省略して並べています。

• head_r – 22　見出し・Regular・22px
• body_r – 14　本文・Regular・14px
• body_b – 14　本文・Bold・14px

これなら、一覧を見ただけで「22pxの見出し」だと分かって、迷わず選べます。

指示なしだと、AIもCard/Titleのような名前を付けていました。なので、この付け方をそのまま渡しています。

- 文字のStyleの名前は「使う場所_太さ - フォントサイズ」で付ける（head_r - 22、body_b - 14など）。
- 太さは頭文字（Regularはr、Boldはb）、フォントサイズはpxの数字だけを書く。

4. 余白の登録ルール（Variables）

最後は余白です。余白は1つの数値なので、色と同じくVariablesに登録します。Auto Layout（オートレイアウト）のgapやpaddingの欄でVariableのアイコンを押すと、登録した余白から選べます。

基本は4の倍数（4、8、12、16、24、32）です。そこに、2pxとマイナスの値も足しておきます。マイナスの値をgapに使うと、要素を少し重ねて並べられます。

名前は、spacing/16やspacing/-4のように数値にしています。文字のStyleと同じで、一覧を見ただけで何pxか分かるからです。

ちなみに、角丸や線幅も、複数のコンポーネントで使う値ならVariablesにしています。

指示なしだと、AIはxs〜xlのような名前で、12のない5段階を作っていました。なので、段階と名前の付け方を渡しています。

- 余白は4の倍数（4／8／12／16／24／32）で登録し、必要に応じて2とマイナスの値も登録する。
- 名前は「spacing/数値」にする（spacing/16、spacing/-4など）。

5. AIに渡す指示文

ここまでの決めごとは、どれも「一覧から迷わず選べること」と「あとからまとめて変えられること」を考えて決めています。名前で選べて、名前で直せる形にしておくと、人もAIも迷いにくくなります。この決めごとを、AIにそのまま渡せる指示文（Markdown）にまとめました。全文の前に、書き方で気をつけていることを紹介します。

指示文の書き方：言葉の意味と判断の基準を先に渡す

指示文は、「こう作って」と頼むものというより、こちらの言葉の意味と、判断の基準を先に渡しておくものだと考えています。「使う場所」や「そろえる要素」のような言葉も、AIがこちらと同じ意味で受け取るとは限らないからです。

なので、指示文はこの順番で書いています。

• 目的：何のためのルールか
• 用語：指示文で使う言葉の意味
• 決めごと：登録先、Mode、名前、余白などのルール
• 迷ったとき：決まっていないことは確認する。確認できなければ、仮で進めて報告する
• 確認と報告：作ったあとに見る項目と、報告してほしいこと

書いていて一番大事だと思ったのは、「迷ったとき」です。全部を先に決めておくことはできません。決めていないところを、AIが黙って決めずに人に返してくれれば、あとから見直す場所が分かります。

指示文の全文

色や文字は、案件の始まりにコンポーネントと一緒に作ることが多いので、第1編の指示文とセットで渡すのがおすすめです。

# Figmaの色・文字・余白ルール
 
## 目的
色・文字・余白を、一覧から名前で選べて、あとから名前でまとめて直せる状態にする。ルールにない場面では、この目的に沿って判断する。
 
## 用語
- 色の値：blue/500のように、色そのものに付けた名前（Primitive）
- 使う場所：background/primaryのように、画面のどこに使うかを表す名前（Semantic）
- Mode：同じVariableに、サービスやLight／Darkごとの値を持たせる仕組み
- そろえる要素：サービスが変わっても同じにしておく要素（角丸、余白、文字など）
 
## 前提
値の登録先は、2種類に分ける。
- 1つの値（色・余白・角丸・線幅）→ Variables
- 複数の設定をまとめるもの（文字・グラデーション・エフェクト）→ Style
同じ値を、VariablesとStyleの両方に登録しない。
このルールの対象は、色・文字・余白だけ。コンポーネントの作り方は「Figmaコンポーネント設計ルール」（第1編）に従う。
 
## 進め方
1. 作る前に、ファイルにある既存のVariablesとStyleを確認する。同じ役割のものがあれば、新しく作らずに使う。
2. 色の値 → 使う場所 → Mode → 文字 → 余白の順に登録し、最後にコンポーネントへ適用する。
3. ルールにない値や、決まっていないことがあれば、勝手に決めずに確認する。確認できないときは、仮の判断で進め、報告に書く。
 
## カラー
1. 色の値は「色相/段階」で名前を付ける（blue/500、gray/100など）。段階は、数字が大きいほど濃くする。
2. 使う場所の名前は「場所/種類」で付ける（background/primary、text/primary、text/error、border/defaultなど）。
3. グレーや黒のように、いろいろな場所で使う色は、使う場所の名前から色の値を参照する。
4. コンポーネントや画面に、カラーコードを直接入れない。
 
## Mode
1. Modeは、まとめて切り替えたい単位で作る（サービス、Light／Darkなど）。
2. Modeを作る前に、サービス同士でそろえる要素と変える要素を決める。決まっていなければ確認する。
3. Modeは、使う場所の名前を入れたコレクションに作る。色の値のコレクションには作らない。
4. 色だけが違う部品は、サービスごとに分けず、1つの部品にしてModeで切り替える。
 
## 文字
1. フォント、サイズ、太さ、行間をまとめて、Styleに登録する。
2. 名前は「使う場所_太さ - フォントサイズ」を省略して付ける（head_r - 22、body_r - 14、body_b - 14など）。
   - 使う場所：head（見出し）、body（本文）など
   - 太さ：Regularはr、Boldはbのように頭文字にする
   - フォントサイズ：pxの数字だけを書く
3. 1つの案件の中では、この名前の付け方にそろえる。
 
## 余白
1. 余白は4の倍数（4／8／12／16／24／32）で登録する。必要に応じて、2とマイナスの値（-4など）も登録する。マイナスの値はgapだけに使う。
2. 名前は「spacing/数値」にする（spacing/16、spacing/-4など）。
3. Auto Layoutのgapとpaddingには、数値を直接入れず、余白のVariableを適用する。
4. 角丸と線幅は、複数のコンポーネントで共通する値だけVariablesに登録する（radius/8など）。
 
## 作ったあとの確認
- コンポーネントの色と余白が、直接指定ではなくVariableになっているか。
- 余白に、4の倍数・2・マイナス以外の値が入っていないか。
- 文字に、登録したStyleが適用されているか。
- Modeを切り替えたとき、決めた要素だけが変わるか。
- 同じ値や似た名前のVariableが重複していないか。
- 文字のStyleの名前が、決めた形にそろっているか。
 
## 報告
作業のあとに、追加したVariablesとStyleを一覧で示す。ルールにない判断や、仮で決めたことがあれば、その理由も書く。

今回のルールも、第1編と同じようにClaudeのスキルに入れて、実際の案件で試していく予定です。AIに任せられることが増えるほど、人が先に決めておくことの大切さを感じています。AIにVariablesやStyleを作ってもらうときの参考になればうれしいです。

次回：複数人で使い、更新していくためのルール

第3編では、デザインシステムを複数人で使い、更新していくためのルールを書く予定です。複数人で触っていると、誰かの変更がほかの画面に影響することがあります。そんなときに迷わないための決めごとをまとめます。

おまけ｜この記事のキャラクター

この記事用に、VariablesとStyleのキャラクターを作ってみました。値をきっちり管理するVariablesは四角いキャラクター、表現を柔軟にまとめるStyleは丸いキャラクターです。