Figmaのバリアブル機能を使ったデザイントークンの管理方法について

本投稿は TECOTEC Advent Calendar 2024 の12日目の記事です。

こんにちは、決済認証システム開発事業部の黒田です。普段は、主にUIUXデザインを担当しております。今回は、Figmaのバリアブル機能を使ったデザイントークンの管理方法についてご紹介したいと思います。

バリアブル機能とは

バリアブル（Variable）は直訳すると「変数」という意味になります。バリアブル機能を使うことで、「カラー、数値、文字列、ブーリアン」を変数として定義することができ、Figmaのプロジェクト内でバリアブルを用いてプロトタイプを作成することができます。

デザイントークンとは

デザイントークンとは、デザインシステム内の最小単位になります。デザイントークンの管理方法は様々なやり方がありますが、今回はGlobal TokenとAlias Tokenで分ける方法をご紹介します。

Global Tokenはカラーコードなどの値が定義されたトークンで、Alias Tokenはボタンや文字の色など、どのパーツ・どの状況で使用するかの意味を持たせるトークンになります。

バリアブル機能を使ったデザイントークンの管理方法

では、実際にバリアブルにトークンを設定していきます。 Figmaの右サイドバーから「ローカルバリアブル」を選択すると、バリアブルの設定ができる「バリアブルモーダル」が表示されます。

バリアブルの新規作成は、バリアブルモーダル内の「バリアブルを作成」から「カラー、数値、文字列、ブーリアン」を選択することで作成できます。

バリアブルカラーを作成し、複数選択した状態で「選択した状態でグループを新規作成」をクリックすると、バリアブルをグループ化することができます。

バリアブルをグループ化した後、バリアブルモーダルの左上のセレクトボックスから選択できるコレクションの名前を「Global Token」と命名します。

今回は、Global Tokenとして、Color/GrayとColor/Blueでグループ分けし、名前を100~900の数値で区分、それぞれカラーコードを値として設定しました。

次に、別のコレクションを追加し、「Alias Token」とします。

今回Alias Tokenの名前は、「Button-Primary」「Button-Secondary」「Text-Primary」「Text-Secondary」と、ボタンとテキストで使用するものとして命名しました。

Alias Tokenの値は、先ほど定義したGlobal Tokenをライブラリから適用します。そうすることで、Global Tokenの値を変更すると、Alias Tokenの値も一括で変更できるようになります。

実際のコンポーネントにAlias Tokenのカラーを適用する際は、コンポーネントでカラーを適用したいオブジェクトを選択し、右サイドバーの「塗り」>「ライブラリ」>「Alias Token」からカラーを選択することで適用できます。

今までのFigmaの機能だとGlobal TokenとAlias Tokenを紐づけて定義することができなかったので、バリアブル機能が導入されてから管理がしやすくなりました！

実装面でもAlias Tokenのような変数を使うことで、「どのパーツ・どの状況でどの色を使用するべきか」などわかりやすくなるので、プロジェクト内で話し合ってデザイントークンを構築するのが理想だと思います！

バリアブル機能の汎用性

今回は主にFigmaのバリアブル機能を用いたデザイントークンの管理方法についてご紹介しましたが、有料プランにするとバリアブルモードを使うことでライトモードとダークモードの切り替えも可能です。また、Figmaのコンポーネントのバリアント機能とうまく組み合わせると、バリアブルモードの切替によってUIパーツの切り替えもできるようになります！

他にも、インタラクションにバリアブルを適応することでより高度なプロトタイピングを作成することも可能です。

バリアブル機能を使えば、Figma上でできることがまだまだあるかと思いますので、興味のある方はぜひ試してみてはいかがでしょうか。最後までご覧いただき、ありがとうございました！

[参考] help.figma.com