Serendie Design Systemで使われるFigma用ユーティリティーです。
@serendie/design-tokenの中で定義されるW3C Design Tokens Spec準拠のJSONを、Figma VariablesにImport/Exportするスクリプトが含まれています。
なお、Figma REST APIを前提としており、利用にはFigmaエンタープライズプランが必要です。
.envに下記を設定してください。
PERSONAL_ACCESS_TOKEN- VariablesのRead/Write Scopeを有するFigmaのpersonal access token
FILE_KEY- Import/Export先のVariablesを有するFigmaファイルのKey
- FigmaファイルのURLに含まれます (
https://www.figma.com/file/{FILE_KEY}/...)
JSON to Figma Variables (Import)
npm run sync-json-to-figma
Figma Variables to JSON (Export)
npm run sync-figma-to-json
W3C Design Tokens Specではテーマ (Variablesモード) の扱いが定まっていないため、独自の命名規則を採用しています。詳しくはこちらを参照してください。