Design Tokens

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

インストール

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

使用例

CSS

CSS 向けには tokens.css および tokens-simple.css を提供しています。tokens.css は全てのデザイントークンを含みます。tokens-simple.css はデザイントークンのサブセットで、色、フォントおよびエレベーションのみを含みます。

tokens.css の使用例として examples ディレクトリを参照してください。

JavaScript

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

バージョン対応表

| Figma のバージョン | パッケージのバージョン | | ------------------ | ---------------------- | | 2.8.1 | 1.1.2 | | 2.8.0 | 1.1.2 | | 2.7.0 | 1.1.2 | | 2.6.0 | 1.1.2 | | 2.5.1 | 1.1.2 | | 2.5.0 | 1.1.2 | | 2.4.0 | 1.1.2 | | 2.3.0 | 1.1.2 | | 2.2.0 | 1.1.2 | | 2.1.2 | 1.1.2 | | 2.1.1 | 1.1.2 | | 2.1.0 | 1.1.2 | | 2.0.4 | 1.1.2 | | 2.0.3 | 1.0.1 | | 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 の 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