デザイントークンとは？

デザイントークンは、プラットフォームに依存しない方法でデザインを表現して、様々なツールで共有できるようにする方法論です。デザイントークンによって、ツール間、チーム間でデザインに関する語彙を共有することができるようになります。

デザイントークンは記述のルールであり、実装はそれぞれのデザイナーや開発者に委ねられています。

例えば
次のように名前と値のペアのひとつひとつがデザイントークンです。

font-size-heading-level-1: 44px;

color-text-primary: #000000;

デザイントークンとしてやりとりできるようにしたもののサンプル

{
  "alert-border-style": {
    "$type": "strokeStyle",
    "$value": {
      "dashArray": ["0.5rem", "0.25rem"],
      "lineCap": "round"
    }
  }
}

何が嬉しいの？

デザイントークンをデザインツールなどで設定し、別のデザインツールやフロントエンド開発ツールに持っていくことで同じデザイントークンを共有することができるようになります。

ツール間でデータを移動させる場合、データのフォーマットに互換性が必要になります。この互換性を定めているのがデザイントークンフォーマットモジュールになります。

デザイントークはW3Cにあるコミュニティでドラフトが作られています。

ドラフトなので注意が必要です

W3C標準というわけではありませんが、参加している企業の顔ぶれを見ると十分に実効性を持ちそうです。

Adobe
Figma
Google Material Design
Sketch
UXPin
など

「The single source of truth」

デザイントークンを語る上で大事なのが次の考え方です。
The single source of truth　信頼できる唯一の情報源

すべてのデータが1か所でのみ作成、あるいは編集されるように、
情報モデルと関連するデータスキーマとを構造化する方法
Wikipediaより

もしも、データが複数箇所で管理されていたら、開発者はどこのデータを見て実装すれば良いのでしょうか。そのようなことにならないようにデータを１か所で管理しようという考えです。また、例え１か所で管理していたとしてもデータフォーマットに互換性がなければツールを限定することになってしまいます。

デザイントークンを構成するもの

タイプ

色
サイズ
間隔

グループ

特定のカテゴリに属するトークンのセットを任意で指定できます。
例として、レイアウトやブランドなどが挙げられています。

エイリアス

サンプル

$color-palette-black: #000000;
$color-text-primary: $color-palette-black;

$color-text-primaryは#000000ということ。

コンポジットデザイントークン

サンプル

{
  "shadow-token": {
    "$type": "shadow",
    "$value": {
      "color": "#00000088",
      "offsetX": "0.5rem",
      "offsetY": "0.5rem",
      "blur": "1.5rem",
      "spread": "0rem"
    }
  }
}

ファイルタイプ

デザイントークンファイルは、JSONファイルで交換することが想定されています。

ツール

Photoshop
Affinity Photo
Paint.net
Illustrator
Inkscape
Adobe XD
UXPin
Sketch
Figma

実際にこれらのツールがデザイントークンに対応しているかは分かりませんが、ドラフトに名前が記載されています。

具体例

W3Cのデザイントークンはあくまでフォーマットの仕様なので、どんなデザイントークンをどんな名前・値で定義するかといった具体的な実装はそれぞれのデザイナーや開発者に委ねられています。

デザイントークンの具体的な実装として、Open Props というものがあります。

Open Props サイト

Open Props のデザイントークン

最後に

最近のデザインツールやフロントエンド開発ツールの進化は目覚ましいものがあります。そんな中デザイントークンというキーワードをよく見かけるようになりました。
デザイントークンを「デザインの要素」といった具合に抽象的な言葉として扱っている場合もありますが、今回紹介したW3Cのドラフトを指すことも増えてきているようです。
今後、各ツールがデザイントークンに対応していけば「The single source of truth」が実現され、デザイナーや開発者が快適な環境でプロダクト開発に取り組んでいけるようになるのかなと思いました。