Figmaのバリアントは、同じ部品の状態やサイズ違いをまとめ、配置後に選んで切り替えられる仕組みです。通常・無効のボタンを別々に探す代わりに、ボタンを配置してStateを選ぶ、といった使い方ができます。
作り始める前に「何を切り替えたいのか」を決めると、部品の数が増えすぎません。ここでは、状態をDefaultとDisabled、サイズをSmallとMediumに分けるボタンを例に説明します。
コンポーネント・バリアント・インスタンスの関係
| 用語 | 今回の例 |
|---|---|
| メインコンポーネント | ボタンのデザインを管理する元の部品 |
| バリアント | Default・Mediumなど、ある組み合わせの部品 |
| コンポーネントセット | 関連するバリアントをまとめた入れ物 |
| インスタンス | 実際の画面へ配置して使うボタン |
グループにまとめただけでは、状態を選ぶバリアントにはなりません。コンポーネントセットを作り、各部品へ状態やサイズの値を割り当てます。仕組みと作成操作はFigma公式のバリアントガイドで確認できます。
最初は2種類の状態から作る
- 文字と背景を含むボタンを作り、Create componentでコンポーネント化します。
- メインコンポーネントのAdd variantから、もう1つのバリアントを追加します。
- 片方を通常の色、もう片方を無効状態の色にします。
- セット側のバリアントプロパティ名をStateにします。
- 各バリアントのStateをDefault、Disabledに分けます。
すでに別々のメインコンポーネントがある場合は、それらを選んでCombine as variantsからまとめる方法もあります。通常のフレームや、画面へ配置したインスタンスを選んでいるときは、まず選択対象を確認してください。
Disabledという値は、この段階ではデザイン上の呼び名です。Webサイトやアプリで操作を無効にするコードが自動生成されるわけではありません。開発者へ渡すときは、どの条件で無効になるかも別途示します。
Sizeを追加して4つの組み合わせにする
状態の切り替えができたら、サイズの軸を追加します。この練習ではStateが2種類、Sizeが2種類なので、次の4つを用意すると確認しやすくなります。
| State | Size | 確認する見た目 |
|---|---|---|
| Default | Small | 小さい通常ボタン |
| Disabled | Small | 小さい無効ボタン |
| Default | Medium | 標準サイズの通常ボタン |
| Disabled | Medium | 標準サイズの無効ボタン |
バリアントを複製した直後は、プロパティの値も元と同じことがあります。見た目を変えただけで終わらず、StateとSizeの組み合わせを確認します。同じセットにまったく同じ組み合わせが2つあると、競合の原因になります。
実務で必ずすべての組み合わせを作る必要はありません。たとえばSmallのボタンに存在しない状態があるなら、仕様にない部品まで増やさず、利用する組み合わせを設計します。
画面へ配置して切り替えを確認する
- Assetsからボタンを画面用のフレームへ配置します。
- 配置したインスタンスを選びます。
- 右側のプロパティからStateとSizeを切り替えます。
- 文字の位置、余白、幅・高さが想定どおりか確認します。
この確認はセット内の元部品を選ぶのではなく、画面へ配置したインスタンスで行います。部品を作る場所と使う場所を分けることで、ほかの制作者が選択しやすい構成になっているかも確認できます。
文字が長くなったときは、短い「保存」だけでなく「変更内容を保存」でも見比べます。サイズを切り替えた際に文字がはみ出すなら、バリアントの設定に加えて、内部のAuto Layoutや余白も見直します。
文字やアイコンの違いまでバリアントにしない
ラベルが違うだけのボタンを大量に作ると、セットの管理が難しくなります。文字はTextプロパティ、要素の表示切り替えはBoolean、入れ子の部品の差し替えはInstance swapなど、目的に合う機能を検討します。代表的な使い分けはFigma公式のコンポーネントプロパティ解説にあります。
今回ならStateとSizeをバリアントにし、ラベルの「保存」「送信」は文字の設定で変更する構成にすると、同じ見た目の部品を重複して作らずに済みます。切り替える理由が「状態」なのか「中身」なのかを考えると整理できます。
切り替わらない・項目が出ないときの確認
- 通常のフレームやグループを選んでいないか。
- インスタンス内の文字だけを選んでいないか。
- 同じプロパティの組み合わせが重複していないか。
- Stateの値を変えただけで、各部品の見た目を同じままにしていないか。
Hoverという状態を作るだけで、マウスを重ねたときの動きまで自動で付くわけではありません。操作に応じて状態を変える場合は、PrototypeでChange toなどのインタラクションを設定します。まず手動のプロパティ切り替えを完成させてから、動きの設定を加えると確認しやすくなります。