ガイド

デザイントークンを、実際のファイルで解説

デザイントークンとは、名前を付けたデザイン上の決定のことです：色、余白、フォントサイズ。一度だけ保存し、デザインツールでもコードでも、あらゆる場所で使います。

トークンが重要な理由

トークンがなければ、ボタンの青はデザインファイルに書かれ、CSS にもう一度書かれ、アプリにもまた書かれます。一度変えようとすると、すべての箇所を探し出さなければなりません。トークンがあれば、color.brand を変えるだけで、それを使っているすべての箇所が追従します。

トークンファイルの中身

W3C Design Tokens Community Group は、各トークンが $value と $type を持つ JSON 形式を定めています。

{
  "color": {
    "brand": { "$value": "#2F5BEA", "$type": "color" },
    "ink":   { "$value": "#121214", "$type": "color" }
  },
  "space": {
    "4": { "$value": "16px", "$type": "dimension" }
  }
}

同じ決定を、ブラウザが使える CSS 変数にするとこうなります：

:root {
  --color-brand: #2F5BEA;
  --color-ink: #121214;
  --space-4: 16px;
}

Kalka でのトークンの使い方

ひとつのフォルダに：どのプロジェクトにも design-system/ フォルダがあり、W3C 形式の tokens.json と、その隣に tokens.css が入っています。
キャンバス上で使う：デザインパネルで色や余白を選ぶと、それはトークンを選んでいることになり、CSS ではその変数が使われます。
Git でバージョン管理：ブランドカラーの変更は、ほかのコード変更と同じように、レビューできるひとつのコミットになります。

Kalka は開発中のオープンソースプロジェクトです。上記のフォルダ構成はプロダクト仕様に基づいています。