概要

コンポーネントセット（バリアント）とは、コンポーネントのバリエーションのことです。 例えば、実際のサイトのボタンなどでは、ホバーした際に色が変わったりなどのエフェクトがついていることが多いです。この動作前と動作後のデザインのコンポーネントをグループにしたものを、コンポーネントセット（バリアント）と呼びます。 コンポーネントセットは、主にプロトタイプの作成で使用されます。 今回はボタンを例にします。

方法

まず、通常のボタンと、マウスを乗せた際のデザインのボタンを作ります。

2つのボタンを選択します。

ツールバー中央のファイル名だったところがオブジェクトに応じたメニューに切り替わりますので、コンポーネントのアイコンのドロップダウンを開き、「コンポーネントセットの作成」を選択します。

すると、2つのボタンが1つのセットとしてコンポーネントになります。

レイヤーパネルで見てみると、セットのレイヤーにコンポーネントセットのマークがつき、中にある各ボタンのレイヤーは、それぞれがメインコンポーネントになっています。 それぞれ「btn=default」「btn=hover」など、名前をつけておきましょう。「共通名（btn）= 個別の名前」とすることでバリアントとみなされ、後にセット内の別のデザインに切り替えることが簡単にできるようになります。