Figmaで「最強のデザインシステム」を構築する：Variablesとトークン管理の極意
多くのチームが「Figmaでデザインシステムを作っている」と言いながら、実際には「色やスタイルの単なるカタログ」に終始している。これはシステムではない。ただのライブラリだ。
真のデザインシステムとは、デザインとコードの間に存在する「意味論（セマンティクス）」の同期である。今回は、FigmaのVariables（変数）を駆使し、開発者がコードを書く際に迷わない、真にスケーラブルなシステム構築の深淵を伝授する。
—
1. デザイントークンは「3層構造」で設計せよ
多くが犯す過ちは、`Blue-500`のような物理的な名前を直接コンポーネントに割り当てることだ。これでは、ブランドカラーが変わった瞬間に地獄を見る。
以下の3層構造を徹底してくれ。
1. Reference Tokens (Primitive): `Blue-500` などの生の数値。
2. Semantic Tokens (Alias): `Action-Primary-Background` のような用途。
3. Component Tokens: 特定のコンポーネント用。
実践：Variablesでライト/ダークモードを実装する
FigmaのVariablesで「Mode」を作成し、上記トークンをマッピングする。
- `sys/color/bg/primary`
- Light Mode: `white`
- Dark Mode: `gray-900`
こうすることで、開発者は「今、背景色はPrimaryを使っている」という意図だけを受け取ればよく、実装側のCSS/Tailwind変数と1対1で対応させることができる。
—
2. 開発スピードを極限まで高める「神ツール＆設定」
必須プラグイン：これがなければ始まらない
- [Tokens Studio for Figma](https://tokens.studio/): 公式機能だけでは足りない複雑なJSON管理を補完する。GitHubとの同期機能は必須。
- [Builder.io Visual Copilot](https://www.builder.io/c/docs/visual-copilot): FigmaのデザインからReact/Vueのコードを生成する。精度が高く、開発の初期プロトタイプ作成時間を8割削減する。
隠れたキーボードショートカット
- `Cmd + Opt + C / V` (Style/Variableのコピー＆ペースト): デザインシステムを組む際、プロパティを横展開するのにこれを使わないのは素人だ。
- `Shift + Enter` (親階層へ移動): オートレイアウトの深い階層で作業する際、一瞬で親に戻るための必須スキル。
—
3. 実践：デザインシステムをコードへ書き出す（JSON構成）
Figmaから吐き出したトークンを、プロジェクト全体で共有可能なJSONとして定義する。これを `design-tokens.json` としてCI/CDパイプラインに乗せるのがプロの作法だ。
{
“color”: {
“primary”: {
“value”: “{primitive.blue.500}”,
“type”: “color”
},
“background”: {
“value”: “{color.primary}”,
“type”: “color”,
“description”: “メインのアクション背景色”
}
},
“spacing”: {
“md”: {
“value”: 16,
“type”: “spacing”
}
}
}
注：このJSONを [Style Dictionary](https://amzn.github.io/style-dictionary/) に通せば、SCSS、Tailwind config、Swift、Kotlinの定数ファイルを自動生成できる。手動で数値を写すのは今日で最後にしよう。
—
4. チーム開発で生き残るための「共有化ルール」
どれだけ高機能なシステムを作っても、ルールがなければ崩壊する。
1. 命名規則の厳格化: `Component/Property/State` のように、必ず `/` で階層化する。FigmaのVariablesパネルで検索する際、`bg/` と打つだけで全背景色がサジェストされる状態を目指す。
2. 「Detached」の禁止: 開発者へのハンドオフ時にコンポーネントがデタッチされていたら、即座に差し戻すルールを徹底する。これはシステムへの冒涜だ。
3. 変数の変更は「プルリク制」: トークンを変更する際は、必ず「なぜ変更するのか」をドキュメントに残し、エンジニアと合意をとる。デザインの変更がコードの破壊的変更になることを忘れてはならない。
—
最後に：なぜここまでやるのか
我々がやっているのは「きれいな絵を描くこと」ではない。「プロダクトの体験を、コードという実体へ、解釈の余地なく転送すること」だ。
Figmaとコードの間にある壁を壊せ。デザイナーとエンジニアが同じ言語（トークン）で話せるようになった時、あなたのチームの生産性は、以前とは比較にならない次元へと跳ね上がる。
今すぐFigmaを開き、PrimitiveトークンをSemanticトークンに置き換える作業から始めてほしい。それが、スケーラブルなプロダクトへの唯一の道だ。