@digital-go-jp/design-tokens v1.1.0

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 を参照してください。

バージョン対応表

仕組み

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

求人情報

デジタル庁デザインシステムのチームメンバーを募集しています。行政のデジタル環境を支える基盤づくりに、あなたのスキルや経験を活かしてみませんか？　求人ページからご応募ください。

• プロダクトデザイナー（デザインシステム） - デジタル庁