エクスポートとコード

トークンは Figma の中だけに置いておく必要はありません。コードベースで実際に使う形式で Web アプリからエクスポートするか(プラグイン不要)、ビルドや AI ツールに最新のトークンをコードとして取得させましょう。

Web からエクスポートする

プロジェクト一覧でプロジェクトカードの ⋯ メニューを開いて エクスポート を選ぶか、プロジェクトの中で左サイドバーのコレクション(またはグリッドの行)を右クリックして このコレクションをエクスポート を選びます。次の項目があるダイアログが開きます:

  • 範囲 — エクスポートするコレクション。すべてのコレクション にチェックを入れるか、個別に選びます。コレクションから開いた場合は、そのコレクションにチェックが入った状態で始まります。
  • 形式 — 下の6形式から1つ。
  • 参照を値に解決 — {Primitive/blue/500} のようなエイリアスを最終値に置き換えます。プラットフォームのコード形式では常に解決されるため、このチェックはオンで固定されます。
エクスポートダイアログ — 形式のドロップダウンを開くと DTCG・JSON・CSV・CSS・SwiftUI・Jetpack Compose が並ぶ
エクスポートダイアログ — 形式のドロップダウンを開くと DTCG・JSON・CSV・CSS・SwiftUI・Jetpack Compose が並ぶ
形式出力
DTCG(.tokens.json)W3C のデザイントークン・コミュニティグループ(DTCG)の形式
JSON変数そのまま、トークンごとに1エントリ
CSVスプレッドシート — 変数ごとに1行、モードごとに1列
CSSカスタムプロパティ — 既定モードは :root、ほかのモードは [data-theme="…"]
SwiftUIコレクションごとに1つの型、モードごとに1つの static インスタンス
Jetpack ComposeKotlin — コレクションごとに1つのクラス、モードごとに1つの値

そのまま貼り付けられるプラットフォームのコード

CSS・SwiftUI・Jetpack Compose を選ぶと、アプリにそのまま入れられるコードが得られます。変換はサーバーで行われ、決定的です — 同じトークンからは常に同じバイト列が出るので、差分がきれいでキャッシュも効きます。light と dark モードを持つコレクションは次のようになります:

/* CSS custom properties */
:root {
  --colors-button-background: #18181b;
  --colors-radius-md: 8px;
}
[data-theme="dark"] {
  --colors-button-background: #fafafa;
}
// SwiftUI — one instance per mode
struct ColorsTokens {
  let buttonBackground: Color
  let radiusMd: CGFloat
  static let light = ColorsTokens(buttonBackground: Color(vjHex: 0x18181B), radiusMd: 8)
  static let dark  = ColorsTokens(buttonBackground: Color(vjHex: 0xFAFAFA), radiusMd: 8)
}
// Jetpack Compose (Kotlin)
class ColorsTokens(val buttonBackground: Color, val radiusMd: Dp)
val ColorsTokensLight = ColorsTokens(buttonBackground = Color(0xFF18181B), radiusMd = 8.dp)
val ColorsTokensDark  = ColorsTokens(buttonBackground = Color(0xFFFAFAFA), radiusMd = 8.dp)

参照は常に最終値に解決されます。解決できないものはコメントとして残し、値をでっち上げることはありません。

トークンをインポートする

プロジェクトカードの ⋯ メニューには インポート もあります。JSON または DTCG ファイルをドロップすると、何かを作成する前にプレビュー(コレクション・変数・モードの数と警告)が表示されます。確定すると 新しいコレクション として追加されます(カラーは柔軟に解釈されます: 3桁/6桁の16進数、rgb()、hsl() のいずれも可)。この変更は履歴に「インポート」として記録されます。

タイポグラフィやシャドウのような複合トークン、px 以外の単位の寸法、読み取れない色、型に合わない値など、表現できない値は推測せずにスキップします。スキップした数と名前はプレビューに表示されます。同じファイルをもう一度インポートすると、新しいコレクションがもう1つ追加されます。

API と MCP で取得する

CI パイプラインや AI コーディングツールでは、手でエクスポートせずに取得しましょう。同じプラットフォーム形式が REST API の ?format=css|swift|compose で使え、@variablejar/mcp サーバーは get_tokens ツールを提供するので、IDE のエージェントが最新のトークンをコードとして取得できます。プロジェクトの API トークン1つで両方に使えます。