Figma Component 4.0時代の「真・デザイントークン」運用術：Style DictionaryとGitHubを繋ぐ自動化の極致
「デザインとコードの乖離」という、我々エンジニアとデザイナーを長年苦しめてきた不毛な争いに、ようやく終止符を打つ時が来た。
Figmaが「Variables」を実装し、コンポーネントの概念が「Component 4.0」へと進化しようとしている今、デザイントークンの運用は「単なる色の定義」から「プロダクトの意思（Logic）の同期」へと昇華した。本記事では、FigmaのVariablesを起点に、Style DictionaryとGitHub Actionsを駆使して、デザイン変更が瞬時にコードベースへデプロイされる「完全同期パイプライン」の構築手法を徹底解説する。
これは単なるチュートリアルではない。プロダクトの命運を握る「Single Source of Truth (SSOT)」を構築するための、現場の血が通った設計思想である。
—
1. Figma Variablesとコードの「不一致」を殺す：3層構造のトークン設計
多くのチームが失敗するのは、FigmaのVariablesを「ただの定数管理」だと思っているからだ。コードベースと完全に一致させるには、まずトークンの「階層構造」を厳格に定義しなければならない。
トークンの3階層モデル
1. Primitive (Global): `blue-500: #2196F3` のような、具体的な値。デザイナー以外は直接参照してはいけない。
2. Semantic (Alias): `button-bg-primary: $blue-500`。用途を定義する層。開発者がコードで叩くのはここだ。
3. Component (Specific): `card-border-radius: $radius-md`。特定のコンポーネント専用。
プロの鉄則:
Figmaの「Variables」機能でこのエイリアス（参照）を徹底せよ。Figma上で値を直接入力（ハードコード）している箇所が1つでもあるなら、それは将来の負債だ。
—
2. Token Studio × Style Dictionary：双方向同期のプラクティス
Figma標準のVariables APIは強力だが、まだコードへの書き出しには「橋渡し」が必要だ。現時点での最適解は、Tokens Studio (Pro) をハブにし、GitHubリポジトリへJSONをプッシュする構成である。
Style Dictionaryの設定例（`config.json`）
デザインから書き出された生のJSONを、エンジニアが使いやすいSCSS/TypeScript/Swift/Kotlinへ変換する「心臓部」の設定だ。
{
“source”: [“tokens//.json”],
“platforms”: {
“web/ts”: {
“transformGroup”: “tokens-studio”,
“buildPath”: “src/styles/generated/”,
“files”: [
{
“destination”: “tokens.ts”,
“format”: “javascript/es6”,
“options”: {
“showFileHeader”: true,
“outputReferences”: true // エイリアス関係を保持したまま出力
}
}
]
},
“css”: {
“transformGroup”: “css”,
“buildPath”: “src/styles/generated/”,
“files”: [
{
“destination”: “variables.css”,
“format”: “css/variables”
}
]
}
}
}
ここが肝: `outputReferences: true` を指定することで、CSS変数でもエイリアス（例: `var(–color-primary, var(–color-blue-500))`）が維持される。これがデバッグのしやすさを劇的に変える。
—
3. デザイン変更を即座にコードへ反映するCI/CDパイプライン
デザイナーがFigmaで「Save to GitHub」をクリックした瞬間、自動的にPRが作成され、ビルドが走る。この「震えるほど快適な体験」をGitHub Actionsで実現する。
GitHub Actions Workflow (`.github/workflows/tokens.yml`)
name: Update Design Tokens
on:
push:
branches:
- main
paths:
- ‘tokens/’ # トークンファイルが更新された時のみ発火
jobs:
build-tokens:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: ’18’
- name: Install Dependencies
run: npm install style-dictionary @tokens-studio/sd-transforms
- name: Build Tokens
run: node build-tokens.js # Style Dictionaryを実行するカスタムスクリプト
- name: Create Pull Request
uses: peter-evans/create-pull-request@v5
with:
commit-message: “style: update design tokens from figma”
title: “🎨 Design Tokens Update”
body: “Figmaの最新のVariables変更をコードベースに反映しました。”
branch: “chore/design-tokens-update”
—
4. 現場で差がつく！神ショートカットと必須プラグイン
テックリードとして、チームの作業効率を最大化するためのツールセットを叩き込め。
Figma 隠れたキーボードショートカット
- `Shift + V`: Variables（変数）パネルを即座に開く。
- `Shift + D`: Dev Modeへの切り替え。開発者はここが主戦場だ。
- `Cmd + /` → “Apply Variable”: 選択した要素に検索して変数を即適用。マウス操作は悪だ。
絶対に入れるべき神プラグイン
1. Tokens Studio for Figma: 言わずと知れた業界標準。GitHub/GitLab連携に必須。
2. Variables Pro: 複数のVariablesを一括編集、一括エクスポートする際の救世主。
3. Style Dictionary Exporter: 設定ファイルを自前で書く前のプロトタイプ確認に最適。
—
5. チーム開発での運用ルール（命名規則と設定）
ツールが優れていても、ルールがなければカオスと化す。以下の設定をチームの「憲法」にせよ。
命名規則：Kebab-caseの徹底
FigmaのVariables名にはスペースを使わず、必ず `kebab-case` （例: `brand-primary-main`）を使用する。Style Dictionaryで各言語の定数（camelCaseやSNAKE_CASE）に変換する際、最もトラブルが少ない。
モード（Modes）の活用
「Light Mode / Dark Mode」だけでなく、「Mobile / Desktop」の数値をVariablesのModeで管理せよ。
- `spacing-page-padding`: Mobileでは `16px`、Desktopでは `32px`。
これだけで、コード側のメディアクエリを激減させることができる。
—
結びに代えて：エンジニアよ、キャンバスへ向かえ
Component 4.0の世界では、デザインとエンジニアリングの境界線は消失する。FigmaのVariablesを「ただのデータ構造」として捉え、Style Dictionaryを「コンパイラ」として扱う。この視点を持つエンジニアこそが、次世代のUI開発をリードする。
今すぐリポジトリに `tokens/` ディレクトリを作り、Style Dictionaryをインストールしよう。そこが、あなたのプロダクトの「唯一の真実」が生まれる場所になるはずだ。