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

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

Transcript

1. Figma REST APIから CSS変数を生成しよう mimo
2. Charcoalとは pixivをはじめ、様々なプロダクトが利用 web / iOS / Android それぞれに対応した実装がある 2022年7月からデザインシステム部が開発を担当 最近は新メジャーバージョンを開発 ピクシブのデザインシステム
3. mimoが関係ある部分の紹介 新メジャーバージョン
4. Design Tokenの刷新 Design Token: デザインシステムのあらゆる定数のこと Figma DesignではVariablesを参照して、デザインできる 実装コードではDesign Tokenを参照して、コードが書ける → デザイナーとエンジニアが同じトークン名で話せる Figma Variablesで管理するように
5. Design Tokenの刷新 Primitive TokenとApplied Tokenで構成 Applied TokenはPrimitive Tokenを参照している 2層構造のDesign Token
6. Applied Token Primitive Token 色を定義 役割にPrimitive Tokenを当てはめる
7. • 例: light/blue/50 • 色そのものを定義する層 • 各色10段階のスケール • 共通の内容 • 例: container/primary • 用途や意味を定義する層 • Primitive Tokenを参照 • プロダクトに合わせた内容 カスタマイズしても世界観を保てる Applied Token Primitive Token
8. どうやって 管理する？
9. Primitive Token 定義ファイル Applied Token 定義ファイル Figma ？ Charcoalの実装コード
10. どうしよう ピクシブはFigma Enterprise Planを使っている会社！ → Figma REST APIからVariablesとってこれる！ せっかくならかしこく管理したい
11. 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
12. APIレスポンスを変換する レスポンスが全然Design Tokenフレンドリーじゃない Variables CollectionをイケてるJSONへ変換 Figma REST API → JSON
13. API Response イケてるJSON →
14. Design Tokenをコードへ Style Dictionaryを利用 変数から変数の参照に対応している 共通のJSONからCSS / iOS / Androidのコードを生成 Token名の変換部分を実装 JSON→CSSなどに変換
15. Modeを変えて Light/Dark の出しわけも可能
16. 差分を検知してPull Request 元々あったPRを作る仕組みを利用 CIでformatterをかけて、差分をレビューしてからmerge このあとは通常のリリースフローに乗っかる GitHub Actionsで自動化
17. 実際にできたPull Request これをレビューしてマージしたらDesign Tokenの同期完了！
18. • Design TokenがFigmaで管理されるようになった • Design Tokenを自動的に更新できる仕組みを作った • これらがCharcoal Web実装の新バージョンで使われる まとめ
19. 2022年 新卒入社 CTO室 デザインシステム部 Charcoalのweb実装を担当 mimo