【Figma技巧】布尔变量控制图层显隐

news2024/9/28 3:27:36

用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+空格,就可以对当前画板进行预览。

说明

  1. 步骤2和步骤3的顺序可以互换。
  2. 给图层添加布尔时需要右键才能触发变量选择面板(这个很反直觉,因为整个右侧面板都没有其他需要右击才能触发的动作)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/688373.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

从0开始Jmeter接口测试实战

在之前的文章中给大家介绍过接口测试文档和接口测试用例示例,本文基于Jmeter工具给大家介绍一下如何实现接口测试用例:包括发起Http请求,绕过登陆,验证响应。JMeter是Apache组织开发的基于Java的压力测试工具。具有开源免费、框架…

Python|Pyppeteer操作浏览器,弹出文件选择框,实现自动选择“指定文件”(14)

前言 本文是该专栏的第14篇,结合优质项目案例持续分享Pyppeteer的干货知识,记得关注。 使用pyppeyeer操作浏览器的时候,可能有时候会遇到这样的情况,如下图所示: 通过程序脚本自动点击某个按钮之后,触发一个弹出框,需要输入对应的文件路径。经验丰富的同学,可能会想到…

深入浅出 - 单例模式

博主介绍: ✌博主从事应用安全和大数据领域,有8年研发经验,5年面试官经验,Java技术专家✌ Java知识图谱点击链接:体系化学习Java(Java面试专题) 💕💕 感兴趣的同学可以收…

【MySQL】幽深不可测,登此方觉心

详解Mysql安装教程 一、MySQL基础 1、MySQL是什么? MySQL是一种用关系型数据库管理系统的软件。它是一种开源数据库,可以利用它来存储、管理和访问各种类型的数据。MySQL可用于多种应用程序,包括网站、电子商务系统、移动应用程序、企业级应用程序等…

Clickhouse物化视图原理和使用详解

前言 ClickHouse广泛用于用户和系统日志查询场景中,主要针对于OLAP场景,为业务方提供稳定高效的查询服务。在业务场景下,数据以不同的格式、途径写入到clickhouse。用传统JOIN方式查询海量数据,通常有如下痛点: 每个查询的代码冗…

【Java】ConcurrentHashMap1.8源码保姆级解析

目录 ConcurrentHashMap 1.8的优化 初始化流程 扩容流程 读取数据流程 计数器的实现 ConcurrentHashMap 1.8的优化 存储结构的优化 数组链表 -> 数组链表红黑树 写数据加锁的优化 扩容的优化(协助优化) 计数器的优化 LongAddr -> Cell[] 分…

力扣算法练习(二)

主要参考自力扣官网解法 1.最长回文子串(5) 给你一个字符串 s,找到 s 中最长的回文子串。 如果字符串的反序与原始字符串相同,则该字符串称为回文字符串。 示例 1: 输入:s "babad" 输出:"bab"…

【Java】JVM学习(七)

JVM调优 堆空间如何设置 在分代模型中,各分区的大小对GC的性能影响很大。如何将各分区调整到合适的大小,分析活跃数据的大小是很好的切入点。 活跃数据的大小:应用程序稳定运行时长期存活对象在堆中占用的空间大小,也就是Full …

Git安装及使用图文教程详解(附带安装文件)

Git安装及使用图文教程详解(附带安装文件) 原创:丶无殇  2023-06-26 文章目录 下载安装下载安装验证安装成功版本查看 基础指令Git常用指令【首次必须】设置签名用户、邮箱1.初始化本地仓库2.查看本地库状态3.创建文件4.添加文件至暂存区5…

【DCT变换】Python矩阵运算实现DCT变换

一、前言 DCT变换(离散余弦变换) 是数字图像处理过程中广泛采用的一种操作,用于将空域的图像转换为频域表示,从而能够更有效地进行压缩、滤波和特征提取等处理。它在许多应用领域中发挥着重要的作用,尤其在图像和视频…

感知机(Perceptron)的原理及实现

1.感知机(Perceptron)的原理及实现 声明:笔记来源于《白话机器学习的数学》 感知机是接受多个输入后将每个值与各自权重相乘,最后输出总和的模型。 单层感知机因过于简单,无法应用于实际问题,但它是神经网络…

一文让你搞定接口测试

一、什么是接口测试? 所谓接口,是指同一个系统中模块与模块间的数据传递接口、前后端交互、跨系统跨平台跨数据库的对接。而接口测试,则是通过接口的不同情况下的输入,去对比输出,看看是否满足接口规范所规定的功能、…

二叉树知识小结

思维导图: 一,树 树,这是一种对计算机里的某种数据结构的形象比喻。比如这种: 这种: 这种: 这几种都是树形结构。在百度百科中对树形结构的定义如下: 树形结构指的是数据元素之间存在着“一对多”的树形关系…

津津乐道设计模式 - 建造者模式详解(教你如何构造一个专属女友)

🌷 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志 🎐 个人CSND主页——Micro麦可乐的博客 🐥《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程,入门到实战 🌺《RabbitMQ》…

接口测试断言详解(Jmeter)

接口测试是目前最主流的自动化测试手段,它向服务器发送请求,接收和解析响应结果,通过验证响应报文是否满足需求规约来验证系统逻辑正确性。接口的响应类型通过Content-Type指定,常见的响应类型有: • text/html &…

Android Jetpack Compose之轻松添加分隔线:Divider组件

引言: 在构建用户界面时,有效地组织和分隔内容是至关重要的。这就是Android Jetpack Compose的Divider组件派上用场的地方。在这篇博客中,我们将详细了解Divider组件的功能和用法,并通过示例展示如何将其融入您的Compose UI。 Je…

自动化测试和性能测试面试题精选

自动化测试相关 包含 Selenium、Appium 和接口测试。 1. 自动化代码中,用到了哪些设计模式? 单例模式工厂模式PO模式数据驱动模式 2. 什么是断言? 检查一个条件,如果它为真,就不做任何事,用例通过。如果…

8年资深测试总结,自动化测试成功实施,你不知道的都在这...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 什么项目&#xf…

python:并发编程(二十七)

前言 本文将和大家一起探讨python并发编程的实际项目:Locust性能测试(篇一,共N篇),系列文章将会从零开始构建项目,并逐渐完善项目,最终将项目打造成适用于高并发场景的应用。 本文为python并发…

分支定价算法求解VRPTW问题(代码非原创)

参考文献:微信公众号“程序猿声”关于分支定价求解VRPTW的代码 A tutorial on column generation and branch-and-price for vehicle routing problems 框架 对于VRPTW问题,先做线性松弛,调用列生成算法(一种解决大型线性规划问…