Figmaのバリアブルの使い方とデザイントークン設定方法
Figmaのバリアブルって何？
2023年の7月から出た比較的新しめの機能です。
再利用可能であり、複雑なデザインシステムも管理することがしやすくなっています。
今も進化していく途中のようですが、
4項目の設定が可能となっています。(2024年9月時点)
- Color (色)
- Number (数字)
- String (文字)
- Boolean (true / false、真 / 偽の2つの値をとる )
例えば、有料プランの場合、
- デバイスサイズごとに、余白のサイズを切り替え
- ダークモード/ライトモードで色を切り変え
- 複数言語ごとに表示を切り替え
といった設定も可能です。
Figmaのバリアブルとスタイルの違いは？
元々あった設定項目であるスタイルと何が違うの？ということですが、
公式サイトと公式動画によると、
バリアブルのみの特徴として、
- バリアブルから、他のバリアブルやスタイルを定義可能
- 複数のモードでのテーマ設定が可能
- 使用方法を指定するための、スコープ設定が可能
- コード構文の設定が可能
- 単一の値のみ扱う 例) #ffffff
スタイルのみの特徴として、
- 複数の値も扱うことが可能 例)グラデーションの値
となっています。
つまり、どちらでも値の管理はできるけれど、
- 条件ごとのバリエーションを用意したい
- 1つの値を変え、それを参照する部分も一括で反映したい
といった場合は、バリアブルを使った方が結局管理しやすい、
ということが言えると思います。
Figmaのバリアブルの基本的な設定方法 〜色〜
色や余白などを決めたファイルを用意したら、バリアブルをつくっていきます。
バリアブル機能それぞれの名称
Figmaの画面右にある Local variables(バリアブル)の項目をクリックして出る画面の名称は、それぞれ下記のようになっています。
バリアブルの基本的な設定方法
まず、色を例とした基本のバリアブルのつくり方についてです。
こちらの公式動画を参考にしました。
1 バリアブルの名前と値を定義
最初に、Figma画面右にある Local variables をクリックしたら、
タブからColorを選びます。
下部の「+Create Variable」から新規項目をつくり、
名前と値をどんどん付け足していきます。
2 新規グループを作成
同じグループにしたい項目を全て選択し、
右クリックで新しいグループを作成します。
名前は、 / を入れると階層を分けることができます。
例えば、Color/Grayとすると、
左メニュー項目では、Color の下層にgrayという表示になります。
3 別のバリアブル登録方法
他の方法でも同様の登録をすることができます。
色を直接クリックして、Variableの項目から、例えばColor/Gray/50と書いても、
同じように登録することが可能です。
Figmaのバリアブルとデザイントークン
ここまで定義した基本の色情報は、デザインに直接使われることはなく、
デザイントークンという方法に基づいて、
さらに設定を追加していきます。
デザイントークンとは？
デザイントークンとは、デザインシステムにおける役割の中で、
最小単位の構成にあたります。
(各コンポーネントを分解していったら行き着く先？といったイメージ)
例えば、「色」「フォントサイズ」「余白」など、それぞれの数値、値に役割を与えることで、だれがみてもわかりやすく、管理がしやすくなることを目的としています。
詳しい仕分け方法については奥が深すぎるので
また改めてアウトプットをしたいと思いますが、
デザイントークンは、ざっくりとこのような階層になっています。
| 1 | value | もしくは Raw Value。 実際の値。 例) #333333 , rgba(255, 255, 248, 1) |
| 2 | Primitive Token | もしくは Global Token、Base Tokenとも呼ばれる。 値自体を含むトークンのこと。 例) Pink 400 , Neutral 200 |
| 3 | Semantic Token | もしくは Alias Token、Brand Tokenとも呼ばれる。 「ボタンの背景色」や「エラーメッセージの文字色」など、 どのような場面に使うか、特定の意味を持たせたトークンのこと。 例) Color-cta |
| 3 | Component specific Token | ３より、さらに具体的に用途を表したトークン のこと。 例) Color-background-button-primary-Hover |
Figmaの色のバリアブル設定
この階層分けを頭に入れつつ、
さきほど定義したPrimitive Token( Neutral 200など)を管理していきます。
Primitive Token
まず、バリアブル画面上部の三点リーダーからRenameを選択し、
collection 1の名前を、「Primitive」に変更します。
Semantic Token
次に、先ほどの三点リーダーからCreate collectionを選択し、
新規のCollectionの名前を「Tokens」とします。
「Tokens」のなかに、テキストの色、ボーダーの色など、
用途の意味に基づいたSemantic Tokenを定義していきます。
全部定義したら、同じグループにしたい項目を全選択し、右クリックで
新しいグループを作成します。
例として、「Text」のグループ、「Border」のグループ、と指定した場合下記のようになります。
Semantic Token を設定するメリット
なぜ段階分けして管理するのか？ということですが、
分けるメリットとして、たとえば、
- Text-secondary やBorder-primaryの値 Color/Gray/700
- Color/Gray/700 の値 #454551
としたとき、
Color/Gray/700 の色の値だけ変えれば、
それを指定しているText-secondary やBorder-primaryは
一括で変更することができます。
Figmaのバリアブルの基本的な設定方法 〜数値〜
ここまで、色のバリアブルの設定をしましたが、
余白などでも同じです。
バリアブルの左上で「Primitives」のCollectionを選択します。
画面下の＋Creative variables から# Number を選び、
Primitive Tokenとなる、数値の値と名前を設定していきます。
すべて追加後、まとめたい項目を全選択したら、
右クリックから新規グループを作成し、名前をSpacing とします。
次に、Semantic Tokenを定義します。
左上でToken を選択したら、下部の「＋Creative variables」を押して# Number を選択し、
xs、sなど余白の大きさ別に、さきほど設定した値を指定していきます。
すべて設定し終わったら、先ほど同様に、
まとめたい項目を全選択、右クリックで、新規グループを作成し名前を設定します。
Figmaのバリアブルとモード変更
こちらは有料プランのみなので詳しくは省きますが、
ライトモード/ダークモードなど、
モードごとに色や余白などの設定を指定することも可能です。
既存の列の名前を「Light」として、右の方にある＋をクリックして列を追加します。
新規の列の名前を「Dark」としたら、Darkの場合の色をそれぞれ指定していきます。
設定後、モードを変えたいフレームを選択したら、
Figma画面右にあるLayerの設定アイコンから、Change Variable modeを選び、
Dark / Lightを切り替えます。
Figmaのバリアブル まとめ
以上、デザイントークンの考え方に基づいて、
Figmaのバリアブルの基本についてご紹介しました。
トークンを作成するのに、
手動以外の方法としてプラグインを使った方法もあるので、
そちらも別の機会にあらためて深めていけたらと思います。
最後までご覧いただき、ありがとうございました！
