https://github.com/digital-go-jp/design-tokens
デジタル庁デザインシステムのデザイントークン
https://github.com/digital-go-jp/design-tokens
css design-tokens javascript npm
Last synced: 6 months ago
JSON representation
デジタル庁デザインシステムのデザイントークン
- Host: GitHub
- URL: https://github.com/digital-go-jp/design-tokens
- Owner: digital-go-jp
- License: mit
- Created: 2023-03-20T04:24:17.000Z (over 3 years ago)
- Default Branch: develop
- Last Pushed: 2025-03-24T09:10:05.000Z (over 1 year ago)
- Last Synced: 2025-03-30T03:03:57.979Z (over 1 year ago)
- Topics: css, design-tokens, javascript, npm
- Language: TypeScript
- Homepage:
- Size: 577 KB
- Stars: 61
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Design Tokens
[デジタル庁 デザインシステム（Figma）](https://www.figma.com/community/file/1255349027535859598)のデザイントークン。
[](https://badge.fury.io/js/@digital-go-jp%2Fdesign-tokens)
## インストール
```
$ npm install @digital-go-jp/design-tokens
```
## 使用例
### CSS
CSS 向けには `tokens.css` および `tokens-simple.css` を提供しています。`tokens.css` は全てのデザイントークンを含みます。`tokens-simple.css` はデザイントークンのサブセットで、色、フォントおよびエレベーションのみを含みます。
`tokens.css` の使用例として [examples](./examples/) ディレクトリを参照してください。
### JavaScript
[tailwind-theme-plugin](https://github.com/digital-go-jp/tailwind-theme-plugin) を参照してください。
## バージョン対応表
| Figma のバージョン | パッケージのバージョン |
| ------------------ | ---------------------- |
| 2.10.0 | 1.1.7 |
| 2.9.0 | 1.1.7 |
| 2.8.1 | 1.1.7 |
| 2.8.0 | 1.1.7 |
| 2.7.0 | 1.1.7 |
| 2.6.0 | 1.1.7 |
| 2.5.1 | 1.1.7 |
| 2.5.0 | 1.1.7 |
| 2.4.0 | 1.1.7 |
| 2.3.0 | 1.1.7 |
| 2.2.0 | 1.1.7 |
| 2.1.2 | 1.1.7 |
| 2.1.1 | 1.1.7 |
| 2.1.0 | 1.1.7 |
| 2.0.4 | 1.1.7 |
| 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](https://www.figma.com/community/plugin/843461159747178978/tokens-studio-for-figma)
- [Tokens Studio for Figma の GitHub 連携](https://docs.tokens.studio/token-storage-and-sync/sync-provider-github)
- [Style Dictionary](https://amzn.github.io/style-dictionary/#/)