Figma入门-原型交互

Figma入门-原型交互

前言

在之前的工作中,大家的原型图都是使用 Axure 制作的,印象中 Figma 一直是个专业设计软件。

最近,很多产品朋友告诉我,很多原型图都开始用Figma制作了,并且很多组件都是内置的,对各种原型图的制作极其友好,只需熟悉一下基本的操作即可上手。

所以我打算一探究竟,听说的终究是听说,自己上上手才是真的。

所以接下来的文章我打算记录从0开始上手 Figma 的过程。

本系列直接从实操开始,有所错漏或者操作错误,还请大家指正。

如果有更高效的使用方式,也欢迎交流。

本篇我们来讨论原型交互。

原型交互

我们用5个画框(演示1、演示2、用户详情、切换叠加、提示)来做简单的交互,让大家了解交互动作;

1.导航到

跳转到另一个页面。我们在演示1中的第一个圆添加点击操作,选择导航到的动作;

也可以去设置它的动画和动画的曲线以及持续时间。

当我们设置好后,在预览时点击就会跳转到演示2了

2.打开链接

输入要打开的链接即可,点击时就会跳转到链接

3.打开叠加

当你使用打开叠加功能时,你实际上是在当前屏幕或框架的上方添加一个新的框架作为叠加层。

这个叠加层可以是模拟弹窗、菜单、工具提示等元素,它不会替换掉当前的屏幕,而是覆盖在当前屏幕上。

他和导航到的区别就是,导航到是替换页面,叠加是吧页面叠在当前页面上。

我们给第三个圆添加打开跌跤的交互动作,在位置设置这里可以用它给定的方位也可以选择手动后自己去拖动,拖到自己想要的位置,勾选上背景颜色后设置就更能模拟弹窗

4.交换叠加

交换叠加功能允许你在保留原始叠加设置的同时,将一个叠加替换为另一个叠加。

这意味着新的叠加会覆盖在原来叠加的位置,而不是创建一个新的叠加层;

适用于菜单选择一个选项后,内容被替换为另外一个。

5.关闭叠加

关闭页面的叠加层

比如就可以在弹窗中的取消按钮或关闭图标中添加关闭叠加

6.修改为

可以应用与变体的属性值的修改,比如你自己创建的变体就可以使用这个动作去改变体变属性值

7.返回

就是返回上一层

运用叠加实现保存成功提示的功能

准备一个提示,给保存按钮绑定打开叠加的动作,打开这个提示;

位置选择手动,然后自己去拖动位置;

自己再去设置一下外部阴影。

这里设置完成后,点击确认按钮就可以实现提示,但提示要在规定时间内消失,就要去提示中设置:动作选择延迟出发,设置好时间,选择关闭叠加的动作就行了。

总结

本篇粗略地介绍了一下原型交互的操作,后续会在实际案例中再次进行实际的尝试。

– 欢迎点赞、关注、转发、收藏【我码玄黄】,各大平台同名。

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

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

相关文章

蓝牙循环搜索并连接. Android辅助功能以及锁的灵活运用

生产上遇到个问题, 某些蓝牙模块不能在低温下进行连接, 所以需要实现个工具 , 一次性自动检测150个蓝牙, 那么android设备就要不断自动的去搜索附近蓝牙模块,然后进行配对,再进行连接,连接成功后断开,去下一个蓝牙模块进行配对连接, 直到搜索出来的蓝牙都配对连接完毕. 根据测…

Linux内核机制自学笔记

摘抄于大学期间记录在QQ空间的一篇自学笔记,当前清理空间,先搬移过来,也不知道到底是对是错了。 1、Linux内存管理 在计算机的世界,内存犹如一条长河,在这条长河中,cpu将这条长河划分成了段和页。cpu要将一…

oracle日期格式查询

文章目录 TO_CHARyyyy-MM-ddyyyy-MM-dd HH24:MI:SS TO_CHAR 在Oracle数据库中,可以使用TO_CHAR函数来格式化日期。TO_CHAR函数可以将DATE或TIMESTAMP数据类型转换为字符串,并按照指定的格式显示。 yyyy-MM-dd 以下是一个简单的例子,假设我…

ES----安装 elasticsearch入门,elasticsearch安装,centos安装es,centos安装elasticsearch

ES 如需要对应资源,请评论留言,或再最后视频中关注获取 1. 安装 1.1 安装es 创建网络(centos系统,docker环境) docker network create es-netdocker安装es —如果下载失败,请看我的docker配置镜像的文章…

Milvus×Florence:一文读懂如何构建多任务视觉模型

近两年来多任务学习(Multi-task learning)正取代传统的单任务学习(single-task learning),逐渐成为人工智能领域的主流研究方向。其原因在于,多任务学习可以让我们以最少的人力投入,获得尽可能多…

172页PPT集团数字化转型采购供应链及财务管控业务流程指南

