デザインシステム「TechTrain Terminal.」のデザイントークンを公開しました！

こんにちは！TechBowlの梶川(@kajitack)です。

この度、TechTrainのデザインシステム「TechTrain Terminal.」のデザイントークンを公開しました！

デザイントークンの詳細は、以下のリポジトリでご覧いただけます。
https://github.com/TechBowl-japan/terminal-design-tokens

デザインシステムの構築において、デザイントークンは実装とデザインの橋渡しをする重要な要素です。
この記事では、私たちがどのようにデザイントークンを定義し、実装に活かしているのかを解説します。
デザインシステムを導入したい方や、デザインと実装の一貫性に課題を感じている方に参考になれば幸いです。

デザイントークンとは

デザイントークンとは、デザインシステムを構成する要素のひとつで、UIにおける見た目の各属性値を共通化するためにトークンとして定義したものです。
トークンは、デザインの属性値（例：色、サイズ、フォント）を一意に識別するための名前付き変数です。

例えば、以下のように色の値とそれに対して名前を付けて定義します。

このようにトークンを命名することで、以下のようなメリットがあります：

1. デザインの一貫性維持: 同じ役割を持つ要素には同じトークンが適用され、視覚的な統一感が生まれます
2. 変更管理の効率化: トークン値を一箇所で変更するだけで、それを参照するすべての要素に変更が反映されます
3. クロスプラットフォーム対応: 同じトークン定義から各プラットフォーム向けのコード（CSS、iOS、Android等）を生成できます
4. 設計意図の共有: 命名によって値の使用目的が明確になり、チームでの認識が統一されます

デザイントークンの仕様も標準化が進んでおり、W3CのDesign Tokensコミュニティグループが仕様を策定しています。この仕様に従ってトークンを定義することで、さまざまなツールとの連携が容易になります。

デザイントークンについての説明は、こちらの記事がわかりやすいです。
https://note.com/seyanote/n/n7b327a9cfd72

定義している内容

TechTrain Terminal.のデザイントークンでは、以下のような要素を定義しています。

カラートークン

• プリミティブカラー: 基本となる色（例: techtrain blue.40: #3d3d5c）
• セマンティックカラー: 使用目的に基づいた色（例: background.primary: {primitive color.techtrain blue.90}）

サイズトークン

• 余白: （例: spacing.xs: 4px, spacing.md: 16px）
• 角丸: （例: radius.s: 4px, radius.xl: 16px）
• 文字サイズ: （例: font-size.body.m: 14px）

文字トークン

• 書体: （例: font-family.ui typography: "Zen Kaku Gothic New"）
• 文字の太さ: （例: font-weight.medium: "Medium"）

これらのトークンを階層構造で管理し、基本トークンを意味トークンが参照することで、変更に強い設計を実現しています。

デザイントークンを使用した開発の流れ

1. Figma Variables を活用したトークン定義

デザイントークンは、FigmaのVariables機能を用いて定義しています。FigmaのVariablesは、デザインの一貫性を保つために非常に便利な機能で、色やサイズなどのプロパティを一元管理できます。これにより、デザイナーが定義した値を開発者が正確に利用できるようになります。

具体的な手順としては、まずFigma上で各トークン（色、サイズ、フォントなど）をVariablesとして定義し、それらを適切な階層構造でグループ化します。例えば、色のトークンは「primitive（基本色）」と「semantic（意味的な色）」に分類し、管理しやすい形にしています。

具体的な定義内容は公開しているFigmaで確認できます。
https://www.figma.com/community/file/1472050808130527580

2. トークンをJSON形式に変換

Figma上で定義したVariablesを実装で活用するには、まずJSON形式にエクスポートする必要があります。理想的には自動化された状態が望ましいですが、REST API経由ではEnterpriseプランでのみVariablesへのアクセスが可能です。

そのため、現在はDesign Tokensプラグインを使用して、Variables情報をJSON形式に書き出す手動プロセスを採用しています。このプラグインによりエクスポートされたJSONファイルは、デザイントークンのソースファイルとしてリポジトリに保存します。

現在はVariablesの更新頻度が多くないため、この手動プロセスでも十分に運用できています。

3. Style Dictionaryによるコード生成

JSON形式のデザイントークンを、実際のアプリケーションで使用できる形式に変換するために、Style Dictionaryを使用しています。Style Dictionaryは、デザイントークンをCSS変数、JavaScript定数、ネイティブアプリなど、各プラットフォームに適した形式で出力できるライブラリです。

プラットフォームに合わせて、このように変換の設定を行うことができます。

https://github.com/TechBowl-japan/terminal-design-tokens/blob/main/config.json

利用するプラットフォームが増える場合でも、Style Dictionaryを使用することで、同じJSONファイルから異なる形式のコードを生成できます。
そして、自動生成することで、定義ミスを防ぐことができます。

4. 実装

デザイントークンは横断的に利用できるように、npmパッケージとして公開しています。
https://www.npmjs.com/package/@techtrain/terminal-design-tokens

このnpmパッケージをインストールすることで、デザイントークンを簡単に利用できるようになります。

デザイントークンの具体的な活用例として、ボタンコンポーネントの実装を見てみましょう。

Before（デザイントークン導入前）:

.primary-button {
  background-color: #3d3d5c; /* ハードコードされた色コード */
  color: #fff;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 14px;
}

.secondary-button {
  background-color: transparent;
  color: #3d3d5c; /* 同じ値を別の場所でも使用 */
  border: 1px solid #3d3d5c;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 14px;
}

After（デザイントークン導入後）:

.primary-button {
  background-color: var(--color-theme-primary);
  color: var(--color-text-on-fill);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-s);
  font-size: var(--font-size-body-m);
}

.secondary-button {
  background-color: transparent;
  color: var(--color-theme-primary);
  border: 1px solid var(--color-border-primary);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-s);
  font-size: var(--font-size-body-m);
}

デザイン変更時もトークン値の修正のみで済むため、管理が容易になります。

まとめ

デザイントークンは、デザインと実装の一貫性を保つために非常に有用です。
皆さんのプロジェクトでもぜひデザイントークンの活用を検討してみてください！

また、デザインシステムの導入や運用についてはこちらの記事でも紹介していますので、ぜひご覧ください！

https://note.com/techbowl/n/n65bf8c8b7f39

https://note.com/techbowl/n/n792d3d96f11c

https://speakerdeck.com/kajitack/dezainsisutemuwoshi-merutameniqu-rizu-ndakoto-techtrain-x-yumemi-kokowoyi-shi-sitehosii-rihuakutaringumian-qiang-hui