デザイントークンとは？デザイン上の決定に名前を付ける

デザイントークンとは、ブランドカラーや余白の単位など、単一のデザイン上の決定に対する名前付きで再利用可能な値であり、一度定義してあらゆる場所で使われます。

同じ色や余白の値をコードベース全体にハードコーディングすると、デザインの変更が苦痛で一貫性を欠くものになります。デザイントークンは各決定を中央のソースにある名前付きの値として捉え、それを利用する各プラットフォーム固有のフォーマットを生成します。これによってデザインシステムはweb、モバイル、ドキュメントの間で一貫性を保ち、ビルドのステップがソースのトークンを利用可能なコードに変換します。

トークンが表すもの

トークンは意味のある名前と値を対にします。色、フォントサイズ、余白のステップ、角丸、シャドウなどです。生の値ではなく名前を参照することで、値を一度変更すれば、それが使われているすべての場所が更新されます。

トークンの階層

baseトークンはhexカラーのような生の値を保持します。
semanticトークンはprimaryやdangerのように意味を与えます。
componentトークンはsemanticを特定のUI部品にマッピングします。

1つのソース、多くの出力

トークンは通常JSONのような中立的なフォーマットで定義され、その後CSS custom properties、JavaScriptの定数、ネイティブなフォーマットへと変換されます。1つのソースがすべてのプラットフォームに供給し、それらを同期させます。

チームが採用する理由

トークンによってデザインとエンジニアリングは共通の語彙を共有できます。リブランディングやテーマの変更は、コードを探し回るのではなくトークンの値を編集することになり、一貫性は構造的に強制されます。

CI/CDにおけるデザイントークン

ビルドのステップがトークンのソースファイルをプラットフォームごとの出力に変換するため、ソースが変わるたびにCIがそれらを再生成します。生成された出力をコミットするか、pipelineの中で生成することでトークンの利用者が同期を保ち、ソースと生成されたファイルにdriftがあればチェックがbuildを失敗させることができます。

重要なポイント

デザイントークンは単一のデザイン上の決定に名前を付け、一度定義して再利用できるようにします。
トークンは階層化され（base、semantic、component）、多くのプラットフォームのフォーマットに生成されます。
CIはソースからトークンの出力を再生成し、driftがあればゲートで止めることができます。