こんにちは。デザインシステムの構築からUI実装まで、プロダクトの「骨格」を設計するエンジニアとして、今日はFigmaにおける最も重要で、かつ多くのチームが迷走している「Styles」と「Variables」の境界線についてお話しします。
Figmaが「Variables（変数）」という強力な武器を手に入れたことで、私たちのワークフローは劇的に変わりました。しかし、「何でもかんでも変数にすればいい」というわけではありません。 これを誤ると、デザインシステムは保守不能なレガシーと化します。
今日は、大規模プロジェクトを長年支えてきた経験から、この境界線を設計する極意を伝授します。これを理解すれば、あなたのデザインデータは「ただの図面」から「コードと同期する知的資産」へと進化します。
—
1. 境界線の本質：StylesとVariablesの役割分担
まず、結論から言いましょう。「Styles」はUIの視覚的な“最終形態”を定義し、「Variables」はUIの“意味と文脈”を定義します。
| 機能 | 役割 | 主な用途 |
| :— | :— | :— |
| Variables | 「値の抽象化」 | カラーパレット、間隔(Spacing)、角丸(Radius)、モード切替(Dark/Light) |
| Styles | 「視覚的な定着」 | タイポグラフィ（フォント、行間）、複雑なエフェクト（シャドウ）、テクスチャ |
なぜ分ける必要があるのか？
- Variablesは、プログラム（CSS変数やJSON）と1対1で対応させるためのものです。`primary-500`のような意味論的（Semantic）な値を管理するのに向いています。
- Stylesは、Figma上で「テキストのスタイル」や「エフェクト」を適用するためのUI上のハブです。現状、Figmaはテキストの属性をVariablesで直接制御できないため、タイポグラフィはStylesが主戦場になります。
—
2. 使い分けの黄金律：判断の基準
現場で迷わないための判断基準は、「それはモード（Dark/Light）やプラットフォーム（Web/Mobile）によって変化する必要があるか？」という問いです。
変数（Variables）にすべきもの
- カラー（Primitives & Semantics）： `blue-500`（値）を`brand-primary`（役割）に変換し、さらにDarkモードで`brand-primary-dark`へ切り替える必要があるもの。
- レイアウト数値： `spacing-md: 16px`のような値。モバイルで`spacing-md`が`12px`になるようなレスポンシブ制御には変数一択です。
スタイル（Styles）にすべきもの
- タイポグラフィ： `Heading-H1`など、フォントサイズ・ウェイト・行間がセットになったもの。
- シャドウ（エフェクト）： 複数のレイヤーが重なる複雑なシャドウは、Stylesとして登録し、コンポーネントに割り当てるのが最も効率的です。
—
3. ステップバイステップ：変数移行への羅列戦略
既存のスタイルを全て消して変数に置き換えるのは自殺行為です。以下のステップで、安全かつ確実に移行しましょう。
Step 1: プリミティブ（原始値）の定義
まずは色を16進数から変数に移行します。「Local Variables」パネルを開き、`Primitive`グループを作成して、ブランドカラーやグレーパレットを登録します。
Step 2: セマンティック（意味論）レイヤーの作成
次に、`Semantic`グループを作ります。
- `bg-default` -> `gray-0`
- `text-primary` -> `gray-900`
このように、「何のための色か」を定義します。ここがデザインシステムの肝です。
Step 3: コンポーネントの再割り当て
ここが最も重要です。既存のコンポーネントから「スタイル」の適用を外し、「変数」を割り当てます。
/ 思考プロセスの例 /
1. ボタンの背景色を選択
2. 従来の「Color Style」をデタッチ（切断）
3. 新しい「Variable」の「action-primary-bg」を選択
Step 4: モードの検証（HelloWorld的確認）
1. `Primitive`と`Semantic`の紐付けが完了したら、親フレームを作成します。
2. 親フレームの設定で「Mode」を「Dark」に切り替えます。
3. セマンティック変数の中身（値）をDarkモード用に書き換えます。
4. 全ての色が自動的に切り替われば成功です！
—
先輩エンジニアからのアドバイス
「ツールは楽をするためにある」ということを忘れないでください。最初から完璧なシステムを作ろうとせず、まずは「よく使う色と間隔」から変数化を始めてみてください。
デザインシステムは「作るもの」ではなく、日々の運用の中で「育てるもの」です。まずは今日、あなたのプロジェクトのカラーパレットをVariablesへ移すところからスタートしてみませんか？
この一歩が、数ヶ月後のあなたやチームの作業時間を何十時間も節約することになります。応援していますよ！