スキル自身の言葉で
1つのブランドカラーから完全なトークンセットを作成するための、デザインシステムツールキットです。design_token_generator.pyは、16進数のカラーコードと「モダン」「クラシック」「プレイフル」のいずれかのプリセットを受け取り、カラー、タイポグラフィ、8ptスペーシング、サイジング、ボーダー、シャドウ、アニメーション、ブレークポイント、z-indexレイヤーを、json、css、scss、またはサマリー形式で返します。
続く4つのワークフローでは、アトムからテンプレートまでのコンポーネントアーキテクチャ、clamp()を用いた流動的なタイポグラフィによるレスポンシブブレークポイント、WCAGコントラスト検証、React CSS変数、Tailwind設定、styled-componentsへの開発者ハンドオフ、さらにTokens Studioを通じたFigma連携を扱います。ビルドチームのためにトークンとコンポーネントを文書化する必要のあるシニアUIデザイナーを対象としています。
生成されるもの
- props、バリアントオプション、状態、アクセシビリティ要件を網羅したコンポーネントAPIドキュメント。
- CSS変数を用いたReact、Tailwindテーマ設定、styled-componentsのための統合コードスニペット。
- 自身のコントラストカラーを持つセマンティックカラートークン。
仕組み
- 01ブランドカラーを確定する
このワークフローは、まずブランドのプライマリカラーを特定することから始まります。生成されるすべてのカテゴリはこの色から導き出されるため、ファイルでは16進数形式で指定することが求められます。
- 02トークンジェネレーターを実行する
1回のスクリプト呼び出しでシステム全体が生成されます。色、スタイルプリセット、出力形式がこのスクリプトが受け取る3つの引数です。
- 03トークンをコンポーネント階層にマッピングする
コンポーネントはatom、molecule、organism、templateとして整理され、それぞれが使用するトークングループに紐付けられます。
- 04ブレークポイントと流動的なタイプを設定する
6つのブレークポイントがxsから2xlまで用意されており、流動的なタイポグラフィは最小サイズと最大サイズの間のclamp計算式で表現されます。
- 05トークンをコードベースに組み込む
ハンドオフワークフローでは、トークンファイルを直接インポートする方法、JSONから構築したTailwindテーマ、トークンキーを読み取るstyled-componentsテーマが示されます。
- 06FigmaとSyncしてサインオフする
トークンはTokens Studioプラグインを通じてFigmaに取り込まれ、ハンドオフチェックリストでパイプライン、コンポーネントライブラリ、ドキュメントが完了していることを確認します。