Skip to content

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

License

Notifications You must be signed in to change notification settings

digital-go-jp/design-tokens

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Feb 25, 2025
9ab73be · Feb 25, 2025
Nov 27, 2024
Dec 21, 2023
Dec 11, 2024
Dec 9, 2024
Nov 27, 2024
Jun 29, 2023
Mar 20, 2023
Nov 7, 2023
Feb 25, 2025
Nov 27, 2024
Feb 25, 2025
Feb 25, 2025
May 17, 2024

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.3
2.1.1 1.0.3
2.1.0 1.0.3
2.0.4 1.0.3
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 パッケージとしてリリースをします。

参考