用2023年6月22日更新的Figma最新功能,实现按钮控制图层显隐的交互。
实现效果
步骤
1. 创建本地变量
点击右侧面板中的Local variables
弹出变量面板,点击底部Create variable
按钮,创建一个Boolean布尔变量。
本案例中,我需要分别控制国控站、省控站、微观站三个站点的显隐,所以需要设置三个布尔变量。
2. 给变体添加变量
先制作一个变体组件,里面需要包含彩色按钮和灰度按钮两个状态。
制作变体的步骤就略过了,相信大家都已经早都会做变体了。
选中彩色按钮,在右侧面板中,点击展开交互面板,再点击交互面板×
按钮旁的+
按钮,新增一个Set variable
动作,然后选择刚刚添加的变量。
如果默认布尔是true
,这里要改成false
。因为前面我们设置变量的时候,布尔设置了true
,现在增加了一个动作后,需要转换为false
。
然后再选中灰度按钮,同样的步骤,但是变量最后要选择为true
,这样,这两个按钮就可以互为相反的控制状态了。
3. 给图层绑定变量
现在只是对按钮添加了变量,而要对我们需要显隐的图层来说,也需要绑定同一种变量。
这时就需要回到设计图,选中需要由这个变量控制的所有图层,找到右侧Layer
模块,右键(重点是右键) 点击百分比后面的“小眼睛”图标,就会弹出所有的布尔变量,选择对应的一个变量就好了。
比如,在“国控点”变体中绑定的是show-guokong
这个变量,那在设计图中,也要对所有“国控点”标记绑定show-guokong
这个变量。
最后,预览一下,选中设计图的Frame,按Shift+空格
,就可以对当前画板进行预览。
说明
- 步骤2和步骤3的顺序可以互换。
- 给图层添加布尔时需要右键才能触发变量选择面板(这个很反直觉,因为整个右侧面板都没有其他需要右击才能触发的动作)。