CSS Custom Properties で design tokens を運用する

同期の単位を「変数名」にする

Figma の Variables 名と CSS の --var-name を完全一致させる。それだけで、デザインと実装の対応関係が「ファイル横断で grep できる」状態になります。

命名規則の例

Figma Variable: color/fg/muted
CSS:           --color-fg-muted

Figma Variable: spacing/4
CSS:           --spacing-4

/ を - に置換するだけ。

同期 GitHub Actions

Figma API → JSON → CSS 変数を自動生成する小さな script を CI に置いて、Figma 側の変更をプルリクエストとして自動発生させる運用が便利です。

アンチパターン

• 「アクセントは Figma で micro-blue って名前なのに、CSS は --color-link」みたいな、ずれた命名
• Figma に色がない、CSS にしかない（その逆も）

まとめ

design tokens の本質は「同じ概念を同じ名前で呼ぶ」こと。これだけで、デザインレビューと実装レビューが同じ語彙でできるようになります。