Figmaでデザイントークンを活用する

前回まで

前回はデザイントークンの設計を「階層化」と「命名規則」をポイントに解説しました。

今回は設計されたデザイントークンを、デザインとコードに連携させるために、Figmaのバリアブルなどを使って、どのように管理、共有して活用できるかを解説します。

Figmaでのデザイントークンの活用方法

ここまでは主にコードを中心としたような話でしたが、デザインとどう連携させるかを考える必要があります。ここからは私がアドボケートを務めるFigmaを活用したデザイントークンの連携について解説します。

Figmaのバリアブルによる管理

FigmaはUIデザインやプロトタイプ作成ができるツールで、デザイン上の色やタイポグラフィなどのスタイルを一元管理する機能があります。

Figmaでは数年前から「スタイル（Styles）」という機能で管理することができ、チームやプロジェクトで共有することができましたが、2023年に**「バリアブル（Variables）」**が登場し、デザイントークンとして、スタイルを柔軟かつ体系的に管理できるようになりました。

バリアブルの主な特徴は次のようなものです。

• スタイルの一元管理：「数値型」「文字列型」の変数を利用し、色やタイポグラフィ、スペーシングなどを一箇所で管理できる
• モードの設定：ライトモードとダークモードなど、異なるテーマやバリエーションに対応した値を設定できる
• コレクション（Collection）による整理：バリアブルをコレクションごとに分類し、整理することで管理が容易になる

バリアブルはデザイン編集の画面からアクセスすることができます。スタイルのまとまりを「コレクション」として管理し、その中でデータテーブルのようにバリアブルを名前と値で管理します。

つまり、バリアブルのテーブル上でのマッピングが、デザイントークンにおける名前と値のマッピングと同等と考えると良いでしょう。またバリアブルではデザイントークンと同様にエイリアスも使えるので、他のバリアブルの値を参照させることができます。

大きな画像

バリアブルとして定義された各スタイルは、UI上の各要素に適用することで、デザインデータとして効率的に管理できます。またそれらのUIを実装者がインスペクトすると、適用されたバリアブルの名前を確認することができます。都度「この値はバリアブル（あるいはデザイントークン）のどの名前か？」を考える必要はありません。

大きな画像

もしDev Modeが利用できる場合は、インスペクトした要素からCSSなどのコードスニペットを生成することができ、より容易に情報を把握、コードをまとめてコピーできます。

大きな画像

バリアブルとコードの連携

バリアブルがデザインに適用されたら、それらをコードにも反映させる必要があります。バリアブルで定義されたスタイルをデザイントークンにするにあたり、手作業でコピー&ペーストするような方法ではなく、APIを使った自動化・半自動化をしましょう。

自動化・半自動化により、デザインとコード間での一貫性や、作業効率の向上、人的ミスのリスクを減らすことができます。

バリアブルとして設定したスタイルをデザイントークンとして出力する方法は大きく2つあります。プラグインを使う方法と、REST APIを使う方法です。

Figmaにはプラグインが使える機構があり、プラグインはFigma Communityという公式のコミュニティで公開されています。プラグインのほぼすべてはユーザーにより作成・公開されており、その多くは無料で使えます。なおプラグインを実行するためにはそのファイルへの編集権限が必要です。または、プラグインがDev Modeにも対応している場合は、Dev Modeの権限があればDev Mode時に実行できます。

バリアブルをコードにするためのプラグインも多く公開されているため、それらを利用するのが簡単です。いろいろな形式でエクスポートするプラグインがありますが、シンプルに使えるプラグインを紹介します。

Design Tokens (W3C) Exportはその名前のとおり、本シリーズで取り挙げたDesign Tokens Community GroupのJSONに寄せた形式でエクスポートできるプラグインです。

1. バリアブルが登録されているファイルを開く
2. 画面下部にあるアクションアイコンをクリックしてメニューを開く
3. 「プラグインとウィジェット」タブを選択
4. 「Design Tokens Export」などの文字列で検索すると候補として出現
5. 実行すると、JSONをzipファイルでダウンロードできる

大きな画像

