FigmaのVariants機能でコンポーネントの状態を管理する方法

Figmaでコンポーネントを作るとき、例えばボタンのデフォルト状態やホバー状態、disabled状態など複数の状態を別コンポーネントとして作る必要がありました。

しかしVariants機能を使うと、すべて同じコンポーネントにして、その中の状態違いという管理の仕方ができます。
コンポーネントが1つにまとまりますし、状態違いがどれくらいあるのか把握もしやすくなります。

Variantsの設定方法

Variantsを設定するためには、まず複数のコンポーネントを用意します。
今回は「通常時」「ホバー時」「クリック時」「非活性時」の4種類のコンポーネントを用意しました。

状態違いのコンポーネントすべてを選択すると「Variants」パネルに「Combine as variants」ボタンが表示されます。
これをクリックしましょう。

ちなみにこのボタンが表示されないときは、選択しているオブジェクトにコンポーネント以外が混ざっています。
すべてコンポーネントになっているか確認しましょう。

クリックしてVariantsになると、コンポーネントがさらに大きなコンポーネントで囲まれたようなレイヤー状態になり、ボタンの周りに紫の点線が表示されます。

Variantsパネルの設定

サイドバーの「Variants」パネルを見ると、「Property」という項目と、先ほど設定した各コンポーネント名がタグのような見た目になって表示されます。

この1つ1つのタグのようなボタンがコンポーネントの「状態」として後ほど切り替えられる項目になります。
それぞれダブルクリックで名称変更ができ、ドラッグで並び変えも可能です。

今回は「Property」を「Type」にして、それぞれ分かりやすいように名称を変更しておきます。

Variantsの使い方

子コンポーネントを「Assets」からドラッグして追加します。

サイドバーのに先ほどの「Type」という項目が表示されています。
デフォルトは先頭の項目である「Default」状態になっています。

これをクリックすると、他の項目が表示されます。

「Hover」を選択すると、先ほどのVariantsのHoverにコンポーネントの見た目が切り替わります。

このようにサイドバーから簡単に状態の切り替えができるようになります。

状態の追加

途中で新しい状態を追加したくなった場合は、Variantsの紫の点線右下にある「＋」アイコンをクリックすると追加できます。

状態がまとまっていると、コーディングもしやすくなりますし、デザインのルール決めも複数人で把握しやすくなりますね。