figma插画素材-Figma里越来越多的插件，我们该如何管理？

一直使用PS做UI。无意间接触了Figma,在查找资料对其有了初步了解之后,决定入坑。

首先,PS的知名度不用多说,它是很多人学习的第一个图像软件,功能强大,一专多能,不可否认,现在用PS做UI的仍不在少数。虽然有关图像图形的几乎任何功能都可以用PS实现,但在很多方面,它并没有达到极致。矢量图形是PS的弱项,它并不是一个forUI设计师的专门软件,在很多设计上,可以处处体会到它的笨拙。

Sketch的出现让设计师们可以优雅地工作,但它只能在macos运行,阻断了大批windows用户。

而Figma在界面设计上和Sketch极为相似,运行在浏览器上,是一个web应用,不存在跨平台问题。其次,Figma颠覆了PS的方式,在UI设计上,大大提高了效率。

UI的工作流程:绘制线框图_交流修改_绘制高保真界面_添加交互

以往完成上述工作需要跨越多个软件,而Figma则可以独自完成。

纸上草图,理清产品逻辑,打开软件。

在绘制之前,先创建一个frame,我们给它起名为UIlibrary。我们将把所有的可复用组件和设计规范放在这里。

我们在里面先绘制一些基本的文字样式(H1,H2,H3,H4,P,Small等)。此时我们可以直接使用默认样式,而不需要考虑设计。接下来绘制其它的组件,比如按钮、输入框、下拉菜单、导航条、卡片、标签、页脚等等。推荐顺序:先绘制具体页面,再提取出一些元素将其转换为组件,在移动到UIlibrary中。

如此,你的设计图中几乎所有的元素都变成了组件。组件不仅可以为你节省时间,还可以保持产品一致性,这对于UI/UX设计来说是很重要的。

当你绘制完线框图并创建一套组件库之后,我们可以给它添加一些交互动作,Figma内置很多交互效果可以帮我们做到。

你所需要做的就是在原型模式下,来连接需要交互的不同元素并设定他们之间的动作。需要注意的是,如果你连接了一个master组件,那么这将对其所有instance都起作用。

下一步就是分享你的原型链接给其他人,让他们直接在原型上给予反馈。接下来,根据反馈,修改你的线框图,直到最后确定下来。

细化你的线框图样式,将其转换为高保真设计图。在这一步,你可以直接在每个master组件上来应用品牌的色调和细节,得益于其组件唯一来源的特性,我们可以很快将线框图转换为高保真设计图。

打磨原型细节。你可以检查一下还有哪些元素可以作为组件,哪些组件可以优化一下,每个需要交互的元素是否都添加了链接,以及交互效果是否正确。

一切就绪,你就可以分享出一个链接给开发,并告诉他们如何查看标注,如何导出素材,他们遇到问题也可以直接在原型上评论。

References:

如何使用Figma来完成你的设计工作流