デザイントークンとは何か、なぜ重要なのか

デザイントークンは、名前を付けて再利用できる値として表現した、デザインシステムにおける最小単位の設計判断です。スタイルシートに#3b82f6を直接記述する代わりに、color-primary-500: #3b82f6を定義し、その名前をどこからでも参照します。名前が意味を持つため、すべての参照箇所を更新しなくても値を変更できます。

トークンはあらゆる視覚的プロパティに及びます。色のトークン（color-primary-500: #3b82f6）、間隔のトークン（spacing-4: 16px）、タイポグラフィのトークン（font-size-lg: 18px、font-weight-bold: 700）、角丸のトークン（radius-md: 8px）、シャドウのトークン、アニメーション時間のトークンなどです。これらを組み合わせることで、完全なビジュアル言語を表現できます。

トークンによって、デザインとエンジニアリングで共有する信頼できる唯一の情報源が作られます。デザイナーはFigmaで値を定義し、エンジニアはコードでそれを利用します。ブランドカラーを変更するときは、1つのトークンの値を更新するだけで、そのトークンを使用するすべてのコンポーネントに自動的に変更が反映されます。何千ものファイルをgrep-and-replaceする必要はありません。

トークンがないと、色や間隔の値がスタイルシート、コンポーネントファイル、ユーティリティクラス全体にハードコードされます。あるファイルでは青色が #3b82f6、別のファイルでは rgb(59, 130, 246) や blue-500 として記述されていることがあります。ブランドカラーを変更するには、すべての記述箇所を検索して置き換える必要があり、一部を見落とすリスクが高くなります。

デザイントークンは、複数テーマのシステムを支える基盤です。ダークモードでは、color-background や color-text のようなセマンティックトークンが、現在有効なテーマに応じて異なるプリミティブ値を参照します。変更するのはすべてのコンポーネントではなく、1つのマッピングだけです。ライトテーマとダークテーマはコンポーネントコードを共有し、異なるのはトークンの値だけです。

複数のブランドにサービスを提供するSaaSプラットフォームでは、トークンによってコードを重複させずにブランドをカスタマイズできます。ブランドAはプライマリカラーに青を使い、ブランドBは緑を使うとします。異なるのは、それぞれのセマンティックトークンのマッピングだけです。ボタンコンポーネントのコードは同一で、color-action-primary を読み取ると、ブランドごとに異なる色に解決されます。

トークンは階層化して整理します。プリミティブトークンは生の値で、color-blue-500: #3b82f6 のように定義します。セマンティックトークンは意味を表し、color-action-primary: {color-blue-500} のように定義します。コンポーネントトークンは最も具体的で、button-primary-background: {color-action-primary} のように定義します。この階層によって、「何を表すか」と「どこで使うか」を分離できます。

セマンティックトークンは、複数テーマ対応の鍵です。ライトテーマでは color-background: {color-white}、ダークテーマでは color-background: {color-gray-900} とします。コンポーネントは特定の色ではなく、color-background を参照します。テーマを変更するとセマンティックトークンのマッピングが切り替わるため、コンポーネントを変更する必要はありません。

Figma Variables（2023年導入）は、Figma内で利用できるデザイントークンです。デザイナーは、エンジニアがコードで実装するものと同じトークン階層をFigmaで定義します。Tokens Studio for Figmaや公式のFigma Tokensプラグインなどのツールを使うと、Figmaの変数をJSONにエクスポートでき、Style DictionaryでCSS変数やJSオブジェクトにコンパイルできます。

W3C Design Tokens Community Groupは、デザイントークン向けの標準JSON形式を策定しています。目的は相互運用性です。つまり、どのデザインツール（Figma、Sketch）でも、どのビルドツール（Style Dictionary、Theo、Panda CSS）でも利用できるトークンファイルを実現します。この仕様の形式を採用すれば、トークンシステムを将来にわたって利用しやすくなります。

デザイントークンには、誰が新しいトークンを追加できるのか（デザイン、エンジニアリング、または両方）、トークンをどのようにバージョン管理するのか、非推奨のトークンをどのように廃止するのか、トークンの変更を利用するチームにどう伝えるのかといった、ガバナンスに関する判断が必要です。ガバナンスがなければ、トークンシステムと並行して新しいハードコード値が増え、トークンの目的が失われます。

デザイントークンの階層において、セマンティックトークンは何を表しますか？

デザイントークンは、デザインシステムの語彙となる、名前付きの原子的な値（色、間隔、タイポグラフィ）です。デザインとコードの間に、単一の信頼できる情報源を作ります。3層の階層（プリミティブ＝生の値、セマンティック＝意味、コンポーネント＝具体的な用途）によって、複数テーマと複数ブランドに対応できます。Figma VariablesとW3C Design Tokens仕様は、デザインとエンジニアリングの同期を推進しています。トークンのガバナンスによって、システムの一貫性を長期的に保てます。