Zenn
🧬

Figma Tokens が生成するデザイントークンをフロントエンドの実装に利用する

2022/10/27に公開
Figma
#
デザインシステム
#
デザイントークン
tech

Figma Tokensを使ってデザインシステムを構築する際の手順メモです。
Figma Tokensが吐き出したデザイントークンのファイルを、scssファイルなどのスタイリングファイル（スタイリング用の一次ソースファイル）に変換するところまでを説明します。
参考までにどうぞ。

0. 【下準備】ターミナルで開発ディレクトリに移動する（プロジェクトのルートディレクトリに移動）

ターミナル
cd workspace/Frontend/

※workspaceディレクトリやFrontendディレクトリはご自身の開発ディレクトリの名前に読み替えてください。

1. Token Transformer をインストール

ターミナル
npm install -D token-transformer

もしくは、Yarnを使ってインストールするのであれば以下のコマンドを実行する。

ターミナル
yarn add -D token-transformer

Token Transformer：Figma Tokens が生成したデザイントークンのファイルtokens.jsonを後述するStyle Dictionaryが読み取り可能な形式に変換してくれるNode.jsのパッケージ。
Doc: lukasoppermann/design-token-transformer: Base repo to transform json design tokens from the figma design token plugin via amazon style dictionary. - GitHub

-Dオプション：--save-devと同じ意味。省略形。パッケージを開発環境のローカルにインストールするためのオプション。このオプションを付けてインストールを実行すると、インストール結果がpackage.jsonのdevDependenciesに追記される。
このオプションについてのソースはこちら。
Doc: npm-install | npm Docs

2. Style Dictionary をインストール

ターミナル
npm install -D style-dictionary

もしくは、Yarnを使ってインストールするのであれば以下のコマンドを実行する。

ターミナル
yarn add -D style-dictionary

Style Dictionary：「デザイントークンのファイル（tokens.json）」を「フロントエンドの実装に利用可能なスタイリングファイル（tokens.scss、tokens.js、tokens.d.ts）」へと変換してくれるNode.jsのパッケージ。
Doc: amzn/style-dictionary: A build system for creating cross-platform styles. - GitHub

3. プロジェクトのルートディレクトリ直下にdesign-tokensディレクトリを新規作成する

ターミナル
mkdir design-tokens

※このdesign-tokensディレクトリでデザイントークンのファイル（オリジナルと、 Token Transformer で変換したもののみ）を管理する。

4. design-tokensディレクトリ内に、さらに以下のディレクトリを作成する

ターミナル
mkdir {design-tokens/01-src, design-tokens/02-dest}
  • 01-srcディレクトリ：tokens.jsonのオリジナル（『Figma Tokens』でExportしたファイル）をここに格納します。
  • 02-destディレクトリ： Token Transformer が変換＆出力するtokens.jsonをここに格納します。

5. 作成したdesign-tokens/01-srcディレクトリ内にtokens.jsonを格納する

tokens.json：Figmaのプラグイン『Figma Tokens』でExportしたデザイントークンのJSONファイルのこと。

6. Token Transformer でデザイントークンのファイルtokens.jsonを変換する

Token Transformer を使い、 Style Dictionary が扱うことのできるtokens.jsonを作成します。

ターミナル
node node_modules/token-transformer design-tokens/01-src/tokens.json design-tokens/02-dest/tokens.json

もしくは

ターミナル
./node_modules/.bin/token-transformer design-tokens/01-src/tokens.json design-tokens/02-dest/tokens.json

7. スタイリングファイルのビルド先となるディレクトリを作成する

Style Dictionary でビルドしたファイルを格納するためのディレクトリを先に用意しておきます。

ターミナル
mkdir src/design-tokens

8. package.jsonファイルがある階層（プロジェクトのルートディレクトリ直下）にstyle-dictionary.config.jsonを作成する

まずはstyle-dictionary.config.jsonを作成。

ターミナル
touch style-dictionary.config.json

続いて、作成したstyle-dictionary.config.jsonに以下のコードを記述する。

style-dictionary.config.json
{
  "source": ["design-tokens/02-dest/tokens.json"],
  "platforms": {
    "scss": {
      "transformGroup": "scss",
      "buildPath": "src/design-tokens/",
      "files": [
        {
          "destination": "tokens.scss",
          "format": "scss/map-deep",
          "mapName":"css-tokens",
          "options": {
            "outputReferences": true
          }
        }
      ]
    },
    "ts": {
      "transformGroup": "js",
      "buildPath": "src/design-tokens/",
      "files": [
        {
          "destination": "tokens.js",
          "format": "javascript/module"
        },
        {
          "destination": "tokens.d.ts",
          "format": "typescript/module-declarations"
        }
      ]
    }
  }
}

style-dictionary.config.json：design-tokens/02-dest/tokens.jsonを元に、Style Dictionary でどのようなスタイリングファイルをビルドするか？ style-dictionary.config.jsonは、そのビルドの設定が書かれたファイルです。

source：デザイントークンの元ファイルの参照。
buildPath：スタイリングファイルの書き出し先。
destination：スタイリングファイルのファイル名。

※この記事ではデザイントークンの参照元をdesign-tokens/02-dest/tokens.json、スタイリングファイルの書き出し先をsrc/design-tokensディレクトリとしていますが、こちらはお好みの場所・ディレクトリに変更していただいてOKです。

9. Style Dictionary でスタイリングファイルをビルドする

ターミナル
npx style-dictionary build --config style-dictionary.config.json

※ビルドしたファイルはsrc/design-tokensディレクトリの中に保存されている。

10. Style Dictionary によって生成されたファイルをimportして使用する

あとはビルドされた

  • tokens.scss
  • tokens.js
  • tokens.d.ts

以上3つのファイルを任意のファイルで読み込んで使用するだけ！

コンポーネント
import tokens from "design-tokens/tokens";

参考にした記事

https://zenn.dev/kosukek/articles/c86b34b847a9f2

Discussion