はじめに
Figma → Webのコード生成は比較的うまくいく。しかし、モバイルアプリ（Compose / SwiftUI）では同じようにはいかない。
色々調べたが、一番納得する理由は：FigmaはWeb標準（CSS Flexbox、CSS Variables等）を参考に進化してきたため、Webフレームワークとの親和性が高い。一方、モバイル向けツールはまだ発展途上であり、生成されるコードは「見た目だけ再現した低品質なもの」になりがち。
では、どうすればよいか？
変換ツールに頼る前に、Figma側の設計を標準化することが鍵となる。Figmaには複数のシステムが共存しており、間違ったツールを使うとコード生成の精度が下がる。本記事では、モバイルアプリ開発を前提に「何をVariablesで管理し、何をText Stylesで管理すべきか」を整理する。
Variables と Text Styles：それぞれの役割
FigmaにはVariables（変数）とStylesという2つの仕組みがある。2023年にVariablesがリリースされたことで混乱が生じやすくなったが、これらは競合するものではなく補完関係にある。
| 機能 | リリース | 最適な用途 |
|---|---|---|
| Styles | 従来機能 | タイポグラフィの原子的セット定義 |
| Variables | 2023年 | 色・スペーシング・サイズ等のプリミティブ値 |
英語圏では Variables のことを一般的に「Design Tokens」と呼ぶ。本記事では Figma の公式用語に合わせて「Variables」と表記する。
Variablesが向いているもの
色やスペーシングのような単一のプリミティブ値。Light/Darkテーマの切り替えも Variables のモード機能で自然に表現できる。
color/primary → #00356E (Light) / #4A90E2 (Dark)
spacing/md → 12
radius/card → 8
Text Stylesが向いているもの
タイポグラフィは複数プロパティの組み合わせであるため、Variables ではなく Text Styles で管理するのが正しい。
たとえば「Heading 1」は以下をセットで定義する：
- フォントファミリー
- フォントサイズ
- フォントウェイト
- 行高（Line Height）
Variables 方式では、これら4つを個別に割り当てる必要があり、誤った組み合わせが生まれやすい。ブランドガイドラインで定義されていないスタイルが意図せず発生するリスクもある。Text Styles であれば、デザイナーは「Heading 1」を選ぶだけでよい。
まとめると：
| 対象 | 使うべき機能 | 理由 |
|---|---|---|
| 色 | Variables | プリミティブ値、テーマ切り替えが必要 |
| スペーシング・サイズ・角丸 | Variables | プリミティブ値 |
| タイポグラフィ | Text Styles | 複数プロパティをセットで管理すべき |
なぜ正しく設計すべきか
デザイナーへのメリット：変更コストが激減する
Variables と Text Styles を使えば、一箇所を変えるだけで全体に反映される。ブランドカラーの変更も color/primary を更新するだけ。変更コストが下がることで、試行錯誤の自由度が上がる。
技術的なメリット
- Light/Darkテーマ対応が標準装備 — モード切り替えで自動的に値が変わる
-
意味のある階層的な命名 — 値ではなく意味で参照できるため、実装時の間違いが減る（例：
color/primary、spacing/md） - 機械可読なデータ構造 — JSONエクスポートはワークフローへの組み込みや自動化がしやすい。AI時代においてその価値が際立ち、生成AIによるコード生成の精度も構造化されたデータに依存する
-
モバイルプラットフォームへの親和性 — XcodeのColor AssetsやAndroidの
colors.xmlへの変換が容易になる
美しいプレゼン資料はクライアント向けには必要だが、実装エンジニアが本当に必要とするのは構造化データである。Variables と Styles はまさにそれを提供する。
Variables の設計：2種類のコレクションに分ける
Variables はテーマへの依存有無に応じて2つのコレクションに分ける。
コレクション1：Tokens（テーマ非依存）
Light/Darkで値が変わらないプリミティブ値をまとめる。モードは1つ。
| 対象 | 例 |
|---|---|
| スペーシング |
spacing/sm、spacing/md
|
| 角丸 |
radius/card、radius/button
|
| 不透明度 | opacity/disabled |
| アイコンサイズ |
icon/sm、icon/md
|
コレクション2：Colors（テーマ依存）
Light/Darkで異なる値を持つ色。複数モード必須。
| 変数名 | 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（Tokens・Colors）
機能別にグループ化した階層名をつける。
spacing/sm
spacing/md
color/primary
radius/card
opacity/disabled
JSONエクスポートしAIでコード生成する際、この命名がそのままコード上の変数名や用途のヒントになる。
Text Styles（タイポグラフィ）
タイポグラフィの命名は Text Styles 側で行う。
Heading/Heading 1
Heading/Heading 2
Body/Regular
Body/Bold
Caption/Default
まとめ
| ポイント | 内容 |
|---|---|
| Variables を使う | 色・スペーシング・サイズ・角丸等のプリミティブ値に |
| Text Styles を使う | タイポグラフィに。Variables で代替しない |
| Variablesを2コレクションに分ける | テーマ依存（Colors）とテーマ非依存（Tokens） |
| 機能別に命名 |
color/primary、spacing/md 形式 |
| JSON でエクスポート | コード生成の自動化を前提に |
Variables と Text Styles を正しく使い分けることで、デザインと実装のズレを最小化し、AI駆動のコード生成精度を高めることができる。
