セマンティックトークンなしでデザインシステムを運用しているなら、スケーラビリティと効率化に欠かせない重要なツールを活用できていません。

概要

セマンティックトークンを使うと、デザイン上の判断を生の値ではなく、用途によって定義する、構造化された柔軟なシステムを構築できます。ボタンやテキストに固定のカラーコードを割り当てる代わりに、primary-button-bgやwarning-textのようなトークンを使うのです。

つまり、プライマリボタンの背景色はblue/500ではなく、blue/500の値が紐づいたprimary-button-bgになります（そこにはHEXカラーコード#5A8DD7も適用されています）。

視覚的な例で試してみましょう。ただし、実際に動かしてみるまで、これがどれほど便利なのかを理解するのは難しいかもしれません。

通常、要素に変数を適用する場合は次のようになります。

では、component-2のストロークを#0D0D0Dに変更したいとします。その場合は、次のように変更する必要があります。

大したことではないように見えますが、このシステムを拡張していくと、どのHEX値をどのコンポーネントや要素に適用すべきなのか、すぐに把握しづらくなります。

そこで必要になるのが、各要素にどの変数を適用すべきかを明確にするためのセマンティックトークンです。

これなら更新も簡単です。トークンを一度変更するだけで、すべての箇所に反映されます。実際の手順を見てみましょう。

理由

スケーラビリティ

デザインシステムが成長すると、複数のコンポーネントにまたがるスタイルを手作業で更新するのは、現実的ではなくなります。セマンティックトークンを使えば、1か所で変更するだけで、システム全体に一貫して反映できます。

たとえば、プライマリカラーを変更したいものの、page-titleコンポーネントだけに適用したいとします。セマンティックトークンを正しく適用していれば、コンポーネント自体を変更する必要はありません。Variablesウィンドウで、関連付けられたトークンを変更するだけです。

あるいは、#black/600はデザインシステムの背景色として適切ではないと気づくこともあるでしょう。その場合は、Variablesでsurface-altを別のプリミティブトークンに置き換えるだけです。

一貫性と保守性

特定の値ではなく機能に焦点を当てることで、セマンティックトークンはプロダクト全体の見た目をよりまとまりのある、一貫したものに保ちます。どの値を使うべきか推測したり覚えておいたりする必要はもうありません。適切な名前のセマンティックトークンを選ぶだけです。

メインのボーダーにどの色を使うべきか覚えていますか？簡単です。stroke-primaryです。

テーマ設定とカスタマイズ

ダークモードの導入、ブランドに合わせたカスタマイズ、異なるスタイルのA/Bテストなど、セマンティックトークンを使えば作業を効率化できます。色の生の値を一つひとつ変更する代わりに、より上位のレベルでトークンを差し替えられるからです。

将来にわたって使えるデザインシステム

デザインと実装の間に明確な抽象化レイヤーを設けることで、既存のデザインを壊さずに、時間とともにシステムを発展させやすくなります。

会社の新しいブランドに合わせて、配色を一新する必要が出てきましたか？プリミティブの値を変更するだけです。

方法

コアデザイントークンを定義する

まずは、色、タイポグラフィ、スペーシングなど、主要なデザインプロパティの基盤となるトークンを作成します。

私は通常、こうした生の値をprimitivesという別のコレクションに作成します。

ちょっとしたコツ：Tailwind CSS Color Generatorを使うと、プライマリカラーのパレットをすばやく読み込めます。また、Export/Import Variablesプラグインを使えば、ファイル間で設定をインポート、エクスポートできます。

コアトークンをセマンティックトークンにマッピングする

次に、これらの値がUIでどのように使われるのかを表すセマンティックトークンを定義します。これらが抽象化レイヤーとして機能するため、基盤となる構造に影響を与えずにスタイルを更新しやすくなります。

セマンティックトークンの設定には時間がかかりますし、進めながら方法を見直す必要もあるでしょう。ただし、いったん導入すれば、スケーラビリティと保守性が大きく向上します。不整合が減り、開発も加速します。導入する価値は十分にあります。

変数のスコープを制限する

最後に、特定の変数を適用できる要素を制限します。まずprimitivesに移動し、すべての変数を無効にします。

次に、トークンを確認し、それぞれのスコープを定義します。以下の例では、borderのトークンをストローク要素にのみ適用できるよう制限しています。

これで、ストロークに変数を適用しようとすると、適用可能な変数だけが表示されるようになります。正しい変数をとても簡単に選べます。

完全なチュートリアルではありません

デザインシステムにセマンティックトークンを適用する方法をさらに学びたいなら、まずはFigmaのこちらのチュートリアルから始めることをおすすめします。その後は、セマンティックトークンを自分がどう使いたいのかを理解するために、実際にいろいろ試し、デザインシステムへの適用を試みるのが一番です。

セマンティックトークンの設定は、時間がかかるうえに退屈な作業になることもあります。しかし、そのメリットは非常に大きいものです。まだセマンティックトークンを使っていないデザインシステムなら、ぜひ試してみることをおすすめします。

覚えておいてください。大切なのはアウトプットよりもアウトカムです。完璧なドキュメントではなく、チームが実際に必要としているものに焦点を当てましょう。