@digital-go-jp/design-tokens
v0.4.0
Published
[デジタル庁 デザインシステム(Figma)](https://www.figma.com/community/file/1255349027535859598)のデザイントークン。
Downloads
945
Keywords
Readme
Design Tokens
デジタル庁 デザインシステム(Figma)のデザイントークン。
インストール
$ npm install @digital-go-jp/design-tokens
使用例
CSS
examples ディレクトリを参照してください。
JavaScript
tailwind-theme-plugin を参照してください。
バージョン対応表
| Figma のバージョン | パッケージのバージョン | | ------------------ | ---------------------- | | 2.0.3 | 0.4.0 | | 2.0.2 | 0.1.7 | | 2.0.1 | 0.1.6 | | 1.4.3 | 0.1.6 |
仕組み
- Tokens Studio for Figma でデザイントークンを管理し、GitHub リポジトリと連携をします。
- Figma 上でデザイントークンに更新があったら、連携先リポジトリの特定のブランチにプッシュをします。
- プッシュ をトリガーに GitHub Actions(
.github/workflows/transform-figma-tokens.yml
)が実行されます。この Actions ではtoken-transformer
を実行し、Token Studio for Figma から出力された json ファイルを Style Dictionary でビルド可能な json 形式に変換します。 - GitHub の Release をトリガーに GitHub Actions(
.github/workflows/publish.yml
)が実行されます。この Actions では Style Dictionary を実行し、デザイントークン(json)を CSS および JavaScript で扱えるようにビルドし npm パッケージとしてリリースをします。