社内管理ツールのカオスなデザインシステムをデザイントークンで統一

全部を社外用に言い換えるのしんどいので、一旦印象的な図やコメントだけ言い換えて記述

シンプルな説明、ロジックなのは許して欲しい。

課題

1. 3つのデザインシステムを統一したいが、依存関係めちゃくちゃで統合が難しい。

直近の課題: Project AppleとProject Bananaをシームレスに行き来する機能開発で、デザインを統一したい。

そもそも、3つの依存関係がめちゃくちゃなstyleがあって、扱いが辛い。

https://gyazo.com/5fee3b3c188e8e65a0fce24b807df80d

2. 手軽にStylingしたいが、共通化されていなく0ベースで作らざるを得ない

直近の課題:

Appleで汎用的に使い回せるスタイルが無いので0ベースで作らざるを得ない。

デザイナー無しで、いい感じのデザインにしたい。

bananaだけど、appleのデザインに寄せたい。

解決策

デザイントークンベースの、utility classとCSS custom propertiesを利用して統一

Design Tokens: Designにおける最小単位。FigmaのVariables Figmaで定義

Utilities: CSSで表現したDesign Tokens。utility classとCSS custom propertiesとして定義

Markup: Utilitiesを下に具体化する。

utilty classを組み合わせる

project class、component classで、CSS custom propertiesを利用

https://gyazo.com/6a805afe6cf5f47f82f844da5d24b58e

https://gyazo.com/8a23a15c5bc2a9570ecf356bed1f890a

長期目線

Base,apple,bananaで共通のコンポーネントが発生した場合

https://gyazo.com/d55d7f3fa2b8afea4386450a1f0ee94e

Variables FigmaからUtilitiesへの変換について

現状の変換: Variables Figma→プラグインでDesign Tokens標準仕様のtokens.jsonに変換しexport→変換scriptで生成

なぜ、スクラッチしたscriptか？

with railsなバンドル周りの都合で、モダンなライブラリを利用できる環境でない。

↑より、utility classを生成するために以下が必要

sass変数化→utility classの生成

同時に、各所から利用できるCSS custom propertiesの生成

Variants Figmaで対応できないTokenを別途追加して、Utilitiesを作りたい。

Tokens Studioを利用すれば、解決する可能性もあるが、不確実

上記の複雑な要求を style-dictionaryが満たすかの調査や試行錯誤するぐらいなら、input/outputをLLMに伝えて一緒にscript書いた方が早いと判断した。

将来: style-dictionaryが要求を満たせば入れ替え。

ref

今回のProjectの発端