Figmaでデザインを作成している時、「同じコンポーネントで、状態違いを管理したい」「サイズや色の異なるバリエーションを１つのコンポーネントで管理したい」と思うことがあります。

そんな時に使えるのが、「バリアント」です。

今回はバリアントの作り方を紹介します。

まずは通常通りコンポーネントを作ろう

通常通りデザインを作成したら、「コンポーネントを作成」でコンポーネント化します。

次に右側のメニューから「バリアントの追加」ボタンを押そう

小さくてわかりづらいですが、右側のメニューに「バリアントの追加」というボタンがあるので、それを押します。

バリアントが追加されているか確認しよう

「バリアントの追加」を押すと、同じデザインのコンポーネントがもう一つできます。
左のレイヤーと右側のプロパティに、「バリアント2」という名前で作成されます。

初めに作ったデザインは「デフォルト」として設定されます。

色とプロパティ名を変更してみよう

「バリアント2」を選択して、背景色を変更します。
その後、右側のメニューから、「バリアント2」→「お問い合わせボタン」など、好きな名称に変更します。
「デフォルト」の名称も、右側のメニューから好きなものに変更できます。

実際に切り替えて使ってみよう

バリアントを使用するには、アセットからコンポーネントを選択して配置します。
その後、右側のメニューからプロパティを切り替えます。

まとめ

Figmaでは「バリアント」を遣えば、簡単にコンポーネントの状態管理や、バリエーションの管理ができるので、とても便利です。ぜひ使ってみてください。