デザイントークン、デザイナーとデベロッパーの架け橋
デザイントークンについて
デザイントークン、デザインシステムの中に不可欠の部分として周知されています。そんなデザイントークンなんですが、デザインと開発段階でどう使えば良いか迷っている方が少なくないと思いますので、この文章はデザイントークンの概念と使い方について簡単に説明していきます。
そもそも、デザイントークンとは何？
分かりやすく説明すると、デザインを構成する変数です。デザイナーならFigmaやAdobeXDで設定している色やフォントサイズなどの定数、デベロッパーならCSS変数、って理解すれば一番簡単だと思います。
デザインシステムにおけるトークンは、UI要素のスタイル、たとえば、色、タイポグラフィ、パディング、シャドウなどの値を表します。
Adobeより
そう、デザイントークンは変数です。でもそれだけではなく、デザイントークンを構築することによってデザインの一貫性とスケーラビリティを保つことができ、最終的にサービス品質や開発速度の向上にも繋げます。
実際のサービス開発では、UXデザイナーがデザインシステムを構築する段階でデザイントークンを設計して、他のデザイナーがそれらのトークンに沿ってUIデザインを行います。その後、デベロッパーはデザイントークンをCSS変数に変換し、コンポネントや画面開発に使われます。この一連の流れによって、サービスの色、タイポグラフィなどがトークンで管理されているので、トークンを変更するだけで全てのデザインとコードにも反映されるようになります。
デザイントークンのレイヤー
デザイントークンは主に３つのレイヤーに分かれています。
g：グローバル
グローバルレイヤーはデザインシステムと関係なく、単に色などのカテゴリごとにデザイン要素の一覧です。
グローバルトークンは基本レイヤー、カテゴリ、プロパティ３つで構成されます。カテゴリは色やフォントサイズやスペーシングなどを表します。
// global.css
--g-font-unit: 1em;例として、グローバルにフォントサイズの基本単位を設定する場合はレイヤーをg、カテゴリをfont、プロパティをunit、これらを指定して↑の例のトークンを作成するのがよく見かけます。
s：セグメンティック
セグメンティックレイヤーはデザィンシステムのデザイン構成を表すトークンレイヤーです。
セグメンテックトークンの命名方式はグローバルトークンとあまり変わらなく、レイヤー、カテゴリ、プロパティで構成されることが多いです。
// segment.css
--s-color-secondary: var(--g-color-blue);
--s-font-size-s: var(--g-font-unit);例えば、デザインシステムのセカンダリー色を設定したい場合は — s-color-secondaryで命名して、グローバルレイヤーから色を選んで設定します。
c：コンポネント
最後に、コンポネントレイヤーは名前通りにコンポネントごと使われるデザイン要素を表すレイヤーです。
コンポネントレイヤーのトークン命名方式は他のレイヤーより少し複雑です。カテゴリとプロパティとレイヤーは同じで、さらに要素、名前、ステートを指定することが必要になります。
component.css
// component.css
--c-button-primary-color-background-normal: var(--s-color-primary)button.css
// button.css
.button {
background-color: var(--c-button-primary-color-background-normal)
}↑のように、コンポネントレイヤーで定義されたトークンを利用して、ボタンコンポネントの背景色を指定すればセグメンティックのプラマリー色を変えるだけでコンポネント側の色も一括に変えることができます。
スケーリング
シナリオや端末サイズに合わせてトークン値を指定したい場合はスケーリングでトークンを定義します、
スケーリング方法として、服のサイズのようにアルファベット方式（XS, S, M, L, XL, XXL）や数列方式（2,4,8,16,32,64）を採用するのが一般的です。
// segment.css
--s-font-size-xl: calc(4 * var(--g-font-unit));何故デザイントークン？
デザイントークンを使うことにあるメリットは主に４つあります。
・スケーラビリティ
・メンテナンス性
・可読性
・一貫性
スケーラビリティ
デザイントークンでデザイン要素を一元化しているので、必要に応じてトークンを増やしてサービス内の多様化することができます。
メンテナンス性
デザイントークンでデザイン要素を一括管理することによって、デザインとコード上の色などのメンテナンスが素早く行うことができます。
可読性
デザイントークンが系統的にわかりやすく命名されているので、担当デザイナーとデベロッパー以外でも簡単に理解できます。
一貫性
レイヤーでトークンを管理しているので、サービス内の色などのデザイン要素を横断的に管理して、一貫性を保つことができます。
終わりに
デザイントークンは間違いなくこれからのUIUXデザインとフロントエンド開発に非常に重要なポジションを取るでしょう。皆様もぜひご自身のプロダクトデザインに取り入れてみませんか？
もしこの記事について何か感想や意見がありましたら、ぜひ気軽にコメントを残してください！
