Design Tokens

デジタル庁 デザインシステム（Figma）のデザイントークン。

インストール

$ npm install @digital-go-jp/design-tokens

使用例

CSS

examples ディレクトリを参照してください。

JavaScript

tailwind-theme-plugin を参照してください。

バージョン対応表

Figma のバージョン	パッケージのバージョン
2.0.3	0.2.0
2.0.2	0.1.7
2.0.1	0.1.6
1.4.3	0.1.6

仕組み

1. Tokens Studio for Figma でデザイントークンを管理し、GitHub リポジトリと連携をします。
2. Figma 上でデザイントークンに更新があったら、連携先リポジトリの特定のブランチにプッシュをします。
3. プッシュ をトリガーに GitHub Actions（.github/workflows/transform-figma-tokens.yml）が実行されます。この Actions ではtoken-transformerを実行し、Token Studio for Figma から出力された json ファイルを Style Dictionary でビルド可能な json 形式に変換します。
4. GitHub の Release をトリガーに GitHub Actions（.github/workflows/publish.yml）が実行されます。この Actions では Style Dictionary を実行し、デザイントークン（json）を CSS および JavaScript で扱えるようにビルドし npm パッケージとしてリリースをします。

参考

• Tokens Studio for Figma
  • Tokens Studio for Figma の GitHub 連携
• Style Dictionary