デザイントークンとは何ですか？

色・フォントサイズ・余白などのデザイン上の値を、プラットフォーム非依存の変数として一元管理する仕組み。デザインシステムの基盤となる技術。

デザイントークンのポイントは？

色・タイポグラフィ・スペーシングなどの値をJSON/YAMLで定義し、CSS・iOS・Androidなど各環境用に変換する。グローバルトークン（原始値）・セマンティックトークン（意味付き）・コンポーネントトークン（用途別）の階層構造が一般的。Style Dictionary、Figma Tokens、W3C Design Tokens Format（標準化中）などのツールやフォーマットがある。ダークモード対応やブランド切り替えを、トークンの値を差し替えるだけで実現できる

【デザイントークン】

デザイントークンとは？

💡 デザインの「設定値」を全プラットフォームで共有する翻訳辞書

📌 このページのポイント

色・タイポグラフィ・スペーシングなどの値をJSON/YAMLで定義し、CSS・iOS・Androidなど各環境用に変換する
グローバルトークン（原始値）・セマンティックトークン（意味付き）・コンポーネントトークン（用途別）の階層構造が一般的
Style Dictionary、Figma Tokens、W3C Design Tokens Format（標準化中）などのツールやフォーマットがある
ダークモード対応やブランド切り替えを、トークンの値を差し替えるだけで実現できる

デザイントークンの階層構造と変換フロー

ひよこ

デザイントークンって、CSSの変数とは違うの？

ペンギン先生

CSS変数はWebだけで使えるものだけど、デザイントークンはプラットフォームに依存しない「設計値の元データ」だよ。JSONなどで定義しておいて、そこからCSS変数、iOSのSwift 定数、AndroidのXML リソースなど各環境用のコードに自動変換するんだ

ひよこ

階層構造ってどういうこと？

ペンギン先生

たとえば「blue-500 =

ひよこ

ダークモード対応にも使えるの？

ペンギン先生

まさにトークンの得意分野だよ。セマンティックトークンの「color-background」をライトモードでは白、ダークモードでは濃いグレーに切り替えるだけでいい。コンポーネント側は「color-background」を参照しているだけだから、モードに関係なく同じコードで動くんだ

ひよこ

どうやって管理するの？

ペンギン先生

Style Dictionaryが定番ツールで、JSONで定義したトークンをCSS・SCSS・JS・iOS・Android用に一括変換してくれるよ。最近はFigma上でトークンを管理してコードと同期するFigma Tokensプラグインも人気だね

ひよこ

W3Cで標準化が進んでいるって聞いたけど？

ペンギン先生

W3C Design Tokens Community Groupが「Design Tokens Format Module」という標準フォーマットを策定中だよ。これが正式に決まれば、FigmaでもSketchでもStyle Dictionaryでも同じフォーマットでトークンをやり取りできるようになる。デザインとコードの橋渡しがさらにスムーズになる未来が近づいているんだね

まとめ：ざっくりこれだけ覚えればOK！

「デザイントークン」って出てきたら「色やサイズの設定値をまとめて管理する仕組み」と思えればだいたいOK！

📖 おまけ：英語の意味

「Design Token」＝デザイン変数

💬 Salesforceが自社デザインシステム「Lightning」の開発中に2014年頃に生み出した概念で、プログラミングの「変数」をデザインの世界に持ち込んだものだよ

← 用語集にもどる

デザイントークン とは？

デザイントークンとは？