見出し画像

デザイントークンを『デザインの決定を開発チーム全体に伝えるための「方法論」』と定義した

サイボウズのkintone Designチームでkintone Design SystemチームのリーダーをしているAmi(@__amishiratori)です。

私たちkintone Design Systemチームでは、デザイントークンを『デザインの決定を開発チーム全体に伝えるための「方法論」』と定義しました。

kintone Design Systemの構築を始めて2年以上が経ちましたが、
デザインシステムやデザイントークンに馴染みのない人も開発チームにはまだいます。
開発チーム全員が共通した認識を持って効果的にデザイントークンを活かして開発ができる様に定義し説明するドキュメントを作成しました。

この記事ではその内容をご紹介します。


用語の定義

  • トークン

    • 色やサイズなどの値と名前の組です。

  • Global Tokens

    • トークンのうち、特定の文脈によらないトークンです。
      (例:gray-400、font-size-10)

  • Semantic Tokens

    • トークンのうち、kintoneのどこに利用すべきか名前で表されているトークンです。
      (例:color-formControl-border、color-table-background)

  • デザイントークン

    • デザインの決定を、トークンを通じて開発チーム全体に伝えるための「方法論」です。

デザイントークンとは「方法論」

デザイントークンとは、デザインの決定を開発チーム全体に伝えるための「方法論」です。
以下の工程によって、デザインについて整理した結果がプロトタイプや実装に伝えられていきます。この工程全体をデザイントークンと呼びます。

工程の図
  1. デザインを整理する
    どこをどんな色やサイズにするか整理します。
    たとえば「ボタンやフォームコントロールなどのUI全般のボーダー色には、この色を使う」「表の背景色には、この色を使う」のように、特定の概念ごとに使うべき値を決めます。

  2. トークンを作る
    デザインについて整理したことをもとに、名前と値の組(トークン)を作ります。
    トークンの名前は整理した概念を表します。たとえば「color-formControl-border」「color-button-border」のように、どこに使う値なのかが明確にわかる名前にします。
    kintone Design Systemでは、FigmaのTokens Studioプラグインでトークンを作ります。

  3. プロト・実装に適用する
    トークンをプロトタイプや実装に適用します。
    Tokens Studioを利用すると、Figmaと実装に対して同じトークンを適用できます。

  4. 再びデザインを整理する
    トークンを適用したFigmaや実装をもとに、再びデザインを整理します。
    たとえば「やっぱりボタンやフォームコントロールに使う色は別の色がいい」「表の背景色は、より濃い色がいい」といったように、概念ごとに使うべき値を改善していきます。

デザイントークンの目的は、デザインを整理した結果を開発プロセス全体に伝えることです。
デザインを整理せずに、単に同じ色や同じサイズをトークンとしてまとめあげても、あまり意味がありません。

Jina Anneの発言を参考にしました。


トークンには階層がある

トークンはいくつかの階層に分かれます。kintone Design Systemでは、以下の2階層に分かれます。

  • Global Tokens

  • Semantic Tokens

Global Tokensとは、色やサイズなどの値に名前をつけたものです。
たとえば「gray-400」「font-size-10」のように、特定の文脈によらない名前がつきます。

Semantic Tokensとは、どこにどんな値が使われるかを表したものです。
たとえば「color-formControl-border」「color-table-background」のように、どこに使う値なのかが明確にわかる名前がつきます。

Semantic TokensはGlobal Tokensを参照します。
Global Tokensの値が変わればSemantic Tokensの値も変わります。
また、Figmaや実装では、Semantic Tokensを参照します。Global Tokensは参照しません。

"図:#C6C6C6という色がgray-400というGlobal tokenに参照されている。gray-400はcolor-formControl-borderとcolor-button-borderという2つのSemantic tokenに参照されている。color-formControl-borderはInputTextとInputDateに参照されている。color-button-borderはButtonに参照されている。
トークンが階層構造になっている図

Global TokensとSemantic Tokensはデザインの変更範囲に応じて使い分ける

Global TokensとSemantic Tokensの2階層に分かれていることで、デザインが変更しやすくなります。
変更範囲に応じて、変更すべきトークンが変わります。

