Log in to leave a comment
No posts yet
スタートアップでデザインシステムを構築しても、かえって速度が低下することがあります。デザイナーが修正した値を開発者が再びコードに移し替えるという、退屈な繰り返し作業が発生するためです。このプロセスを自動化してこそ、チームは製品の本質的な検討に集中できるようになります。
デザインツールの値をコード変数に一つずつマッピングしてはいけません。デザインシステムを導入すれば、この連結部がデータに置き換わります。
このように設定すれば、デザイナーがカラー値を変更しても、開発者はコードを触る必要がありません。システムが自動的にCSSファイルを更新します。フォントスケールもPenpotのトークンパネルでBaseとRatioを入力し、数学的に定義してください。 という式を使えば、デザインの一貫性が強制的に維持されます。
デザインの修正事項を開発者が手動で確認するのは非効率的です。PenpotはW3Cのデザインシステム標準に従っているため、パイプラインの構築が可能です。
数百個のトークン値が一瞬でコードベースに入ります。手動入力時に発生するヒューマンエラーがなくなります。Shopifyのような大規模なサービスも、このようなトークンベースのワークフローを活用して、コード修正なしに即座にデザインをアップデートしています。
デザインの変更事項をSlackのメッセージや口頭で伝えてはいけません。開発者にとって最も馴染みのあるGitで管理します。
開発者はどの値がなぜ変わったのかをPRで即座に把握できます。なぜ変更されたのかを確認しに行く時間を節約できます。
すべてのコードを一度に変えようとしてはいけません。既存のCSSと新規トークンを混ぜて使用するフォールバック技術が現実的です。
トークンがまだ定義されていないコンポーネントは、既存の値をそのまま維持します。UIが崩れる心配をすることなく、システムを少しずつ現代化できます。小さなカラーのトークン一つをパイプラインに接続することから始めてください。将来発生する巨大な技術的負債を今防ぐ方法です。