2023年6月22日にアップデートされたFigmaの最新機能を利用して、ボタンコントロールレイヤーの可視性のインタラクションを実現します。
効果を達成する
ステップ
1. ローカル変数を作成する
右側のパネルのLocal variablesポップアップ変数パネルをクリックし、Create variable下部にあるボタンをクリックしてブール変数を作成します。
この場合、国家制御ステーション、地方制御ステーション、顕微鏡ステーションの 3 つのステーションの可視性をそれぞれ制御する必要があるため、3 つのブール変数を設定する必要があります。
2. バリアントに変数を追加する
まず、カラー ボタンとグレースケール ボタンの 2 つの状態を含む必要があるバリアント コンポーネントを作成します。
バリアントを作成する手順は省略します。バリアントの作成方法は誰もがすでに知っていると思います。
右側のパネルで色付きのボタンを選択し、クリックしてインタラクション パネルを展開し、インタラクション パネル×のボタンの隣のボタンをクリックしてアクション+を追加しSet variable、追加した変数を選択します。
デフォルトがブール値の場合はtrue、ここで変更しますfalse。前に変数を設定したときは Boolean が設定されておりtrue、アクションを追加した後は に変換する必要があるためですfalse。
true次に、グレースケール ボタンを選択します。手順は同じですが、 2 つのボタンが反対の制御状態になるように、変数を として選択する必要があります。
3. 変数をレイヤーにバインドする
ここではボタンに変数を追加するだけですが、表示または非表示にする必要があるレイヤーに同じ変数をバインドする必要もあります。
このとき、設計図に戻り、この変数で制御する必要があるすべてのレイヤーを選択し、右側のモジュールを見つけて右クリックし（キーポイントは右ボタンです）、「小さい」ボタンをクリックする必要がLayerあります。パーセンテージの後ろにある「目」アイコンをクリックすると、すべてのブール変数がポップアップ表示され、「対応する変数は問題ありません」を選択します。
たとえば、この変数が「National Control Point」バリアントにバインドされている場合是show-guokong、設計図面では、show-guokongこの変数もすべての「National Control Point」マーカーにバインドされている必要があります。
最後に、プレビューするには、設計図面のフレームを選択し、 を押してShift+空格現在の図面ボードをプレビューします。
説明する
- ステップ 2 と 3 の順序は入れ替えることができます。
- ブール値をレイヤーに追加するには、右クリックして変数選択パネルをトリガーする必要があります (右側のパネル全体には、右クリックでトリガーする必要がある他のアクションがないため、これは直観に反します)。