デザイントークンとは？デザインシステムに関わる人が知っておきたいメリットや使い方まで

はじめに

デザイントークンとは、デザインシステムにおいて最小単位のスタイルを定義するものです。

その目的としては「デザイナーとエンジニアの共有言語として、一貫性がありつつも柔軟なデザインを可能」とすることで、デザインシステムを今後しっかりやっていきたいという方が抑えておくべき概念です。

今回は、そんなデザイントークンとは何か、そのメリット、使い方についてご紹介します。

デザイントークンとは？

デザイントークンの定義

デザイントークンとはデザインシステムにおいて信頼できる最も基礎的な情報 (Single source of truth)です。
当時Salesforceでデザインシステムを担当していたJina Aneeが提唱したコンセプトです。

デザイントークンの中には最小単位のスタイルの情報が保存されます。
プロダクトの中でよく使われるデザインの要素をパッケージ化し、複数のプラットフォームに横断的に読み込んで使用します。

デザイントークンは色、余白、行間、Elevation(高さ)、フォント、フォントサイズ、シャドウ、アニメーション時間など複数のコンポーネントやテキスト要素にまたいで使われる情報を保存します。

デザイントークンの具体例

具体的な例を使って、デザイントークンとはどういったものなのか見ていきます。

あなたのプロダクトのブランドのプライマリーカラーが#4A90E2だとします。
そうしたら、デザイントークンをこのように設定することができます。

color.primary = #4A90E2

この場合、デザイントークンの名前はcolor.primaryでそのトークンに格納される値が#4A90E2 となります。

普通の変数とデザイントークンの違いは？

color.primary = #4A90E2

これだけを見ると、フロントエンドでスタイルを書くときに、色を設定するときの変数のように見えます。

ですが、デザイントークンは普通の変数よりも抽象度が高いもので、プラットフォームに依存しない情報です。抽象度の高いレイヤーで命名規則に則ってデザイントークンを設定することにより、プラットフォームやフレームワークをまたいだデザインの基礎となる部分の共有言語を作ることができます。

デザイントークンを使うメリット

デザインシステムは生きているシステムです。

毎日修正が加えられたり、違うコンポーネントなどが追加されたりしています。

その中でデザイントークンとはそのデザインシステムを管理するsubatomic levelのデザイン要素を決めることができます。

Subatomic levelのデザイン要素を定義することにより、デザインシステムに変更を加えるのが簡単になります。

例えば、みなさんのデザインシステムの中にこのようなボタンがあるとします。
この中からデザイントークンになるものを抽出していきます。

実際にデザイントークンを使っている場合とそうでない場合とで、修正に必要なためのステップを比べてみましょう。

上記のステップの中で、それぞれのプロダクトごとの変更漏れなども出てくるため、１つのカラーの変更だけでもかなり大変になってしまいます。

では、デザイントークンを使用した場合はどうなるでしょうか？

デザイントークンがない時よりも、シンプルなためミスも少なくすることができます。

デザイントークンを使うための基本ステップ

ここからはデザインシステムを実際に運用しているけど、デザイントークンをどうやって導入したら良いかわからない方のために、デザイントークンを既存のデザインシステムに組み込むための基本ステップをご紹介していきます。

ステップ1: デザイントークンとしてどういう情報を格納するかを決める

まず最初のステップでは、デザイントークンにどういう情報を保存するかを決めていきます。
具体的には、あなたのデザインシステムにおいてどういったトークンが必要なのかを考えて行きます。

デザイントークンは下記のいずれかを 満たしているものが該当します:

例えば下記のようなボタンがあなたのデザインシステム内にあるとしましょう。

このコンポーネントからは以下のデザイントークンが抽出できます。

- 色: #4A90E2, #FFFFFF
- レイアウト: 余白、角丸の設定
- タイポグラフィ: フォント、フォントサイズなど

これらの設定が他のコンポーネントやレイアウトでも使われているものであれば、そちらをデザイントークンとして設定するのが良いでしょう。

ステップ2: それぞれの情報に名前をつける

次にデザイントークンとして保存したい情報に名前をつけて行きます。

ボタンの背景色はプライマリーカラーの透明度 (100%)なので

color.primary.100

という名前をつけるのが良いかもしれません。

また、角丸はsoft, medium, hardと３つのレベルを設け、

radius.hard

という名前にしても良いかもしれません。

このようにあなたのデザインシステムで使われている色や余白、タイポグラフィの設定などsubatomic levelのデザイン要素を分解しそれぞれに名前をつけていきます。

ステップ3: それぞれの情報に名前をつける

ステップ２が終わると、あなたのデザイントークンのコアトークンの定義が終わっており、下記のような形になるはずです。

ここまでできればデザイントークン自体は出来上がっており、先程のボタンの再現もデザイントークンを使って作成することができます。

ステップ4: コアトークンにそれぞれエイリアストークンを作成する

ステップ３まででもデザイントークン自体はできているのですが、デザイントークンの中でもいわゆる「コアトークン」と呼ばれているものが定義できている状態です。

この後、さらにデザイントークンを生かすために別の種類のデザイントークン、「エイリアストークン」というものを作成していきます。

「コアトークン」では色味や余白の種類などは定義できましたが、それぞれがどのように デザインの中で使われているかの定義はできていません。

「エイリアストークン」は下記のように設定することができます。

#4A90E2  (格納する情報)
↓
color.primary.100 (コアトークン)
↓
color.cta.default (エイリアストークン)

このように、 エイリアストークンではコアトークンがどんな状況で使われるのかを定義することができます。

上記のエイリアストークンではCTA (CTAボタン)のデフォルトカラーとして使用するということが定義されています。

エイリアストークンを設定することにより、デザインシステムはさらに管理がしやすくなります。

エイリアストークンを設定するとどう違うのか

例えばCTAの背景色のデフォルトを#4A90E2から#D32B75に変える場合、エイリアストークンがないと以下２つの方法で変更を加えることができます。

1. コアトークンの中の色の値を変える
2. １つ１つのコアトークンを変更後のコアトークンにマニュアルで変更する

1の方法を使用すると、他にも同じ色を使っているところで影響が出てしまうため、2.の方法でやるしかありませんが、それだと結局１つ１つマニュアルで変更する作業が発生してしまいます。

このようなシチュエーションで、エイリアストークンを使用することにより変更作業を短縮することができます。

CTAの背景色を変える場合:

#4A90E2  (格納する情報)
↓
color.primary.100 (コアトークン)
↓
color.cta.default (エイリアストークン)

となっていましたが、color.cta.defaultを別の色に変更する場合は、color.cta.defaultをcolor.accent.100など変更後の色に紐づけることで、意図するところ以外に影響することなく、色を変更することができます。

このほかにもエイリアストークンのさらに上位概念、コンポーネントトークンなどを作ることもできますが、まずはシンプルにスタートするためにコアトークンから定義することをお勧めします。

まとめ

以上本日はデザイントークンとは何か、そのメリット、使い方についてご紹介しました！
デザインシステムをこれから作成する、運営中の方の参考になる部分があればぜひご活用いただければと思います。