スキル自身の言葉で
このスキルは、デザイントークン、テーマ基盤、コンポーネントアーキテクチャのパターンを用いて、拡張性のあるデザインシステムを構築します。生の値を扱うプリミティブトークン、文脈的な意味を持つセマンティックトークン、特定の用途向けのコンポーネントトークンという3層のトークン階層を作成し、CSSカスタムプロパティとReactのコンテキストプロバイダーによるテーマ切り替えを実装します。
このスキルは、CSS、iOS、Android向けのマルチプラットフォームなトークン生成に対応し、Style Dictionaryを用いたFigmaからコードへのワークフローを確立し、複合コンポーネント、ポリモーフィックコンポーネント、バリアント、スロット、ヘッドレスUIパターンを使ってコンポーネントライブラリを設計します。prefers-color-schemeのようなシステム設定や、モーション低減モードも検出します。
生成されるもの
- CSS、iOS、Android向けに生成されたマルチプラットフォームのトークンファイル
- バリアントとサイズ体系を備えたコンポーネントライブラリ
- デザインシステムのドキュメントとガイドライン
仕組み
- 01プリミティブトークンを定義する
基盤層となる、色・サイズ・フォントの生の値のトークンを作成します。これらは16進コードやピクセル値のようなリテラルな値です。
- 02セマンティックトークン層を構築する
プリミティブトークンを参照して、text-primary、surface-elevated、border-defaultのような、見た目の説明ではなく意味を持つ文脈的なトークンを作成します。
- 03コンポーネント固有のトークンを作成する
button-bgやcard-borderのような特定のコンポーネントの用途向けのトークンを、セマンティックトークンを参照して定義します。