はじめに
Figma → Webのコード生成は比較的うまくいく。しかし、モバイルアプリ（Compose / SwiftUI）では同じようにはいかない。
色々調べたが、一番納得する理由は FigmaはWeb標準（CSS Flexbox、CSS Variables等）を参考に進化してきたため、Webフレームワークとの親和性が高い。一方、モバイル向けツールはまだ発展途上であり、生成されるコードは「見た目だけ再現した低品質なもの」になりがち。
では、どうすればよいか？
変換ツールに頼る前に、Figma側の設計を標準化することが鍵となる。本記事では、モバイルアプリ開発を前提としたFigma Variables（変数）の設計方法を解説する。
なぜVariables（変数）なのか
Figmaにはカラースタイルやテキストスタイルという機能があるが、これらは過去のアプローチだ。2023年にリリースされた**Variables（変数）**が、現代的なデザインシステム構築の正解である。
| 機能 | リリース | 用途 | 現在の位置づけ |
|---|---|---|---|
| カラースタイル | 従来機能 | 色の定義 | レガシー |
| テキストスタイル | 従来機能 | フォント設定 | レガシー |
| Variables | 2023年 | 全てのデザイントークン | 推奨 |
Variablesは、カラースタイルやテキストスタイルの上位互換であり、より柔軟で構造化されたデザインシステムを構築できる。
ちなみに、英語圏では Variables のことを一般的に「Design Tokens」と呼ぶ。日本語では「トークン」という用語はまだ浸透しておらず、「デザイン変数」や「デザイントークン」など表記が揺れている状況だ。本記事では Figma の公式用語に合わせて「Variables」と表記する。
なぜ正しく設計すべきか
Variablesを正しく設計することで、具体的なメリットが得られる。
開発ワークフローの改善
| 従来のアプローチ | Variablesアプローチ |
|---|---|
| スタイルガイドPDFを見ながら手動実装 | JSONエクスポートから自動生成 |
| 「この色は#00356Eです」 |
color/primaryとして参照 |
| デザイン変更のたびに再確認 | 変数更新で自動反映 |
技術的なメリット
- Light/Darkテーマ対応が標準装備 — モード切り替えで自動的に値が変わる
-
意味のある階層的な命名が可能 —
color/primary、spacing/mdなど - JSON形式でエクスポート可能 — コード生成の自動化に最適
-
ネイティブ開発との親和性 — XcodeのColor AssetsやAndroidの
colors.xmlと概念が近い
チーム全体への効果
| 立場 | メリット |
|---|---|
| デザイナー | 一貫性のあるデザインシステムの構築 |
| エンジニア | コード生成の精度向上と自動化 |
| チーム | デザインと実装のズレを最小化 |
美しいプレゼン資料はクライアント向けには必要だが、エンジニアが本当に必要とするのは構造化データである。Variablesはまさにそれを提供する。
設計原則：2種類のコレクションに分ける
Variablesは目的に応じて2つのタイプに分類する。
タイプ1: テーマ非依存（シングルモード）
Light/Darkで値が変わらないもの。モードは1つで十分。
| コレクション | 内容 |
|---|---|
| Typography | フォントサイズ、行高、ウェイト |
| Tokens | Spacing、Corner radius、Opacity、Icon size等 |
Typographyは項目が多くなるため専用コレクションにする。それ以外は「Tokens」としてまとめるのが実用的。
タイプ2: テーマ依存（マルチモード）
Light/Darkで異なる値を持つもの。複数モード必須。
| コレクション | 内容 |
|---|---|
| Colors | 背景色、文字色、アクセントカラー等 |
命名規則：機能別にグループ化する
✅ 正しい構造
typography/heading-1/size
typography/heading-1/line-height
typography/heading-1/font-family
typography/heading-1/weight
理由:
- heading-1の全プロパティが一箇所に集約される
- コード生成時、1つの
TextStyleオブジェクトに直接対応する - 検索・メンテナンスが容易
❌ 避けるべき構造
typography/size/heading-1
typography/line-height/heading-1
typography/font-family/heading-1
typography/weight/heading-1
一見「整理されている」ように見えるが、heading-1の情報が4箇所に分散し、実務では使いにくい。最初から機能別で設計すべき。
実例：私のVariables設計
以下は実際に作成したVariablesの構成である。
Typography コレクション（テーマ非依存）
{
"typography": {
"heading-1": {
"size": 32, "line-height": 40, "font-family": "Roboto", "weight": 700
},
"heading-2": {
"size": 24, "line-height": 32, "font-family": "Roboto", "weight": 700
},
"heading-3": {
"size": 20, "line-height": 28, "font-family": "Roboto", "weight": 600
},
"body-large": {
"size": 16, "line-height": 24, "font-family": "Roboto", "weight": 400
},
"body-regular": {
"size": 16, "line-height": 24, "font-family": "Roboto", "weight": 400
},
"body-small": {
"size": 12, "line-height": 16, "font-family": "Roboto", "weight": 400
},
"caption": {
"size": 10, "line-height": 14, "font-family": "Roboto", "weight": 400
},
"button": {
"size": 14, "line-height": 20, "font-family": "Roboto", "weight": 500
}
}
}
Tokens コレクション（テーマ非依存）
{
"spacing": {
"none": 0,
"xxs": 2,
"xs": 4,
"sm": 8,
"md": 12,
"lg": 16,
"xl": 24,
"xxl": 32,
"xxxl": 48
}
}
Colors コレクション（テーマ依存）
| 変数名 | Light Mode | Dark Mode |
|---|---|---|
color/primary |
#00356E | #4A90E2 |
color/primary-light |
#0066CC | #66A3FF |
color/secondary |
#E60012 | #FF4444 |
color/background |
#FFFFFF | #121212 |
color/surface |
#F7F7F7 | #1E1E1E |
color/surface-dark |
#E5E5E5 | #2C2C2C |
color/error |
#D32F2F | #FF5252 |
color/success |
#388E3C | #66BB6A |
color/warning |
#F57C00 | #FFA726 |
color/on-primary |
#FFFFFF | #000000 |
color/on-background |
#1A1A1A | #E5E5E5 |
color/on-surface-secondary |
#757575 | #A0A0A0 |
まとめ
| ポイント | 内容 |
|---|---|
| Variables を使う | カラースタイル・テキストスタイルは補助的に |
| 2種類に分ける | テーマ依存（Colors）と非依存（Typography, Tokens） |
| 機能別に命名 |
typography/heading-1/size 形式 |
| JSONでエクスポート | コード生成の自動化を前提に |
次のステップ
- ✅ Variables設定完了（Colors, Typography, Spacing）
- 🔜 コンポーネント作成（Button, TextField, Switch等）
- 🔜 コンポーネントにVariablesを適用
- 🔜 画面を作成
- 🔜 Figma MCPでCompose Multiplatform用コード生成
- 🔜 実装・検証
なお、VariablesのエクスポートについてはAI駆動開発にやさしいFigmaの研究：Variablesエクスポートの編で詳しく解説している。