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

URL: https://webrandum.net/figma-variants/
公開日: 2021-12-24
更新日: 2021-12-23
カテゴリー: デザイン
タグ: Figma
出典: Webrandum（著者: サイトウ マサカズ）

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

しかしVariants機能を使うと、すべて同じコンポーネントにして、その中の状態違いという管理の仕方ができます。

コンポーネントが1つにまとまりますし、状態違いがどれくらいあるのか把握もしやすくなります。

## Variantsの設定方法

Variantsを設定するためには、まず複数のコンポーネントを用意します。

今回は「通常時」「ホバー時」「クリック時」「非活性時」の4種類のコンポーネントを用意しました。

![ボタンの各状態コンポーネント](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_1-6.png)

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

これをクリックしましょう。

![「Combine as variants」をクリック](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_2-6.png)

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

すべてコンポーネントになっているか確認しましょう。

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

![Variantsの状態](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_3-6.png)

### Variantsパネルの設定

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

この1つ1つのタグのようなボタンがコンポーネントの「状態」として後ほど切り替えられる項目になります。

それぞれダブルクリックで名称変更ができ、ドラッグで並び変えも可能です。

![状態の設定](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_4-5.png)

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

## Variantsの使い方

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

サイドバーのに先ほどの「Type」という項目が表示されています。

デフォルトは先頭の項目である「Default」状態になっています。

![デフォルト状態](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_6-5.png)

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

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

![ホバー状態](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_7-4.png)

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

## 状態の追加

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

![状態の追加方法](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_5-5.png)

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