一、供应商管理与数字化转型 1.1供应商管理数字化的重要性与挑战 重要性: 效率提升: 数字化可以提高供应商管理的效率,通过自动化流程减少手动操作,加快决策速度。透明度增强: 数字化工具可以提供实时数据&#xff…

手机镜头组如此突出,考虑恢复以前设计

现在手头看重照相。结果导致的问题就是,在背部要突出很高,以容纳镜头组件。这种设计真的好吗?并不见得。真实照片: VIVO X200系列镜头组照片-CSDN博客 考虑到现在镜头的情形,我建议恢复以前的设计,就是把镜…

【机器学习】机器学习基础

什么是机器学习? 机器学习(Machine Learning, ML)是一种人工智能(AI)的分支,指计算机通过数据学习规律并做出预测或决策,而无需明确编程。它的核心目标是让机器能够从经验中学习,逐…

设计模式 外观模式 门面模式

结构性模式-外观模式 门面模式 适用场景:如果你需要一个指向复杂子系统的直接接口, 且该接口的功能有限, 则可以使用外观模式。 不用关心后面的查询具体操作 /*** 聚合查询接口*/ RestController RequestMapping("/search") Slf…

基于开源云原生数据仓库 ByConity 体验多种数据分析场景

基于开源云原生数据仓库 ByConity 体验多种数据分析场景 业务背景什么是 ByConity上手实测环境要求测试操作远程登录 ECS 服务器windows10 自带连接工具 执行查询 ByConity 相对于 ELT 能力的优化提升并行度任务级重试并行写入简化数据链路 业务背景 大家都知道,在…

【051】基于51单片机温度计【Proteus仿真+Keil程序+报告+原理图】

☆、设计硬件组成:51单片机最小系统DS18B20温度传感器LCD1602液晶显示按键设置蜂鸣器LED灯。 1、本设计采用STC89C51/52、AT89C51/52、AT89S51/52作为主控芯片; 2、采用DS18B20温度传感器测量温度,并且通过LCD1602实时显示温度;…

HarmonyOS(61) 组件间状态共享的分类以及状态选择器的选取优先级

状态共享 状态共享的分类状态共享选择器State与prop\Link\ObservedObjectLink组合的区别合理选择装饰器的顺序参考资料 状态共享的分类 HarmonyOS的组件之间是可以共享状态数据了,不同的组件之间,状态共享的场景也不一样,根据共享范围从小到…

Redis(4):主从复制

一、主从复制概述 主从复制,是指将一台Redis服务器的数据,复制到其他的Redis服务器。前者称为主节点(master),后者称为从节点(slave);数据的复制是单向的,只能由主节点到从节点。   默认情况下,每台Redis…

14 —— Webpack解析别名

import {checkPhone, checkCode} from ../src/utils/check.js 这么使用相对路径不安全 —— 在webpack.config.js中配置解析别名来代表src绝对路径

雪花算法详解:分布式系统中高效唯一的ID生成方案

文章目录 原理与结构工作流程优势局限性应对高并发的方法适用场景 雪花算法(Snowflake Algorithm)是由Twitter开发的一种分布式全局唯一ID生成方案,旨在解决在分布式系统中快速、无冲突地生成唯一标识符的问题。它通过巧妙的设计,…

静态页面 和 动态页面(Java Web开发)

1. 静态页面 1.1 什么是静态页面? 静态页面是指 HTML 文件直接存放在服务器上,不依赖后端逻辑处理而生成内容。客户端浏览器请求静态页面时,服务器直接将文件发送到客户端,浏览器负责渲染页面。 特点: 固定内容&am…

Spring Boot优雅读取配置信息 @EnableConfigurationProperties

很多时候我们需要将一些常用的配置信息比如oss等相关配置信息放到配置文件中。常用的有以下几种,相信大家比较熟悉: 1、Value(“${property}”) 读取比较简单的配置信息: 2、ConfigurationProperties(prefix “property”)读取配置信息并与 …

贴片电阻(片式厚膜电阻)生产工艺流程

贴片电阻(片式厚膜电阻)生产工艺流程 1.基体处理--->印刷电极--->电极烧结2.电阻体印刷--->电阻体烧结3.一次玻璃印刷--->一次玻璃烧结4.激光调阻5.二次玻璃印刷--->二次玻璃烧结6.字码印刷--->字码烧结7.折条8.端电极涂覆9.折粒10.电…

系统思考—结构影响行为

看到这张图,我不禁在思考: 动机和纪律有什么区别? 它们背后隐藏的系统结构是什么? 结构如何影响我们的行为? 更重要的是,我们能如何设计一个系统结构,引导自己走向Discipline的趋势?

transformers bert-base-uncased情感分析

一、使用huggingface中的预训练模型,先要安装transformers、torch和SentencePiece pip install transformers pip install torch pip install SentencePiece 手动下载:https://huggingface.co/google-bert/bert-base-uncased/tree/main 添加以目录&…