デザイントークンはSerendie Design Systemを構成する最小単位です。コードベースとデザイン(Figma)でデザイントークンを共有することで、Single Source of Truthを実現することを念頭において設計されています。
デザイントークン(@serendie/design-token)は、Serendie UI(@serendie/ui)に同梱されますが、単独で使用することもできます。単独で使用する場合は、HTML/CSS環境など React以外でも使用できます。
最もシンプルな使い方を紹介します。
npm install @serendie/design-token
@import "@serendie/design-token/tokens.css";
h1 {
font-size: var(--sd-reference-typography-scale-expanded-large);
color: var(--sd-system-color-impression-primary);
}Serendie Design Systemには5つのカラーテーマがあり、デザイントークンもそれに対応します。htmlタグなどに、data-panda-theme属性 (konjo, asagi, sumire, tsutusji, kurikawa)を付与することで、CSS 環境であってもテーマを切り替えることができます。
各テーマについてはこちらを参照してください。
<html data-panda-theme="asagi"></html>デザイントークンの設計思想はドキュメントサイトを参照してください。提供するリファレンストークンおよびシステムトークンの一覧もあります。
またカラーロールやタイポグラフィロールといった、デザイントークンの役割についても解説しています。デザイントークンをベースに独自のUIコンポーネントを作る際に参照してください。
デザイントークンはリファレンストークンとシステムトークンの2種類で構成され、W3C Design Token Format Moduleの仕様に沿ってJSON形式で定義します。/tokensに置かれたJSONファイルをビルドした後、Serendie UIやFigma Variablesに展開します。
Important
W3C Design Token Format Moduleではテーマの扱いがまだ定まっていません。そのため次のような独自の命名規則を採用し、Figma Variablesとの整合性を考慮しています。 ここでテーマとは、カラーテーマの変化や、ブラウザ幅によるフォントサイズの変化など、コンテキスト毎のデザイントークンセットを指します。 またFigma Variablesではテーマを、Varialbeモードと呼びます。
命名規則
typography.compact.jsonやcolor.konjo.jsonのように2重拡張子でテーマ名を表現する- 単一テーマの場合は、
.default.jsonとする
- 単一テーマの場合は、
- 1つのJSONファイルが、Figma Variables上で1つのVariableモードとして展開される
.default.jsonは、Figma Variablesのデフォルトモードとして扱う
@serendie/style-dictionary-formatterによってデザイントークンのJSONファイルを各プラットフォームに合わせて加工します。成果物は /dist に配置され、Serendie UI から利用されます。
npm run build
@serendie/figma-utilsによって、デザイントークンJSONファイルをFigma Vairablesに同期します。
npm run sync-json-to-figma
なお、/tokensに変更が入るとGitHub Actionsにて自動で実行されます。
Warning
この仕組みは三菱電機社内向けです。Figma REST APIを利用しており、Figmaのエンタープライズプラン契約が必要になります。