SDS Figma Utilities

Serendie Design Systemで使われるFigma用ユーティリティーです。 @serendie/design-tokenの中で定義されるW3C Design Tokens Spec準拠のJSONを、Figma VariablesにImport/Exportするスクリプトが含まれています。

なお、Figma REST APIを前提としており、利用にはFigmaエンタープライズプランが必要です。

Usage

Prepare

.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}/...)

Commands

JSON to Figma Variables (Import)

npm run sync-json-to-figma

Figma Variables to JSON (Export)

npm run sync-figma-to-json

Spec

W3C Design Tokens Specではテーマ (Variablesモード) の扱いが定まっていないため、独自の命名規則を採用しています。詳しくはこちらを参照してください。