Figmaのコンポーネント“バリアント”機能を知る

• バリアント（Variants）とは
• バリアントの作成・使用方法
• バリアントの追加
• バリアントの名前を変える
• 別のバリアントを追加する
• 補足：ローカルコンポーネントとは？
• コンポーネント機能の復習
• カードを4つにしよう

バリアント（Variants）とは

Figmaのコンポーネント機能にはバリアント（Variants）という仕組みもあります。

Figma公式のヘルプでは、バリアントについて以下のように説明されています。

バリアントなら、類似するコンポーネントを単一のコンテナにグループ化して整理することができます。これにより、コンポーネントライブラリが簡素化され、誰でも簡単に必要なものを探せるようになります。

引用元：バリアントの作成と使用 – Figma Learn

簡潔に言うなら、バリアントはコンポーネントにバリエーションを登録する機能です。

例えば、ボタンデザイン。
そのボタンの役割に合わせて、色違い・サイズ違いなどで使われることがありますよね。
マウスカーソルを重ねた時（:hover）や、クリックした時（:active）などで変化することもあります。

こうしたデザインバリエーションを、1つずつコンポーネントとして登録するとすごい数になります。
インスタンスを挿入したいときに探しにくく、あとから違う色やサイズに変えたいときも面倒です。

バリアント機能を使うと、1つのコンポーネントの中にバリエーションを作り、ワンクリックで切り替えができるようになります。

バリアントの作成・使用方法

バリアントの追加

ここまで作ってきたカードだとイメージしにくいので、ボタンを新しく作ってみましょう。
長方形シェイプ+テキストでシンプルに作ります。

そして、コンポーネントを作成します。

メインコンポーネント化したボタンデザインを選択すると、バリアントの追加が使えるようになります。
ツールバーの中央あたり、◇の中に+が入ったアイコンをクリック。

Component1の表示が変わります。
グループのような、点線で囲われた表示になりました。

元々Component1だったものが“デフォルト”、その下に追加されたデザインは“バリアント2”と表記されています。

“バリアント2”の中にある、長方形シェイプの塗色を変えてみましょう。

そして、左サイドバーのアセットパネルからインスタンスを挿入します。

デフォルトのオレンジ色の方が入りましたね。

右サイドバー、デザインパネルの方を見てください。
プルダウンでバリアントの選択ができるようになっています。

バリアントの名前を変える

バリアントは設定できましたが、表示がプロパティ1-デフォルト……。
何のことなのか、全然わかりませんよね。

バリアント名やプロパティ名の設定は、メインコンポーネントの方にある“現在のバリアント”という項目で出来ます。
左側はバリエーションの種類です。今回の場合だと「色」や「color」などでしょうか。
右側にはバリエーションの値（具体的なバリエーション名）を設定します。

メインコンポーネントを変えると、インスタンスの表示も変わります。

別のバリアントを追加する

ここまでで作ったのは、色のバリエーション。
更にサイズやボタンの状態など、別のバリエーションを追加することもできます。

バリエーションのプロパティを増やしたい場合も、使用するのはメインコンポーネントです。

メインコンポーネント（コンポーネントグループ）を選択状態にします。
プロパティの横にあるプラスアイコンから、バリアントのプロパティを追加して下さい。

大きさのバリエーションを作ります。
名前をサイズ、値をLargeにしてプロパティを作成してみましょう。

コンポーネントグループの下にあるプラスアイコンから、バリアントを追加。
サイズの値を新規追加して、文字・長方形シェイプを少し小さくした“Normal”を作成します。

これで大きさのバリエーションが出来ました。
コンポーネントグループの名称もわかりやすいものに変えたら完成です。

補足：ローカルコンポーネントとは？

今回作成したコンポーネントは、ローカルコンポーネントに登録されています。
ここでの“ローカル”とは、今使っているデザインファイルのことを指します。
新規デザインファイルを作成した場合、そちらでは使えないわけです。

Figmaではスタイルやコンポーネントを公開し、別のファイルでも活用したり、チームの人が使えるようにする“ライブラリ”機能もあります。この機能を使いやすくするために、コンポーネントやバリアント、スタイルなど、デザインに必要なルール・パーツを整理したファイルを、デザインとは別に作るケースが多いです。こうした場合、コンポーネントやバリアントの命名ルールなども作られますね。

ただし、このライブラリは無料版では制限されている機能になります。
気になる方は、公式のチュートリアル動画を見たりして、イメージを掴んでおくと良いかもしれません。

コンポーネント機能の復習

カードを4つにしよう

度々登場している、カードデザインを使用したデザインイメージ。

こちらに近づけるために、カードを4つに増やしてみいましょう。
コンポーネント機能（インスタンス）を使って、カードを横並びに配置します。

メインコンポーネントは4つの中に含めても、別の箇所にまとめておいても、どちらでも構いません。

インスタンスを作って、画像を変える・文字を打ち替るのは簡単にできますね。
ちょっと悩むのが、オレンジ色の星の数の変更ではないでしょうか。

星の数の変更は、以下のような方法でできます。

• A）表示/非表示を切り替える
• B ）バリアントを使う

A）表示/非表示を切り替える

一番簡単な方法はメインコンポーネントではStarシェイプを最大個数用意しておいて、インスタンスごとに表示/非表示を切り替えることです。

B ）バリアントを使う方法

バリアントを使って、星の数を切り替えることもできます。

とは言え、星の数だけでカードのバリアントを増やすのは、ちょっと大仰。
そんな場合は、コンポーネントを入れ子にする方法もあります。

星部分のみでコンポーネント化（バリアント設定）→インスタンスをカード内に配置するとスッキリします。

ABどちらの方法が良いか、どこまでをコンポーネントとして切り分けるか……「これが正解」と言い切れる方法はありません。
これは、デザイン全体を作る時の作業のしやすさ、社内・チーム内でのルールなど様々な要因があるためです。

自分一人で作業をする時に、いろいろな方法を試してみてください。
そうすることで、状況にあわせて柔軟に対応できるようになります。