[Figma Skills] Boolean Variables Control Layer Visibility

Use the latest function of Figma updated on June 22, 2023 to realize the interaction of buttons controlling the display and hiding of layers.

achieve effect

step

1. Create a local variable

Local variablesClick the pop-up variable panel in the right panel , and click Create variablethe button at the bottom to create a Boolean variable.

In this case, I need to control the visibility of the three stations of the national control station, the provincial control station, and the microscopic station respectively, so I need to set three Boolean variables.

2. Add variables to variants

First make a variant component, which needs to contain two states of color button and grayscale button.

The steps of making variants are skipped, I believe everyone already knows how to make variants.

Select the colored button, in the right panel, click to expand the interaction panel, then click the button ×next to the button in the interaction panel +, add an Set variableaction, and then select the variable you just added.

If the default is Boolean true, change it here false. Because when we set the variable earlier, Boolean was set true, and now after adding an action, it needs to be converted to false.

Then select the grayscale button, the same steps, but the variable must be selected as true, so that the two buttons can be in opposite control states.

3. Bind variables to layers

Now we just add variables to the button, but we also need to bind the same variable to the layer we need to show or hide.

At this time, you need to go back to the design drawing, select all the layers that need to be controlled by this variable, find the module on the right Layer, right click (the key point is the right button) and click the "small eye" icon behind the percentage, all Boolean variables will pop up, select A corresponding variable is fine.

For example, if this variable is bound in the "National Control Point" variant 是show-guokong, then in the design drawing, show-guokongthis variable should also be bound to all "National Control Point" markers.

Finally, to preview, select the Frame of the design drawing and press Shift+空格to preview the current drawing board.

illustrate

1. The order of steps 2 and 3 can be interchanged.
2. Adding a Boolean to a layer requires right-clicking to trigger the variable selection panel (this is counter-intuitive, since the entire right-hand panel has no other actions that require a right-click to trigger).