またプラグインのAPIは公開されているので、それを使って自分たちのほしいものを作るというのも手です。作ったプラグインは公開することによって、チームメイトも使うことができます。

もし範囲を限定して公開したい場合は、Figmaのビジネスプラン以上の契約であれば、組織内に限定して公開することができます。

FigmaはREST APIも公開しており、そのほとんどは契約プランに関係なく利用できますが、バリアブルのAPIについてはエンタープライズプランから利用できます。その前提とはなりますが、REST APIであればWebhookや外部のサービスと連携した自動実行などもできるので紹介します。

バリアブルはファイルの中にデータを持っているので、REST API経由でファイルにアクセスし、情報を取得します。

curl -H 'X-FIGMA-TOKEN: YOUR_PERSONAL_ACCESS_TOKEN' 'https://api.figma.com/v1/files/YOUR_FILE_KEY/variables/local'

上記のようなエンドポイントにリクエストするのですが、このときにファイルキーが必要です。このキーはファイルのURLにある文字列です。なお、このファイルは先ほど書いたようにエンタープライズプランの組織下で管理されているファイルである必要があります。

大きな画像

API経由でアクセスするにはパーソナルアクセストークンが必要なため、ユーザー設定から発行する必要があります。その際に、バリアブルに対する「読み取り・書き込み」権限を有効にしたトークンを発行してください。

大きな画像

実行すると下記のようなレスポンスが返ってきます。このJSONはデザイントークンとしての結果ではないので、内容をデザイントークン向けのJSONにフォーマットする必要はあります。

{{
  "status": Number,
  "error": Boolean,
  "meta": {
    "variables": {
      [variableId: String]: {
        "id": String,
        "name": String,
        "key": String,
        "variableCollectionId": String,
        "resolvedType": 'BOOLEAN' | 'FLOAT' | 'STRING' | 'COLOR'
        "valuesByMode": {
          [modeId: String]: Boolean | Number | String | Color | VariableAlias,
        }
        "remote": Boolean,
        "description": String,
        "hiddenFromPublishing": Boolean,
        "scopes": VariableScope[],
        "codeSyntax": VariableCodeSyntax,
      }
    },
    "variableCollections": {
      [variableCollectionId: String]: {
        "id": String,
        "name": String,
        "key": String,
        "modes": [
          {
            "modeId": String,
            "name": String,
          }
        ],
        "defaultModeId": String,
        "remote": Boolean,
        "hiddenFromPublishing": Boolean,
        "variableIds": String[],
        "deletedButReferenced": Boolean,
        }
      }
    }
  }
}

ファイルキーやアクセストークンがあれば、エンドポイントを叩いて取得できるので、任意のタイミングでCLIやスクリプトを実行してバリアブルを取得することができます。GitHub ActionsなどのCIのアクションをトリガーにして実行も可能です。

またバリアブルのREST APIはPOST（書き込み）もできるので、コード側の変更をFigmaのバリアブルに反映させるということもできます。もしデザイントークンのSingle Source of Truthをコード側に寄せるようなプロジェクトであれば、そのやり方で考えてみてもよいでしょう。

GitHub Actionsとの連携についてはFigma公式のYouTubeチャンネルにデモ動画もあるのでご覧ください。

Figmaのバリアブル機能を活用することで、デザイントークンの管理がより効率的になり、デザインと開発の間で一貫性のあるコミュニケーションが可能になります。

まとめ

デザイントークンは、デザイナーとエンジニア間の共通言語として機能し、デザインと実装の一貫性を保つための重要な手段です。

デザイントークンの効率的な管理・共有のためのJSON形式やStyle Dictionaryなどのツールの活用、そしてデザイントークンの設計についてのポイントを解説しました。

さらに、Figmaの**バリアブル（Variables）**機能を活用することで、デザインデータ内でデザイントークンを効率的に管理・共有し、デザインとコードの間で一貫性を維持する方法を紹介しました。プラグインやREST APIを利用した自動化により、デザインと開発間のギャップを縮小し、プロジェクト全体の品質と効率を向上させることが可能です。ユーザーにとっても違和感なく、一体感のある体験ができるプロダクトつくりを目指しましょう。