プロトタイピングの迷宮から抜け出し、デザインとコードが「完全に同期する」聖杯を手に入れたいあなたへ。
こんにちは。UI/UXエンジニアとして長年、デザインと実装の間の「翻訳コスト」という巨大な壁と戦い続けてきました。多くの現場で、Figmaで決めた色がコード側で微妙にズレたり、仕様変更のたびにデザイナーとエンジニアがチャットで深夜まで議論する光景を見てきました。
結論から言いましょう。「デザイントークン」こそが、その壁を破壊する唯一の鍵です。
今日は、FigmaのVariables（変数）を軸に、Style Dictionaryを使ってデザインを「直接コードへ流し込む」という、今のトップティアの現場で標準になりつつある構築手法を伝授します。これをマスターすれば、あなたのプロダクトは「常に最新の状態」を維持できる、強固な生命体へと進化します。
—
1. なぜ「Variables」と「トークン」を繋ぐ必要があるのか？
これまでのCSS変数は「ハードコーディング」に近い管理でした。しかし、Figma Variablesの登場により、デザインシステムは「定数（値）」から「変数（参照）」へと進化しました。
ここで重要なのは、「FigmaはあくまでUI/UXのソースであり、コードはプロダクトのソースである」という原則です。この2つを「デザイントークン（JSONファイル）」という共通言語でつなぐことで、初めて「デザイン変更＝即座にコード反映」という理想郷に辿り着けます。
—
2. 環境構築：最強の同期パイプラインを作る
まずは、Figmaから吐き出されたデータをコードに変換する「Style Dictionary」を導入しましょう。
手順1：Figma Variablesをエクスポート
現在は「Figma Tokens (旧Token Studio)」プラグインを使うのが最も現実的かつ強力な解法です。VariablesをJSON形式でエクスポートできるように設定してください。
手順2：Style Dictionaryのインストール
プロジェクトのルートディレクトリで以下を実行します。
プロジェクトの準備
mkdir design-system-sync && cd design-system-sync
npm init -y
Style Dictionaryのインストール
npm install style-dictionary
手順3：設定ファイル（config.json）の作成
ここが心臓部です。JSONファイルをどのような言語の形式（CSS, SCSS, Swift, Kotlinなど）に変換するかを定義します。
{
“source”: [“tokens//.json”],
“platforms”: {
“css”: {
“transformGroup”: “css”,
“buildPath”: “dist/css/”,
“files”: [{
“destination”: “_variables.css”,
“format”: “css/variables”
}]
}
}
}
—
3. 動作確認：HelloWorldならぬ「Hello Design」
Figmaで設定した`color-primary`という変数が、実際にCSSとして出力されるか確認しましょう。
1. `tokens/colors.json`を作成します：
{
“color”: {
“primary”: { “value”: “#007AFF” }
}
}
2. ビルドコマンドを実行します：
npx style-dictionary build
3. `dist/css/_variables.css`を見てみてください。魔法のようにCSS変数が生成されているはずです！
/ dist/css/_variables.css /
:root {
–color-primary: #007aff;
}
これが「デザイントークン」の力です。Figmaで色を変えてJSONを更新し、このコマンドを叩くだけで、アプリ全体の色が即座に変わる。これが開発の「劇的な効率化」の正体です。
—
4. CI/CDで自動化の極みへ
この手動作業すら、GitHub Actionsを使えば自動化できます。
1. GitHubへプッシュ：デザイナーがToken StudioからGitHubへJSONをプッシュ。
2. Action発火：リポジトリの変更を検知。
3. 自動ビルド：`style-dictionary build`がサーバー上で実行される。
4. 反映：生成されたCSSがプロダクトにマージされる。
このフローが完成した瞬間、エンジニアは「色の微調整」という退屈な作業から解放され、より本質的なUI体験の向上に集中できるようになります。
—
最後に：デザインシステムは「生き物」です
Figma 4.0の進化を見据えるなら、単に「色」だけでなく、スペーシング、タイポグラフィ、シャドウに至るまで、すべての設計思想をVariablesに落とし込んでください。
デザインとコードを分断するのではなく、「共通の言語（トークン）」で会話をする。 これこそが、これからのプロダクト開発において最も価値のあるスキルです。
最初は難しく感じるかもしれませんが、一度この仕組みを作れば、あなたの毎日は劇的に楽になります。さあ、最高の体験を一緒に作り上げましょう！何か詰まったら、いつでも聞いてくださいね。