こんにちは！TechBowl の梶川(@kajitack)です。
この度、TechTrain のデザインシステム「TechTrain Terminal.」のデザイントークンを公開しました！
デザイントークンの詳細は、以下のリポジトリでご覧いただけます。
デザインシステムの構築において、デザイントークンは実装とデザインの橋渡しをする重要な要素です。
この記事では、私たちがどのようにデザイントークンを定義し、実装に活かしているのかを解説します。
デザインシステムを導入したい方や、デザインと実装の一貫性に課題を感じている方に参考になれば幸いです。
デザイントークンとは
デザイントークンとは、デザインシステムを構成する要素のひとつで、UI における見た目の各属性値を共通化するためにトークンとして定義したものです。
トークンは、デザインの属性値（例：色、サイズ、フォント）を一意に識別するための名前付き変数です。
例えば、以下のように色の値とそれに対して名前を付けて定義します。
このようにトークンを命名することで、以下のようなメリットがあります：
- デザインの一貫性維持: 同じ役割を持つ要素には同じトークンが適用され、視覚的な統一感が生まれます
- 変更管理の効率化: トークン値を一箇所で変更するだけで、それを参照するすべての要素に変更が反映されます
- クロスプラットフォーム対応: 同じトークン定義から各プラットフォーム向けのコード（CSS、iOS、Android 等）を生成できます
- 設計意図の共有: 命名によって値の使用目的が明確になり、チームでの認識が統一されます
デザイントークンの仕様も標準化が進んでおり、W3CのDesign Tokensコミュニティグループ が仕様を策定しています。この仕様に従ってトークンを定義することで、さまざまなツールとの連携が容易になります。
デザイントークンについての説明は、こちらの記事がわかりやすいです。
定義している内容
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 で確認できます。
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 定数、ネイティブアプリなど、各プラットフォームに適した形式で出力できるライブラリです。
プラットフォームに合わせて、このように変換の設定を行うことができます。
利用するプラットフォームが増える場合でも、Style Dictionary を使用することで、同じ JSON ファイルから異なる形式のコードを生成できます。
そして、自動生成することで、定義ミスを防ぐことができます。
4. 実装
デザイントークンは横断的に利用できるように、npm パッケージとして公開しています。
この 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);
}
デザイン変更時もトークン値の修正のみで済むため、管理が容易になります。
まとめ
デザイントークンは、デザインと実装の一貫性を保つために非常に有用です。
皆さんのプロジェクトでもぜひデザイントークンの活用を検討してみてください！
また、デザインシステムの導入や運用についてはこちらの記事でも紹介していますので、ぜひご覧ください！
TechTrainとは
TechTrain はプロのエンジニアを目指す方のためのオンラインコミュニティです。
フロントエンドやバックエンドなど、各技術分野ごとに必要な素養を路線図のように俯瞰できます。実践的な開発ドリルを通じて、着実にスキルを身につけながら開発を進められる仕組みが整っています。
業界でバリバリ活躍する現役社会人エンジニアがメンターとなり、実践的なメンタリング、カリキュラムを提供しています。
TechTrain でエンジニアに向けての第一歩を踏み出してみませんか？
今の自分のエンジニアスキルを高めたい方ももちろん大歓迎です。
本気で実力を一段上に上げたい方をお待ちしています！
また、TechTrain では一緒にコミュニティを盛り上げてくれるメンターも募集しています。
興味のある方はぜひ @kajitack までご連絡ください！
Discussion