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

Charcoalとは pixivをはじめ、様々なプロダクトが利用 web / iOS / Android それぞれに対応した実装がある 2022年7月からデザインシステム部が開発を担当 最近は新メジャーバージョンを開発 ピクシブのデザインシステム

mimoが関係ある部分の紹介 新メジャーバージョン

Design Tokenの刷新 Design Token: デザインシステムのあらゆる定数のこと Figma DesignではVariablesを参照して、デザインできる 実装コードではDesign Tokenを参照して、コードが書ける → デザイナーとエンジニアが同じトークン名で話せる Figma Variablesで管理するように

Design Tokenの刷新 Primitive TokenとApplied Tokenで構成 Applied TokenはPrimitive Tokenを参照している 2層構造のDesign Token

Applied Token Primitive Token 色を定義 役割にPrimitive Tokenを当てはめる

● 例: light/blue/50 ● 色そのものを定義する層 ● 各色10段階のスケール ● 共通の内容 ● 例: container/primary ● 用途や意味を定義する層 ● Primitive Tokenを参照 ● プロダクトに合わせた内容 カスタマイズしても世界観を保てる Applied Token Primitive Token

どうやって 管理する？

Primitive Token 定義ファイル Applied Token 定義ファイル Figma ？ Charcoalの実装コード

どうしよう ピクシブはFigma Enterprise Planを使っている会社！ → Figma REST APIからVariablesとってこれる！ せっかくならかしこく管理したい

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

APIレスポンスを変換する レスポンスが全然Design Tokenフレンドリーじゃない Variables CollectionをイケてるJSONへ変換 Figma REST API → JSON

API Response イケてるJSON →

Design Tokenをコードへ Style Dictionaryを利用 変数から変数の参照に対応している 共通のJSONからCSS / iOS / Androidのコードを生成 Token名の変換部分を実装 JSON→CSSなどに変換

Modeを変えて Light/Dark の出しわけも可能

差分を検知してPull Request 元々あったPRを作る仕組みを利用 CIでformatterをかけて、差分をレビューしてからmerge このあとは通常のリリースフローに乗っかる GitHub Actionsで自動化

実際にできたPull Request これをレビューしてマージしたらDesign Tokenの同期完了！

● Design TokenがFigmaで管理されるようになった ● Design Tokenを自動的に更新できる仕組みを作った ● これらがCharcoal Web実装の新バージョンで使われる まとめ

2022年 新卒入社 CTO室 デザインシステム部 Charcoalのweb実装を担当 mimo