Skip to content

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

License

Notifications You must be signed in to change notification settings

digital-go-jp/design-tokens

Repository files navigation

Design Tokens

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

npm version

インストール

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

使用例

CSS

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

JavaScript

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

バージョン対応表

Figma のバージョン パッケージのバージョン
2.1.2 1.0.2
2.1.1 1.0.2
2.1.0 1.0.2
2.0.4 1.0.1
2.0.3 1.0.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 の Release をトリガーに GitHub Actions(.github/workflows/publish.yml)が実行されます。この Actions では Style Dictionary を実行し、デザイントークン(json)を CSS および JavaScript で扱えるようにビルドし npm パッケージとしてリリースをします。

参考

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •