Figma做高保真交互不求人!送你一份快速衔接ProtoPie的方法

103

Figma做高保真交互不求人!送你一份快速衔接ProtoPie的方法

使用Figma做设计的用户应该都直接在Figma中完成交互原型制作。

Figma自带的原型功能虽然也能帮我快速地做出一些简单的动效。但由于我需要用高保真的交互原型,所以我尝试了Figma官方推特上推荐的这个交互原型插件 – ProtoPie。

在另一篇文章里我分享了执着于高保真原型的原因,和ProtoPie的优点。大家可以通过以下链接阅读。此处为语雀文档,点击链接查看:

用Figma做完设计后,我该如何制作交互原型

去年,当我认识Figma这款线上协作设计工具后,便爱上了它。没想到今年Fimga在国内也火得不要不要的,不过作

测试ProtoPie插件后,我发现它不仅能直观快速地导入Figma素材,还能快速做出高保真原型。下面分享一些经验,希望能帮助大家更好地衔接Figma与ProtoPie的设计流程。

ProtoPie插件的优势

  • 素材导入方式直观,速度快
  • 能同时导入多个画板/图层,节省制作时间
  • Figma的素材属性能原封不动地搬到ProtoPie,包括画板名和图层名
  • 在ProtoPie可以编辑导入的图层和文本。这意味导入素材后就能立刻开始做交互,不需要重新再在ProtoPie里创建图层!
  • Figma里修改了设计再导入时,不会影响已经设置好的交互,可以放心地在Figma里修改素材。

素材怎么导?怎样才能更方便做原型?

1. 导入画板和图层的基本方法

选取要导入的对象,点右键选择ProtoPie插件就能导入。导入后,Figma画板成为ProtoPie场景,Figma的组成为ProtoPie容器层。在导入过程能看到导入进度,导入完成后,ProtoPie会自动出现在桌面最前端,并提示导入成功。非常直观快速!

如果要单独将图层导入指定的ProtoPie场景,只需先在ProtoPie打开相应场景,然后在Figma选取图层导入就ok

2. 导入矢量图后,能自由修改文本和图层属性

在ProtoPie选择导入图层/文本,将其转化为矢量图/文本图层后,就可以编辑了。那有朋友就问:”除了方便修改之外,对制作交互有什么帮助?

假设一个交互场景“当用户未填写信息并点击Login按钮时,Login按钮由黑色变为黄色”。由于能在ProtoPie中修改图层属性,我就能直接给图层添加“颜色”反应来改变颜色!幸好有这个功能,我就不用在ProtoPie里重建图层了。

3. 导入矢量图后,不影响素材结构

以Login按钮为例。我已事先在Figma中将Login背景和文本编组命名为button。button组导入ProtoPie后,成为ProtoPie的button容器层。在ProtoPie里给容器层添加“单击”触发和“转场”反应,就做出登录并进入主页的交互效果了。

以上就是我总结的一些使用方法,希望这个插件能帮助使用Figma的朋友,能更有效地做出高保真交互原型。

扩展阅读

-2021中国用户线上交流会

ProtoPie将在1月16日举办2021中国用户线上交流会,不仅会带来丰富的资讯,还准备了有奖游戏。大家可以扫二维码加群,通过活动深度了解ProtoPie的过去与未来。在公众号文章下留言,分享你和ProtoPie的故事,还将有机会在现场发言;或写下你的提问,让CEO现场为你解答。

公众号文章:https://mp.weixin.qq.com/s/mekddBndPWOy3CtbbREn7Q

-年末福利!ProtoPie个人版五折优惠:

>>> 五折优惠购买地址 <<<

继续阅读与本文标签相同的文章

技巧教程

Figma设计系统中图标的注意事项

2020-12-25 9:16:51

官方数据资源下载

Figma客户端下载地址和Figma Beta下载地址

2020-9-24 11:18:57

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索