我会第一个说,Figma是设计师的天赐之物。它使我的设计过程更加高效,使我成为一名更好的设计师。
Figma在设计界取得了来之不易的优势地位,这并非偶然。尽管如此,作为设计师,我们不能依靠一种工具来完成一切。
尽管Figma似乎已经吞食了抽象、隐形、泽普林、素描和其他任何东西,Framer可能仍然是一个竞争者。
我仍然使用Figma来完成我所有的UI工作、管理设计系统、团队协作等等。然而,当涉及到为用户测试创建可点击原型或为运球创建性感动画时,Framer的强大给我留下了深刻的印象。
为什么设计社区依赖在Framer上???
让我们谈谈flex Framer改进设计的所有方法。
什么是Framer?
正如UX Lord在其《Figma vs Framer》一文中所说,“Framer是一种原型设计工具,但它可以使用真实代码创建或定制组件。虽然编码工具可能会吓跑设计师,但Framer功能完美,即使您选择完全不使用编码,作为一个独立的设计工具也非常有用。”
1.输入字段
输入字段以某种形式在几乎每个接口中都扮演着角色。使用Figma中的交互式组件,您可以将一些类似于输入字段的内容拼凑在一起,但创建这些内容将花费很长时间,而且Sitl不会接近Framer中的默认输入字段。
单击“插入”,然后拖放一个输入字段,并按您喜欢的方式进行样式化,这非常简单。您的设计将立即具备真实用户输入的能力,而不会带来任何麻烦或麻烦。
2.粘性滚动元素
有时,在滚动时,某个帧应该保持在某个位置。这对于节标题和浮动导航特别有用。但在Figma中很难做到这一点,所以我们必须依靠第三方示例和文档向我们的开发人员解释这一特性。
可滚动堆栈中的帧内对象可以设置为“粘性”对象,并且可以设置规则来调整其行为。我建议遵循Framer的教程来了解它的工作原理。
3.滑块
我最近创建了一个关于如何在Figma中创建自动布局滑块的教程,收到了很好的反馈,但很多人问:“我如何使它在原型中工作?”
你不能在Figma中这样做,但是Framer有一个默认组件,可以像真实的东西一样在原型中拖动。您还可以通过一个小代码片段轻松地将其附加到数字值。
4.轻扫效果
不同的轻扫效果非常有趣,使用起来也很方便。它让我想起了旧的windows影音制作——只要把一个效果拖到屏幕上,你就完成了!
我花了多少时间在Figma中创建了一个具有覆盖流效果的可滑动原型,这让我很沮丧。是的,这是可以做到的,但你将需要一个新的屏幕为每一张卡,这是一个巨大的痛苦来管理。
Framer让这一体验变得轻而易举。您可以拖出一个“页面”框架,然后只需连接您想要刷卡的卡,即可立即工作,无需自动设置动画。
在Figma中,堆积效应很难实现,但玩起来很有趣,可以实现类似于苹果钱包中堆积的信用卡的效果。
5.地图整合
映射集成是Framer中可以使用的数百种不同集成之一。前往Framer软件包,浏览所有不同的方式,让您的设计团队大吃一惊。
6.透视悬停
这是另一个非常简洁且易于实现的包。同样,有数百个这样的软件包,所以去检查一下,看看外面有什么-检查一下
7.音效与媒体
如果你的应用程序有声音效果,Framer会覆盖你。您还可以在原型内部播放音乐、视频、GIF、Youtube视频和其他类型的内容。
8.车轮效应
9.心脏动画
当涉及到代码重写时,Framer有无限多的可能性。这是其中之一。在Framer中,您可以编写函数并将其应用于画布上的任何元素。
覆盖可用于在文本输入之间传递数据、动态显示来自API的数据以及创建自定义手势动画。
代码覆盖比我共享的其他选项更复杂,但大多数情况下,复制和粘贴代码段是您所需要做的全部。请参阅此处的更多代码覆盖。
10.画板
在原型中拥有签名或画板似乎是一种黑魔法,但通过Framer的包集成,这一切都是可能的。