例:kintone全体の灰色に少し青みを持たせたい
この場合はGlobal Tokensを変更します。
Global Tokensに登録されている灰色を青みがからせることで、kintoneで使われているすべての灰色に青みを持たせることができます。
たとえば、gray-400を青みがからせることで、このGlobal Tokensを参照しているすべての箇所の色が変わります。

図:gray-400の値が#8AA9DCに変更されている。color-formControl-borderとcolor-button-borderも同じ色に変わっている。InputText、InputDate、Buttonのボーダー色も同じ色に変わっている。
Global tokenの値を変えた図

例:フォームコントロールのボーダー色を濃くしたい
この場合はSemantic Tokensを変更します。
具体的にはcolor-formControl-borderが参照するGlobal Tokensを変えることで、フォームコントロールのボーダー色を一度に変更できます。

図:新しいGlobal tokengray-800が追加されている。gray-800は#484848という濃い色を参照している。color-formControl-borderがgray-800を参照するように切り替わっている。それによってInputTextとInputDateのボーダー色が濃い色に変わっている。
Semantic tokenの値を変えた図

Semantic Tokensは一緒に変更したい箇所ごとに用意する

Semantic Tokensは一緒に変更したい箇所ごとに用意します。
たとえばcolor-formControl-borderというSemantic Tokensは、
フォームコントロールのボーダー色を一度に変更したいために、この名前になっています。

一緒に変更したい箇所ごとにSemantic Tokensを用意しないと、デザインを変更しにくくなってしまいます。
color-formControl-borderを別のトークンに置き換えた例を検討してみましょう。

悪い例:color-borderというSemantic Tokensに置き換えた場合
この場合は、フォームコントロールのボーダーだけでなく、他のボーダーもこのSemantic Tokensを参照します。
そのため、フォームコントロールのボーダー色だけを変更することが難しくなってしまいます。

図:color-borderというSemantic tokenが、InputText、InputDate、Buttonで参照されている。「フォームコントロール以外のボーダー色も変更されてしまう」と書かれている。
必要以上にSemantic tokenが共通化されている図

悪い例:color-inputtext-borderとcolor-inputdate-borderに置き換えた場合
この場合は、フォームコントロールであっても、InputTextのボーダー色とInputDateのボーダー色を別のものとして扱います。
そのため、フォームコントロールのボーダー色を統一的に変更できなくなってしまいます。いちいち個別に変更しなくてはなりません。

図:color-inputtext-borderがInputTextで参照され、color-inputdate-borderがInputDateで参照され、color-button-borderがButtonで参照されている。「個別に色を変更しなくてはならない」と書かれている。
必要以上にSemantic tokenが分割されている図

「こことここは一緒に変更されるだろうか?」と常に考えながら、適切な単位でSemantic Tokensをつくることが重要です。

(参考)design tokens and a multi-tiered variable system

デザイントークンを適切に設計するとデザインの変更や拡張に強くなる

以上のように、トークンは適切に設計する必要があります。

  • Global TokensとSemantic Tokensをデザインの変更範囲に応じて使い分ける

  • Semantic Tokensを一緒に変更したい箇所ごとに用意する

トークンを適切に設計していれば、デザインをすばやく変更できます。
デザインを変更したくなったときに、デザインを変更したい箇所に対応するトークンがすぐに見つかるからです。
トークンの値を修正すればすばやくデザインを変更できます。
このため、トークンは適切に設計することのほうが、適切な値を探すことよりも、より重要です。
適切な値を探すことに時間をかけるよりも、適切なトークンを設計することに時間をかけましょう。

また、トークンを適切に設計していれば、デザインの拡張性も高くなります。
デザインが整理されているので、新しい画面やUIであっても、箇所ごとにどのようなトークンを適用すべきかがすでに決まっているからです。
デザイナーだけでなくエンジニアであっても、迷わずにトークンを適用して、新しい画面やUIをすばやく実装できます。
また、プロト(Figma)と実装で同じトークンを利用するため、実装したあとのデザイン修正の手間も省けます。

いいなと思ったら応援しよう!