セマンティック デザイン トークン アーキテクチャ: グローバル、セマンティック、およびコンポーネント トークン

3つの層

Material Design では、リファレンス、システム、コンポーネントという 3 つのクラスのトークンについて説明します。多くのチームは、それらをグローバル、セマンティック、コンポーネントと呼んでいます。名前は異なりますが、考え方は同じです。生の値を、その使用方法に関する決定から分離するということです。

• グローバル (参照): システム内のすべての生の値 (blue-600、space-4、font-size-16、spring-gentle など)。
• セマンティック (システム): color.text.primary、color.action.primary、motion.enter など、値の意味。
• コンポーネント: 1 つのコンポーネントがシステムをどのように使用するか (button.background や Dialog.motion.open など)。

セマンティックトークンが重要な理由

ボタンが blue-600 を直接使用している場合、テーマを変更するたびにすべてのコンポーネントを編集することになります。 color.action.primary、ダークモード、ハイコントラスト、または新しいブランドを使用している場合は、color.action.primary が指すもののみが変更されます。マテリアルは、トークンを使用すると、まさにこの方法でハイ コントラスト パレットを適用したり、システム全体のタイプ スケールを変更したりできると述べています。

テーマと複数のブランド

マルチブランド製品またはホワイトラベル製品の場合は、ブランドごとに 1 セットのセマンティック トークンとコンポーネント トークンと 1 つのグローバル パレットを保持します。各テーマは、セマンティック トークンからグローバル値へのマッピングです。 2025 年 10 月にリリースされた W3C デザイン トークン仕様の最初の安定バージョン (2025.10) には、テーマとマルチブランドのサポート、Display P3 や OKLCH などの最新のカラー スペース、エイリアスとコンポーネント レベルの参照が追加されました。

モーショントークンもここに属します

期間、イージングカーブ、スプリングは同じ階層に従います。グローバル トークンは、その剛性と減衰によりバネに優しい可能性があります。セマンティック トークン motion.enter がそれを指します。コンポーネントトークンsheet.motion.openはmotion.enterを指します。モーション トークンを短いフェードに再マップする、モーションを減らしたテーマを追加します。

すべてのプラットフォームにトークンを配布する

トークンを唯一の信頼できる情報源である DTCG JSON としてリポジトリに保存します。 Style Dictionary などのビルド ツールは、それらを CSS 変数、Swift、Kotlin、Flutter、またはその他の形式に変換します。同じフォーマットを読み取るデザイン ツールは同期を保つことができ、AI コーディング ツールは JSON を直接読み取ることができます。

• 真実の情報源: Git の DTCG JSON、コードのようにレビュー
• ビルド: 変更があるたびに各プラットフォームに変換します
• デザインツールの同期: インポートまたはプラグイン、値を手動でコピーすることはありません
• リンティング: コンポーネント内の生の値を禁止します