$30 off During Our Annual Pro Sale. View Details »

Figma REST APIからCSS変数を生成しよう

mimo
October 17, 2024
460

Figma REST APIからCSS変数を生成しよう

ピクシブのデザインシステム「Charcoal」はFigma VariablesでDesign Tokenを管理しています。Figmaファイルに定義されているVariablesをCSS変数にするために考えたこと、やったことを話します。

mimo

October 17, 2024
Tweet

Transcript

  1. • 例: light/blue/50 • 色そのものを定義する層 • 各色10段階のスケール • 共通の内容 •

    例: container/primary • 用途や意味を定義する層 • Primitive Tokenを参照 • プロダクトに合わせた内容 カスタマイズしても世界観を保てる Applied Token Primitive Token
  2. Design Token生成フロー 1. Figma REST APIのレスポンスをJSONで保存 yarn token-cli fetch -o

    raw_response.json 2. いい感じのJSONを作る yarn token-cli transform --source raw_response.json --output token.json 3. Style DictionaryでCSSを作る yarn style-dictionary build -c pixiv-light.config.js