FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える

ペンとろ
質問: コンポーネントで設定で表示を切り替えられるようにしたい
下図の図形のコンポーネントを作成したいのですが、設定で、左右の矢印の表示、非表示を切り替えられるようにしたいのです。 そもそも実現できるのでしょうか?実現できる場合は、どのように設定すれば実現できますか?
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像1


コンポーネントでオブジェクトの表示、非表示を切り替える場合はブール地のプロパティを作成して、バリアブルプロパティに割り当てることで 実現できます。設定手順を紹介します。

コンポーネントの作成

初めにコンポーネントを作成します。コンポーネントにしたい要素を選択し、右クリックします。 下図のポップアップメニューが表示されますので、[コンポーネントを作成]の項目をクリックします。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像2

コンポーネントが作成され、選択枠の色が紫色になりました。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像3

ブール値のプロパティの追加

作成されたコンポーネントを選択し、右側のパネルのプロパティの横の[+]のボタン(プロパティを作成ボタン)をクリックします。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像4

ボタンをクリックすると、ドロップダウンリストが表示されます。[ブール値]の項目をクリックします。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像5

[プロパティを作成]のダイアログが表示されます。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像6

[名前]のテキストボックスの項目に"左矢印"と入力します。入力後[プロパティを作成]ボタンをクリックします。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像7

[プロパティ]の項目に[左矢印]の項目が追加されました。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像8

同じ操作を繰り返して、[右矢印]のプール値のプロパティを追加します。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像9

バリアブルプロパティの適用

コンポーネントをダブルクリックして。コンポーネント内の要素の左の矢印のオブジェクトを選択します。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像10

オブジェクトが選択された状態で、右側のパネルの[外見]の項目の[バリアブルプロパティを適用]のボタン(下図参照)をクリックします。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像11

クリックするとドロップダウンダイアログが表示されます。コンポーネントのプロパティが表示されます。[左矢印]の項目をクリックして、 左の矢印に[左矢印]のプロパティを適用します。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像12

バリアブルプロパティが適用されると下図の表示になります。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像13

続いて、コンポーネント内の右の矢印のオブジェクトをクリックして選択します。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像14

先ほどと同様に、右側のパネルの[外見]の項目の[バリアブルプロパティを適用]のボタン(下図参照)をクリックします。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像15

クリックするとドロップダウンダイアログが表示されます。コンポーネントのプロパティが表示されます。[右矢印]の項目をクリックして、 右の矢印に[右矢印]のプロパティを適用します。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像16

バリアブルプロパティが適用されると下図の表示になります。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像17

プロパティの切り替え

コンポーネントを選択し、右側のプロパティの項目の[プロパティを編集]ボタンをクリックします。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像18

ダイアログが表示されますので、値のスイッチをクリックして[False]に変更します。 FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像19

値が[False]になると矢印が非表示になりました。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像20

同様に右矢印のプロパティの値をフォルスにすると、矢印が非表示になります。
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像21
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像22
FigmaでBooleanプロパティを作成してレイヤーの表示・非表示を切り替える:画像23

プロパティ設定でコンポーネント内の要素の表示非表示を切り替えられるようになりました。

AuthorPortraitAlt
著者
iPentecのメインデザイナー
イタリア好き。Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。
作成日: 2026-08-29