デザイントークン | 1人design system advent calender 4日目

4日目はデザイントークンについて見ていく。

Design Tokens（デザイントークン）とは

Design Tokens are an abstraction for everything impacting the visual design of an app/platform.
— Sönke Rohde (@soenkerohde) 2016年6月24日

デザイントークンとは、プロダクトのデザインに関するすべてのエンティティのこと。マージン、テキストカラー、フォントサイズ、フォントファミリー、アニメーションの間隔、背景色、ボーダーカラーなどのデザインの情報をもつすべてのものがデザイントークンになる。デザインシステムにおけるデザイントークンは、同じデザインシステムの上に成り立ってるプロダクト、ウェブやiOS、Androidなどのネイティヴアプリ、Sketchなどのデザインツールに至るまで、デザインのエンティティを共有して管理していくものであって、デザイン上の Single Source of Truthとなる。

Single Source of Truth

Single Source of Truth （単一の情報源）とは、構造化された情報モデルとその関連スキーマのことで、すべてのデータ要素を必ず含むもの。ここからデータを取得すれば必ず信頼できるとみなすことができる情報モデルなので、CSSで色を指定するさいにもiOSアプリで色を指定する際にもデザインで決められた色を選択、確認することが容易かつ信用できるものになる。

ウェブだけでネイティヴアプリを持たないプロダクトであっても、単一の情報源の情報モデルを持つことは大いにメリットがある。たとえばfont-sizeがいろんな箇所でハードコーディングされている状態であったりすると、新たにUIパーツを追加する際に適切なfont-sizeを判断するのが難しくなったり、同じようなUIなのに微妙にbackground-colorの指定が違うものが複数存在して、一貫性のないUIになっていたというようなことはどこのプロダクトのCSSにも起こりえることだと思う。

CSSだと最近ではSassの変数であったり、Custom propertiesでマージンやフォントサイズなどの値を管理することが多いだろうけど、ハードコーディングされた値をすべて排除することで、一貫性があり拡張性に優れたデザインシステムにつながっていくはず。

ツール

では、Single Source of Truthをどうやって作って、それぞれの環境に提供してくか。LIGHTNING DESIGN SYSTEMを開発しているSalesforceは、デザイントークンを生成するためのツールとしてsalesforce-ux/theo: Theo is a an abstraction for transforming and formatting Design TokensをOSSとして公開している。これを利用すると単一の情報源としてのymlを中央において、それぞれのプラットフォームに合わせたデザイントークンのファイルを生成することができる。

たとえば、適当にtoken.ymlを用意して

props:
  button_background:
    value: '#0070d2'
global:
  type: color
  category: buttons

ウェブとiOSアプリでのデザイントークンを作りたい場合、以下のコマンドを実行するとtheoがそれぞれの環境に合わせたデザイントークンのファイルを生成してくれる。

❯ theo token.yml --transform web ios --format scss,ios.json --dest ./tokens

上記のコマンドの結果、iOS用にtoken.ios.jsonが作られ、

❯ cat tokens/token.ios.json
{
  "properties": [
    {
      "type": "color",
      "category": "buttons",
      "value": "rgb(0, 112, 210)",
      "name": "buttonBackground"
    }
  ]
}

ウェブ用にtokens/token.scssが作られる。

❯ cat tokens/token.scss

$button-background: rgb(0, 112, 210);

このように常にtoken.ymlを唯一の信頼できる情報源として、theo(または、それに類似するデザイントークンのファイルを各プラットフォームに提供できるツール)などを用いることで、一貫性のあるUIの実現にデザイントークンが大いに役立つことになると思う。

4日目はデザイントークンを扱った。5日目はデザインシステムの構成要素の中からカラーについて見ていきたい。