Figma の新機能「Variables」の Mode が面白そうだったので遊んでみた

mk-0A0

2023.7.24

興味と関心

こんにちは、上條(mk-0A0)です。
今回はコードの記事ではなく、Figma の新機能「Variables」を触ってみた感想を書きたいと思います。

Figma の大型アップデート

6/21に Figma の大型アップデートがありました。

https://www.figma.com/ja/whats-new/

内容としては、

Dev モードの追加
Variables の追加
Prototype の進化

などがあります。
なかでも Variables が面白そうだったので、ちょこっと遊んでみました。

Variables とは

簡単に言うと Figma で使える変数です。Color・Number・String・Boolean の値に対して名前をつけて管理することができます。

Variables in Figma design store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort when building designs, managing design systems, and creating complex prototyping flows.
日本語訳（deepL）：
Figmaデザインの変数は、あらゆる種類のデザイン・プロパティやプロトタイピング・アクションに適用できる、再利用可能な値を格納します。これらは、デザインの構築、デザイン・システムの管理、複雑なプロトタイピング・フローの作成において、時間と労力の節約に役立ちます。
Guide to variables in Figma

Variables の使い方

右のサイドバーにある “Local variables” から Variables を作成します。

色と変数名を登録します。

“Fill” の横にある①のボタンから登録した色を選択できます。

今までのやり方

右のサイドバーにある “Local styles” を使って Typography や Color を設定していましたが、Variables のように Number・String・Boolean を扱うことはできませんでした。

Local styles と Variables の違い

先にも少し触れましたが、設定できる要素が異なります。

Local styles
- Typography
- Color
- Shadow
- Grid
Variables
- Color
- Number
- String
- Boolean

そして、Variables を使った Mode という機能があります。

Mode とは

Mode を追加することでコンポーネントの状態（ステート）を設定できます。
Twitter で話題になった、ポケモンが進化するサンプルをご覧になった方も多いのではないでしょうか。

https://twitter.com/yannglt/status/1671614082254876673?s=20

こちらは、3レベルあるフレーム間でポケモンを移動すると、合わせてポケモンが進化して見た目が変化します。これは、コンポーネント名と Mode で設定した名前が一致して切り替わることで実現しているようです。実装は、『Learn Variables in 4 steps (with Pokémon!) / バリアブルの使い方かんたん４ステップ』のページで解説されています。