デザインとコードをデザインシステムで同期させる

スタートアップでデザインシステムを構築しても、かえって速度が低下することがあります。デザイナーが修正した値を開発者が再びコードに移し替えるという、退屈な繰り返し作業が発生するためです。このプロセスを自動化してこそ、チームは製品の本質的な検討に集中できるようになります。

トークンでデザイン言語を統一する

デザインツールの値をコード変数に一つずつマッピングしてはいけません。デザインシステムを導入すれば、この連結部がデータに置き換わります。

1. プリミティブトークン: blue-500のように、プリミティブなカラー値を定義します。
2. セマンティックトークン: action.primary.bgのように、実際の使用箇所を明示し、上記のプリミティブを参照します。
3. CSS変数マッピング: セマンティックトークンをCSS変数として保存します。

このように設定すれば、デザイナーがカラー値を変更しても、開発者はコードを触る必要がありません。システムが自動的にCSSファイルを更新します。フォントスケールもPenpotのトークンパネルでBaseとRatioを入力し、数学的に定義してください。 $Size_{n} = Base \times Ratio^{n}$ という式を使えば、デザインの一貫性が強制的に維持されます。

PenpotとGitHubの連携自動化

デザインの修正事項を開発者が手動で確認するのは非効率的です。PenpotはW3Cのデザインシステム標準に従っているため、パイプラインの構築が可能です。

1. Penpot APIキーを生成します。
2. プロジェクトルートに penpot-export.config.js ファイルを作成します。ここで抽出するトークンと保存パスを設定します。
3. @penpot-export/cli パッケージをインストールした後、npx penpot-export コマンドを実行します。

数百個のトークン値が一瞬でコードベースに入ります。手動入力時に発生するヒューマンエラーがなくなります。Shopifyのような大規模なサービスも、このようなトークンベースのワークフローを活用して、コード修正なしに即座にデザインをアップデートしています。

Gitレビューでデザイン変更の意図を把握する

デザインの変更事項をSlackのメッセージや口頭で伝えてはいけません。開発者にとって最も馴染みのあるGitで管理します。

1. .github/workflows/design-sync.yml ファイルを作成し、デザインシステムの抽出を自動化します。
2. peter-evans/create-pull-request アクションを使用して、変更内容が含まれるPRを自動生成します。
3. PRが上がったら style(tokens) コミットメッセージを確認し、コードレビューの過程でdiffを見ます。

開発者はどの値がなぜ変わったのかをPRで即座に把握できます。なぜ変更されたのかを確認しに行く時間を節約できます。

レガシーコードとの共存

すべてのコードを一度に変えようとしてはいけません。既存のCSSと新規トークンを混ぜて使用するフォールバック技術が現実的です。

1. src/styles/tokens ディレクトリに自動生成されたトークンファイルを配置します。
2. 既存のCSSで var(--new-token, #legacy-value) 形式を使用します。

トークンがまだ定義されていないコンポーネントは、既存の値をそのまま維持します。UIが崩れる心配をすることなく、システムを少しずつ現代化できます。小さなカラーのトークン一つをパイプラインに接続することから始めてください。将来発生する巨大な技術的負債を今防ぐ方法です。