38-Figma-页面交互演示制作

原创 已于 2022-01-24 15:08:55 修改 · 6.7k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#figma

于 2022-01-24 13:45:05 首次发布
本文介绍使用Figma进行页面交互设计的方法，包括调整画框尺寸以匹配屏幕、设置滚动模式、实现页面间的跳转及预览效果。此外，还介绍了如何将原型应用到样机上，以更真实地展示设计成果。

38-Figma-页面交互演示制作

效果

1.把画框长度调整到屏幕尺寸

在这里插入图片描述

2.设置画框滚动模式

在这里插入图片描述

3.跳转页面

在这里插入图片描述

4.点击播放可以看效果

在这里插入图片描述

5.原型还可以套样机

在这里插入图片描述

Figma：原型设计与交互基础_2024-07-22_00-36-23.Tex
11-18 816
在Figma中，自定义插件和集成是提升设计效率和功能的关键。通过利用Figma的API，设计师和开发者可以创建工具来自动化重复任务、增强团队协作、以及实现与外部服务的无缝集成。
Figma：高级原型与动画效果制作_2024-07-22_00-41-55.Tex
11-17 1192
选择工具：用于移动和选择对象。矩形工具：创建矩形和正方形。椭圆工具：绘制圆形和椭圆。多边形工具：绘制多边形。文本工具：添加和编辑文本。钢笔工具：绘制自定义形状和路径。填充和描边工具：调整对象的颜色和边框。图层操作：创建、删除、调整图层顺序。Figma允许你自定义元素之间的过渡效果，如淡入淡出、滑动或缩放，以增强原型的视觉体验。
Figma入门-原型交互
我码玄黄的博客
11-30 2917
Figma原型交互入门，通过5个画框实现简单交互，包括导航跳转、打开链接、打开/交换/关闭叠加等，并设置动画和位置。本文粗略介绍，后续将结合实际案例尝试。
基于React+Storybook+Figma的设计系统构建实战
weixin_34535286的博客
09-05 637
设计系统是一套可复用的组件、设计语言和文档规范的集合，它为产品开发提供了统一的设计与开发标准。它不仅仅是UI组件的集合，更是一种协作方式，涵盖了设计原则、交互规范、视觉风格、代码实现和流程管理等多方面内容。在现代前端开发中，随着产品复杂度的提升，团队协作的难度也随之增加。设计系统通过提供标准化的组件与规范，帮助团队在不同项目间保持一致的用户体验，同时提升开发效率与可维护性。将 Figma 文件连接到 Abstract 项目。每次提交设计变更时，创建一个新的“提交（Commit）”。
总结了几个做用户体验设计的原则，分享给需要的朋友
七小嗨少的博客
11-24 827
比如上面提到的Padding设置，Fimga采用可视化形式，用户可以直接填写对号，用户的思维成本较低，甚至可以说是零成本。我个人理解，这种布局是为了压缩高度方向的尺寸，尽可能确保设置项目完全显示，避免滚动条，增加用户的运营成本。另外Axure默认字体为13号，默认字体为13号Figma它是14号字体，更适合设计师的主流使用，减少了用户的修改次数。在Figma在中间，用户可以创建自己的颜色、边缘和阴影风格库，随时调用设计，一劳永逸，降低频繁调整风格的操作成本。在工具软件中，对象的属性栏应为用户的高频操作区。
Figma这些交互细节，B端设计也值得借鉴
aimeeth的博客
02-22 1287
Figma 最近真是热火朝天，2021 年 6 月刚获得 2 亿美元的 E 轮融资，估值高达 100 亿，居然以设计工具的身份成为独角兽。 文章链接：https://www.forbes.com/sites/alexkonrad/2021/08/10/how-figma-became-designs-hottest-startup-valued-at-10billion/ 现在，Figma 终于取代 Sketch，在国际上稳稳占领了 UI/UX 设计工具的主流地位。 上图来源：..
从Figma中学习如何做交互设计？
qinfen_xiaoma的博客
04-08 691
创建元素时，Figma属性栏默认只显示位置尺寸信息、图层透明度和填色等基础信息，描边、投影、导出等设置项只显示标题，内容全部隐藏不展示，保证了操作信息的所见即所得。例如上文提到的Padding设置，Fimga采用的是可视化的形式，用户直接对号填写就可以了，用户的思考成本更低，甚至可以说是0成本。在设计工具中，可视化设计更多的用在位置相关功能，辅助用户更好的理解信息，从而降低用户的思考成本。在Figma中，用户可以创建自己的色彩、描边和阴影样式库，在设计中随时调用，一劳永逸，减少了频繁调整样式的操作成本。
figma下载_如何在Figma中添加多个交互
weixin_26737001的博客
09-09 3525
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 ...
Figma：用户体验(UX)设计流程_2024-07-22_01-11-57.Tex
11-18 654
在开始任何设计项目之前，定义项目目标是至关重要的第一步。这一步骤确保了整个团队对项目的方向和期望有共同的理解。项目目标应该具体、可衡量、可实现、相关性强、有时间限制（SMART原则）。
Figma学习一天入门
yantuguiguziPGJ的博客
11-01 1200
UI/UX设计工具
figma button_Figma到视频原型制作的简单方法，只需三个步骤
weixin_26715991的博客
09-20 2943
figma buttonToday I want to share with you an easy and quick way to create a beautiful video presentation of your interface. I know that the same result can be obtained in popular video editors, where...
figma app 展示页做法
qq_52175048的博客
01-13 723
figma app 展示页做法
从3个方面，总结 Figma 值得借鉴的交互细节
aimeeth的博客
03-04 895
引言 近一年来，Figma 可谓是体验设计领域中最热门的工具。刚好最近开始频繁的在 Axure 9.0 和Figma中切换使用，深刻的感受到了设计细节带来的体验差异化。今天就通过一些细节亮点，总结下工具软件的体验设计的几个原则。 事先声明，本文不是对比软件工具孰优孰劣，仅仅是为了探讨设计技巧，希望对你有所帮助。 本文主要的内容包括： 效率设计：提高用户行为效率 简洁化设计：降低信息噪点 可视化设计：减少用户思考成本 效率设计 工具软件首要的任务就是追求效率，减少用户的操作成本。 1. 模..
【Figma学习】App制作一
weixin_47050107的博客
08-16 1655
Figma学习
Figma
weixin_47401619的博客
01-25 3226
figma
Figma最全面的新手指南，从基础到高级，一网打尽
2301_79599164的博客
11-22 7515
Figma基础界面与传统设计软件没有太大区别，有Sketch使用经验的用户几乎可以无缝连接到Figma。顶部导航栏顶部是导航栏，所有打开的文档都将显示在这里。左边的Figmaicon是Home键。点击返回团队主页。右边的导航Tab可以通过快捷键Command+123切换。这里的快捷键与Sketch查看所有视图的快捷键相冲突。在Figma中，查看所有视图的快捷键是Shift+1，查看目标视图到全图大小的快捷键是Shift+2。
在figma中制作一个按钮
qq_54779874的博客
03-14 1082
用figma做设计作业的时候发现相关的内容好像很难搜到，遂总结整理一下。
Figma API 演示项目教程
gitblog_00240的博客
08-27 736
Figma API 演示项目是一个开源项目，旨在展示如何使用 Figma API 将 Figma 设计文档转换为 React 组件。该项目包含多个示例应用，展示了 Figma API 的各个方面。尽管该项目已被归档，但它仍然是一个很好的学习资源，可以帮助开发者了解如何开始使用 Figma API。 ## 项目快速启动 ### 环境准备 在开始之前，请确保您的开发环境满足以下要求： - No...
2025产品经理必看！墨刀/Axure/Figma三大原型组件库全解析
Lemonliyi的博客
03-19 5003
产品经理常用三大组件库各有特点，有的适合敏捷迭代的产品，有些应对复杂逻辑的系统，还有些侧重高保真交付。建议根据自身项目阶段选择适合的组件库进行素材复用，一键复用避免复杂流程。
figma怎么做交互
最新发布
09-27
以下是在 Figma 中制作交互的一般方法： ### 创建交互原型的基本流程 1. **准备设计稿**：首先需要有完整的设计稿，每个页面或屏幕都应是一个独立的帧。在 Figma 中，可以使用矩形工具创建不同的帧来代表不同的页面。 ```plaintext 例如，设计一个手机应用的原型，就可以创建多个帧分别代表首页、详情页、个人中心页等。 ``` 2. **添加交互**：选中要设置交互的元素，点击右侧面板中的“原型”选项卡。在这里可以设置元素的触发动作和目标页面。 ```plaintext 比如，将一个按钮元素设置为触发元素，当点击该按钮时，跳转到另一个页面帧。 ``` ### 具体交互类型及设置方法 - **点击交互**：最常见的交互类型。选中元素后，在“原型”面板中选择“点击”作为触发条件，然后拖动箭头指向目标页面帧。 ```plaintext 例如，在首页上有一个“登录”按钮，设置点击该按钮后跳转到登录页面。 ``` - **滚动交互**：对于包含长内容的页面，可以设置滚动交互。选中要滚动的区域，在“原型”面板中选择“滚动”，并设置滚动的方向和范围。 ```plaintext 比如，设置一个新闻列表页面可以垂直滚动查看更多新闻条目。 ``` - **过渡效果**：可以为交互添加过渡效果，使页面切换更加平滑。在设置交互时，在“过渡”选项中选择合适的效果，如淡入淡出、滑动等。 ```plaintext 例如，从首页跳转到详情页时，设置页面以淡入的效果显示。 ``` ### 动态面板与变体 - **动态面板**：可以创建动态面板来实现元素的显示与隐藏、切换状态等交互。选中元素后，在“属性”面板中选择“创建动态面板”。 ```plaintext 比如，一个菜单按钮，点击后显示隐藏的菜单列表，就可以使用动态面板来实现。 ``` - **变体**：变体可以让元素在不同状态下有不同的外观。创建变体后，可以为每个变体设置不同的样式和交互。 ```plaintext 例如，一个按钮有正常、悬停、点击三种状态，就可以创建三个变体分别设置不同的颜色和样式。 ``` ### 交互的高级设置 - **条件逻辑**：在复杂的交互中，可以使用条件逻辑来控制交互的触发。在“原型”面板中设置交互时，可以添加条件，如元素的可见性、变量的值等。 ```plaintext 比如，只有当用户输入正确的用户名和密码后，登录按钮才可以点击并跳转到主页。 ``` - **变量**：使用变量可以实现更复杂的交互逻辑。在“原型”面板中可以创建和管理变量，然后在条件逻辑中使用这些变量。 ```plaintext 例如，创建一个“登录状态”变量，根据该变量的值来显示不同的页面内容。 ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值