はじめに
Variables と Text Styles の使い分け編 では、何をVariablesで管理し、何をText Stylesで管理すべきかを整理した。今回は、設計したVariablesを実装に活かすためのエクスポート方法を解説する。
Variablesのエクスポート方法
方法はいくつかあるが、それぞれ制限がある。
| 方法 | 結果 |
|---|---|
| Figma MCP | ❌ 選択中のアイテムのみ。全Variables一括取得は不可。デザインシステムの初回実装に不向き。 |
| Figma REST API | ❌ Variables エンドポイントはEnterpriseプランのみ対応。ほとんどの場合は利用できない。 |
| サードパーティプラグイン（Tokens Studio等） | 🔺 JSONエクスポート可能。ただしOrganizationアカウントでは承認が必要な場合あり、利用できない場合がある。 |
| 手動エクスポート（推奨） | 🟢 Figma標準機能。シンプルで確実。手動でJSONファイルを取得する必要がある。 |
手動エクスポートの手順
Variablesパネル右上のメニュー → Export variables
デザインシステムは毎日更新するものではなく、デザイナーからエンジニアへのハンドオフのタイミングで渡せば十分だ。手動エクスポートで十分に運用できる。
エクスポートされるJSONの構造
コレクションごとにJSONファイルが生成される。
色はテーマ別のトークンがあるので
Colors/LightMode.tokens.json
{
"color": {
"primary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0,
0.2078431397676468,
0.4313725531101227
],
"alpha": 1,
"hex": "#00356E"
},
"$extensions": {
"com.figma.variableId": "VariableID:1:56",
"com.figma.scopes": [
"ALL_SCOPES"
],
"com.figma.isOverride": true
}
},
"primary-light": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0,
0.4000000059604645,
0.800000011920929
],
"alpha": 1,
"hex": "#0066CC"
},
"$extensions": {
"com.figma.variableId": "VariableID:1:57",
"com.figma.scopes": [
"ALL_SCOPES"
],
"com.figma.isOverride": true
}
},
...
}
Colors/DarkMode.tokens.json
{
"color": {
"primary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.29019609093666077,
0.5647059082984924,
0.886274516582489
],
"alpha": 1,
"hex": "#4A90E2"
},
"$extensions": {
"com.figma.variableId": "VariableID:1:56",
"com.figma.scopes": [
"ALL_SCOPES"
],
"com.figma.isOverride": true
}
},
"primary-light": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.4000000059604645,
0.6392157077789307,
1
],
"alpha": 1,
"hex": "#66A3FF"
},
"$extensions": {
"com.figma.variableId": "VariableID:1:57",
"com.figma.scopes": [
"ALL_SCOPES"
],
"com.figma.isOverride": true
}
},
...
}
Tokens/Mode 1.tokens.json
{
"spacing": {
"none": {
"$type": "number",
"$value": 0,
"$extensions": {
"com.figma.variableId": "VariableID:8:36",
"com.figma.scopes": [
"ALL_SCOPES"
],
"com.figma.isOverride": true
}
},
"xxs": {
"$type": "number",
"$value": 2,
"$extensions": {
"com.figma.variableId": "VariableID:8:37",
"com.figma.scopes": [
"ALL_SCOPES"
],
"com.figma.isOverride": true
}
},
"xs": {
"$type": "number",
"$value": 4,
"$extensions": {
"com.figma.variableId": "VariableID:8:38",
"com.figma.scopes": [
"ALL_SCOPES"
],
"com.figma.isOverride": true
}
},
...
}
$extensions に含まれる variableId は、後のコード生成でFigmaとコードの対応を追跡するために使える。
次のステップ
エクスポートしたJSONをAIに渡してコードを生成する方法は次の記事で解説する。