figma制作点击下拉菜单

最新推荐文章于 2024-12-24 22:44:21 发布
最新推荐文章于 2024-12-24 22:44:21 发布
阅读量5.1k 收藏 2
点赞数 2
分类专栏： figma 文章标签： 原型设计 figma下拉菜单 figma叠加态
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_38800446/article/details/126857865
版权

在原型设计时想要实现点击弹出下拉菜单，然后查阅网上的资料也很少。所以只能自己摸索。
完成后做一个记录，供浏览查看

目标效果
在这里插入图片描述

制作效果如下：

先制作一个卡片，将其转换为组件（在图层上显示为菱形）
在这里插入图片描述
然后在原型中配置交互细节
在这里插入图片描述
位置选择手动，因为自动的只有居中和靠边，而我们需要的是跟随元素所在位置。
在这里插入图片描述
当选择手动后，会出现一个可调节位置的框，拖动它到要弹出的目标位置
在这里插入图片描述

然后预览中查看效果

iru
关注
专栏目录
Figma：高级原型与动画效果制作_2024-07-22_00-41-55.Tex
11-17 973
选择工具：用于移动和选择对象。矩形工具：创建矩形和正方形。椭圆工具：绘制圆形和椭圆。多边形工具：绘制多边形。文本工具：添加和编辑文本。钢笔工具：绘制自定义形状和路径。填充和描边工具：调整对象的颜色和边框。图层操作：创建、删除、调整图层顺序。Figma允许你自定义元素之间的过渡效果，如淡入淡出、滑动或缩放，以增强原型的视觉体验。
Figma：用户界面(UI)设计实战_2024-07-22_01-02-37.Tex
11-18 939
选择工具：用于选择和移动设计元素。矩形工具：创建矩形和正方形。椭圆工具：创建圆形和椭圆形。多边形工具：创建自定义多边形。文本工具：添加和编辑文本。画笔工具：自由绘制线条和形状。钢笔工具：创建精确的路径和形状。填充工具：为选定的区域添加颜色或图案。描边工具：为元素添加边框。
web程序设计笔记（八）-做一个下拉框选择按钮
在下小黄的博客
10-24 1625
大家好！ 我是小黄，很高兴又跟大家见面啦 ！ 今天更新的是： web程序设计笔记（八）——表单 往期检索：程序设计学习笔记——目录 创建时间：2020年10月24日 软件版本：HBuilder X 2.8.12.20200926 目录 ： ...
学习Figma心得体会
YISHUIXINGJIUE的博客
06-28 1026
*协作性强**：Figma是一款基于云端的设计工具，设计师可以实时协作，轻松共享和讨论设计文件。**跨平台支持**：Figma可以在不同的操作系统和设备上使用，包括Windows、Mac和Linux。**团队项目管理**：Figma提供强大的团队项目管理功能，设计师可以方便地创建项目、分配任务和管理版本控制。**易学易用**：Figma的界面简洁直观，易于上手，即便是新手也能迅速掌握常见的设计工具和功能。Figma的插件系统是其强大功能的重要组成部分，插件能够提供额外的功能和工具。
Figma入门-实战列表页
我码玄黄的博客
12-12 1486
本文介绍Figma上手过程，实操实现Web端经典列表页，包括标题、搜索框、列表项和分页。采用侧边栏+主内容区布局，使用自动布局实现内外边距，绘制内容列表和分页器，最后进行微调。
【Figma】入门第一篇 页面和功能简介 初学者必看
JU_OLG的博客
10-10 3693
本文以网页版 figma 英文为例，简单介绍一下工作台界面上的各个模块的功能，给刚开始使用 figma 的学习者提供一些参考，加速上手。
5个UI设计师必备的Figma汉化插件
FourxiYuanzi的博客
05-31 2282
通过点击 Unsplash 图库 UI 插件，选中需要更换的图片，然后在 Unsplash 图库 Figma 汉化插件中选择新的图片即可一键完成替换。这样可以为不同页面设计中的多个模板提供灵感，并可以将其中的一些组件复制到自己的项目中，稍加修改就能直接使用，减少重复劳动。，用于管理常用的 UI 插件，解决了插件冗余导致界面混乱的问题，并且有效提高了日常设计工作的效率。除了上述提到的 Figma 汉化插件，即时设计的插件广场还提供了许多其他有用的插件。如果感兴趣的话，不妨探索一下即时设计插件广场的其他插件。
Figma：矢量图形编辑与设计技术教程_2024-07-22_00-08-46.Tex
11-17 1306
在开始使用Figma进行矢量图形编辑与设计之前，了解其界面布局至关重要。
figma设计_设计原型的最简单方法：Figma速成课程
weixin_26732881的博客
08-03 6140
figma设计It doesn’t matter if you haven’t used any prototyping tools before or you’re transitioning from other ones (like Sketch, Adobe XD); This guide is for beginners and professionals alike. So for a...
figma下载_使用SVGator，Figma和Envato元素对图标进行动画处理
Web design 教程小屋
07-08 2629
在本教程中，我们将从Envato Elements中获取一个基于SVG的图标，在Figma中进行一些准备性的修改，然后使用SVGator对其进行动画处理 。 让我们开始吧！ 您需要什么 在开始之前，请继续从Envato Elements下载此图标包 。 下载后，解压缩该zip文件并找到编号15的图标，该图标看起来像一个小的键盘和屏幕。 您还需要一个付费SVGator帐户，因为免费试用版...
figma下载_在Figma上进行原型制作的各种触发选项
weixin_26732881的博客
08-05 1811
figma下载Prototypes are model versions of digital products. They’re used to measure usability by testing with potential users of a product. When making prototypes with Figma, it is necessary that the ac...
总结了几个做用户体验设计的原则，分享给需要的朋友
七小嗨少的博客
11-24 770
比如上面提到的Padding设置，Fimga采用可视化形式，用户可以直接填写对号，用户的思维成本较低，甚至可以说是零成本。我个人理解，这种布局是为了压缩高度方向的尺寸，尽可能确保设置项目完全显示，避免滚动条，增加用户的运营成本。另外Axure默认字体为13号，默认字体为13号Figma它是14号字体，更适合设计师的主流使用，减少了用户的修改次数。在Figma在中间，用户可以创建自己的颜色、边缘和阴影风格库，随时调用设计，一劳永逸，降低频繁调整风格的操作成本。在工具软件中，对象的属性栏应为用户的高频操作区。
掌握 Figma 的自动布局，轻松设计 - 简化指南！
2301_79599164的博客
11-08 653
自推出以来，Figma的创新一直受到国内外众多UI设计师的关注，包括在推动设计团队开展高效设计工作方面，Figma推出了自动布局等创新功能。除此之外，即时设计还支持选中已设置自动布局的画板或分组，在右侧面板中，点击切换「纵向布局」或「横向布局」，手动修改【间距】【上下边距】【左右边距】的数值，让容器内所有小框按照你希望的间距排列。选中按钮画板，按快捷键Shift+A，或右键单击按钮，在下拉菜单选择添加Figma自动布局，或从设计面板中添加Figma自动布局，这样按钮的尺寸会随着文本的增减而扩展和收缩。
Figma快速上手教程--学习笔记
最新发布
weixin_42219180的博客
12-24 2632
Figma快速上手教程--学习笔记
figma的一些用法(一)
Winfredzhang的博客
12-17 8293
1、新建frame画布。 2、圆角按钮。 3、放大字体并设置效果。
Figma实用小技巧
热门推荐
设计の诗
05-17 3万+
1. 介绍 原作：lijxse 视频地址 文字版整理：岩鸣杨子 2. 快速拖拽调整数值 按住option可在数值上拖拽调整，不按option时只能在X/Y/W/H/旋转/圆角等的图标上拖拽调整，不能调整透明度的数值。 3. 属性粘贴复制 shift+X：互换填充和描边 选中图层的某个属性，然后cmd+C，则可复制这个图层特定的属性。 选中图层的某个属性，然后cmd+V，则可粘贴到这个图层特定的属性上。 4. 列表切换&快速搜索 option+1：切换到Layers option+2：切换到Asse.
09-Figma-工具栏-预览以及分享设置
billycoder的专栏
01-21 4653
09-Figma-工具栏-预览以及分享设置 常见操作 设封面,Frame标题处,右键点击"设为封面" 修改项目标题,顶部修改即可 分享,右上角,简单 创建副本,文件下拉菜单里面 让分享只能看,不能创建副本,付费团队的分享里面有这个设置 设计稿讨论工具,点击讨论图标,在合适的地方添加讨论即可 总结 草稿中的文件可以分享和编辑，对方可以保存 只有付费团队中的项目可以设置不让对方保存 在画板上右键可以设置封面 通过评论功能进行团队之间的沟通 ...
figma下载_如何在Figma中添加多个交互
weixin_26737001的博客
09-09 3356
figma下载Figma prototypes have historically been limited to one interaction per object, but they recently* introduced the feature for multiple interactions. Using single interactions has been our bread ...
Lock wait timeout exceeded try restarting transaction
01-13
Lock wait timeout exceeded; try restarting transaction是一个数据库错误，表示在执行事务时等待锁的时间超过了设定的超时时间。这通常发生在并发访问数据库时，多个事务同时请求同一资源（例如表、行、页）的锁定，并且其中一个事务持有锁的时间过长，导致其他事务等待超时。 解决这个问题的方法是尝试重新启动事务，以便释放持有的锁，并允许其他事务继续执行。重新启动事务可以通过以下几种方式实现： 1. 在代码中捕获异常并重新启动事务： ```python try: # 执行事务操作 except LockWaitTimeoutError: # 重新启动事务 # 继续执行事务操作 ``` 2. 调整数据库的锁等待超时时间： 可以通过修改数据库的配置文件或使用数据库管理工具来增加锁等待超时时间，以便更好地适应并发访问的需求。 3. 优化数据库设计和查询语句： 通过合理设计数据库结构、索引和优化查询语句，可以减少事务持有锁的时间，从而降低发生锁等待超时的概率。 4. 调整事务的隔离级别： 将事务的隔离级别调整为更低的级别（如读已提交），可以减少事务持有锁的时间，从而减少锁等待超时的可能性。 请注意，具体的解决方法可能因数据库类型和版本而有所不同。建议查阅相关数据库的官方文档或咨询数据库管理员以获取更准确的解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值