他の人から受け取ったコンポーネントを使ったところ、
コンポーネントのインスタンスを選択して右クリックすると、[バリアントの変更]という項目が表示されて、
簡単にアイコンが変えられるのですが、自分で作る方法はどうすればよいのでしょう？
便利なので僕も使いたいです。
Figmaでバリアントを作成して利用する方法を紹介します。
はじめにバリアントを作成します。フレームを3つ作成して以下の図形を用意しました。
フレームの名前を左から[Icon/Home][Icon/Search][Icon/Settings]としています。
フレームを選択して右クリックします。ポップアップメニューが表示されますので[コンポーネントを作成]の項目をクリックします。
フレームがコンポーネントになりました。(紫色の枠になります)
同じ手順を繰り返して、3つのフレームをコンポーネントにしました。
作成した3つのコンポーネントをドラッグするか、左側の[レイヤー]パネルで選択します。
右側のパネルの[バリアントとして結合]のボタンをクリックします。
バリアントとして結合されました。紫色の点線でコンポーネントが囲まれた表示になります。
以上でバリアントの作成は完了です。
作成されたバリアントを利用します。別のフレームを作成して、下図の枠を描画します。
左側のパネルで[アセット]のタブをクリックします。下図の表示に切り替わります。
[このファイル内で作成]の項目をクリックします。
ページが表示されます。今回は[Page 1]で作業していますので[Page 1]をクリックします。
[Icon]の項目が表示されますのでクリックします。
クリックすると下図の詳細ウィンドウが表示されます。[インスタンスを挿入]のボタンをクリックします。
インスタンスが挿入されキャンバス上に配置されました。
インスタンスをドラッグして枠の中に配置します。
フレーム全体を選択し右クリックし、ポップアップメニューの[コンポーネントを作成]の項目をクリックします。
フレームがコンポーネントになりました。
作成したコンポーネントをコピーしてインスタンスを配置します。
ダブルクリックして内部のアイコン部分のコンポーネントを選択します。
右クリックします。[バリアントの変更]の項目が表示されます。クリックすると[プロパティ1]のサブメニューが表示され、さらにクリックすると、
[Home][Search][Settings]の項目が表示されます。
クリックして別の項目[Settings]を選択します。
コンポーネントの内部のアイコンが変化します。
先の手順でバリアントは利用できましたがプロパティ名の[プロパティ1]をわかりやすい名前に変更します。
バリアントの枠を選択します。右側のパネルに[プロパティ]の項目があります。クリックします。
テキストボックスが編集状態になりますので、わかりやすい名前に変更します。[プロパティ1]から[アイコン]に変更します。
[バリアントの変更]項目をクリックすると[アイコン]のメニューに変化します。
バリアントのプロパティ名を変更できました。
枠を含めてバリアントにしても問題ないです。今回は、枠の形状が変わった場合でも対応できるよう、アイコンの図形部分のみでバリアントにしています。
