デザインコード変数同期 2025 — Figma変数とDesign Token CIで破綻を防ぐ

Figma の変数機能が拡張され、「色」「タイポグラフィ」「レイアウト」変数を複数ブランドで共有するケースが増えました。一方で React や Vue の Design Token パッケージとの同期が遅延し、brand-primary-500 がデザインとコードで異なる数値を指し示す事故も頻発しています。本稿では、デザインコーダーが主導するトークン同期基盤を構築し、Figma とコードの差分を 24 時間以内に解消するための手法を紹介します。

TL;DR

• Figma の公開 REST API と Design Token JSON を同一スキーマで管理し、token-schema.yaml に型を集約する。
• design-sync ブランチ用 GitHub Actions で Figma → JSON → NPM パッケージのビルドを自動化し、差分 Diff を HEX → CSS トークン変換 に渡して人間可読なレビューを行う。
• トークンの破壊的変更は <token>-stability タグで可視化し、Slack の #design-alerts に通知。
• 最終承認前に パレットバランサー と メタデータ監査ダッシュボード でコントラストと参照メタ情報をチェックする。
• 詳細な運用ルールは デザインシステム継続監査 2025 を参考にし、承認フローの責務を RACI で明確化する。

1. スキーマ統合の前提を整える

1.1 トークン命名とバージョン管理

領域	命名規則	バージョン戦略	主担当
色	{brand}.{role}.{tone}	SemVer (例: 2.1.0)	デザインリード
タイポ	{brand}.{type}.{size}.{weight}	変数 ID + Migrations	デザインコーダー
スペーシング	{brand}.spacing.{scale}	Linear History (undo 可能)	フロントエンドリード
モーション	{brand}.motion.{timing}	SemVer + エクスポートタグ	モーションデザイナー

• token-schema.yaml で型と必須フィールドを定義し、Figma API から取得した JSON を検証します。
• 変数の親子関係は mixins フィールドで管理し、差分検知時に派生トークンへの影響がわかるようツリー構造で保持します。
• コード側では @brand/tokens パッケージを monorepo のワークスペースとして公開し、アプリ任意のブランチから即座にインポートできるよう npm dist-tag を活用します。

1.2 Figma → Token JSON パイプライン

1. figma-tokens.ts で Figma の変数コレクションを取得。
2. 取得した JSON に transformers を適用し、px → rem、rgba → hex に変換。
3. token-schema.yaml に基づき ajv で検証、エラーは Slack 通知。
4. 合格したトークンは tokens/{brand}/tokens.json に書き出し、git commit を自動生成。
5. changeset を生成して @brand/tokens を再ビルドし、npm publish --tag canary を実行。

2. レビューを可視化する Diff ダッシュボード

2.1 Diff 表示のデザイン

ビュー	用途	主要メトリクス	参照リンク
変数テーブル	数値差分の一覧	旧値 / 新値 / 差分%	Notion Token DB
色プレビュー	UI 上での体感確認	ΔE2000、WCAG比	Palette Balancer
コード出力	SCSS、JS、JSON	変更ファイル数	GitHub Compare

• design-sync-report.md を Actions Artifacts として添付し、差分概要を Pull Request にコメントします。
• @design ラベルが付与された PR はレビュアーが 24 時間以内にトリアージ。重大な差分は blocking ラベルを付けて自動的に CI を赤にします。
• Palette Balancer API の結果を JSON で保存し、コンポーネントごとのコントラスト履歴を retained-metrics.json に蓄積します。

2.2 人間工学的な承認ステップ

• デザインリードは色・タイポがブランドガイドに遵守しているか確認し、承認コメントを残します。
• フロントエンドリードは Storybook のビジュアルテストが通過しているか、chromatic の差分を確認。
• QA は デザインシステム継続監査 2025 のチェックリストを用い、アクセシビリティ違反がないか二次検証します。

3. リリースチェックとロールバック計画

3.1 チェックリスト

タイミング	チェック項目	自動化	備考
PR作成時	token-schema 検証、Figmaリンク添付	GitHub Actions	失敗時は CI で中断
マージ前	デザイン／開発承認	Linear Approval	48時間以内に応答
デプロイ前	トークン Canary リリース	LaunchDarkly	段階的に 25% → 100%
デプロイ後	影響モニタリング	Grafana Dashboard	コントラスト逸脱 0.5% 未満

• rollback-plan.md に「直前のトークンに戻す手順」「依存アプリでの cache bust 手順」をまとめ、オンコールが 10 分以内に実行できるようにします。
• 重大な差分を検知した場合は、npm dist-tag を previous に戻して即座にトークンを切り戻し、Figma のバージョン履歴を restore します。

3.2 成功の測定指標

• デプロイ後 7 日間、UI バグ報告に含まれる「色」「フォント」「スペーシング」タグの件数を比較し、減少率をトラッキングします。
• Palette Balancer のヒストリーに基づき、WCAG 違反数が月次で 10% 以上改善しているか監視。
• metadata-audit-dashboard の結果からメタデータの欠損が 1% 未満を維持しているか確認。

まとめ

Figma 変数のリリース速度が上がるほど、トークンの同期遅延による事故は増えます。デザインコーダーが API と CI を駆使して差分を自動で検証し、ブランドガイドの逸脱を即座に警告できる体制が、2025 年のデザインシステム運用では必須です。ここで紹介したパイプラインとチェックリストを導入し、Figma とコードの距離を最短で保ちながらユーザー体験を守りましょう。