Figma tokens ＋ style dictionary でCSSを生成

背景

figmaで作成したtokenをGitHubにpushしてCSSファイルに書き出したい。
figma tokens → GitHub → style dictionary → CSSファイル

この記事の続き

なんでfigma tokensなのか

本当はfigamaの機能のvariablesでやりたかった。
→ variablesからtokenを書き出す方法が分からなかった。
（APIはエンタープライズプランから使える）
プラグインがあるかも。

tokens.json をtransformする

GitHubにpushされたtoken.json

style dictionaryで使えるようにするためリポジトリにpushしたtokens.json をtransformする。

// token-transformerをインストール
npm install -D token-transformer

package.jsonにスクリプトを追加する
（./data/tokens.json をtransformして output.jsonに書き出す）

  "scripts": {
    "transform": "token-transformer ./data/tokens.json output.json"
  }

スクリプトを実行

npm transform

transformされたoutput.json

style dictionaryでCSSを生成する

// style-dictionaryをインストール
npm install -D style-dictionary

package.jsonにスクリプトを追加する

  "scripts": {
    "start": "npm run transform && npm run build",
    "build": "style-dictionary build",
  }

config.jsonを作成する

{
  "source": ["output.json"],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "buildPath": "build/css/",
      "files": [{
        "destination": "variables.css",
        "format": "css/variables",
        "options": {
          "outputReferences": true
        }
      }]
    }
  }
}

スクリプトを実行

npm build

CSSファイルが生成される

最後に

今度はnpmパッケージにする記事を書きたい。
パッケージのバージョン管理もいい感じにしたい。