前言

当我开始使用Figma时,就想充分利用软件特性重新规划设计流程,正好看到这篇设计经验,我觉得很有帮助,分享给大家。Medium上获赞超过3K的热门文章,为你的下个项目省下90%的时间。

帮你省下90%的时间!如何使用Figma简化设计工作流程?

译文:

近一年,我开始用Figma来做UI/UX设计过程,这为我节省了很多工作时间,它真正的改变了我的设计流程。

Figma有非常符合直觉的使用体验,除此之外,我喜欢它的原因还有:这是一条非常完整的工作流,我可以用它来做所有的设计过程:线框图、设计稿、设计体系、图标库、原型和沟通合作。

我不想说服你一定要使用Figma,相反,我想向你展示如何通过简单的技巧在下个项目中节省时间。

这就归功于Figma的一个重要功能:Components(组件).

帮你省下90%的时间!如何使用Figma简化设计工作流程?

△ Components in Figma by Rasmus Andersson

Figma中的Components和Sketch中的Symbols非常相似,但是Figma中的Components更灵活易用。

Fgima是如何为我节省时间的?让我们看看传统的设计过程和Figma设计过程的对比。

设计过程对比

1. 传统设计过程

传统的设计过程一般是先在一款app中设计线框图原型,然后在其他软件中做UI设计,比如说Sketch,最后用其他软件交付研发。这个交互过程并不友好,很浪费时间,而且在线框图和最终交付的原型图之间差别较大。

帮你省下90%的时间!如何使用Figma简化设计工作流程?

2. Figma设计过程

在Figma中,你可以跳过前面2步直接创建可交互的线框图,同时创建一个UI库,最后更新你先前创造的UI components就可以了。

帮你省下90%的时间!如何使用Figma简化设计工作流程?

换一种说法,就是你可以从一开始就使用components来画线框图,当你这么做时,在线框图确认后,你需要做的就只是更新components。这将会把他们从一开始的简单的几何形状变成细节完善的设计组件,这样就完美的把线框图变为一个高精质量原型了。

具体怎么做呢?

这里有一些具体的步骤可供参考。

1. 创建线框图

在这一步之前,你应该在纸上画过草稿了,在这之后,现在是时候将他们变为数字化的线框图了。

在你开始画界面之前,你要做的第一步是创建一个UI框架库,这是一个让你可以重复利用UI组件和设计原则的地方。

你首先要创建的是文字样式,分别为各类文本创建一个组件:H1、H2、H3、H4、P、Small等,用这个标题字体就可以,先不用过多的考虑设计样式。

帮你省下90%的时间!如何使用Figma简化设计工作流程?

△ Every text style is a component

现在,在屏幕中添加文本的时候,必须从UI组件库中调取相关的文本。为什么?因为当你进行到设计阶段的时候,如果你想要修改所有界面的文本效果,你就可以一次性在组件库中修改,然后所有内容就都会跟着变化了。

这个概念适用于所有组件。

帮你省下90%的时间!如何使用Figma简化设计工作流程?

△ My Airbnb UI library

用这个方法建立所有的组件,比如:Buttons, Inputs, Dropdowns, Navbars, Cards, Labels, Footers等等。我一般先在屏幕中设计这些组件,用页面需要的内容来创建,然后再拖进UI库中,将其变为组件,最后再拷贝回页面中。

帮你省下90%的时间!如何使用Figma简化设计工作流程?

△ My Airbnb wireframes

在项目结尾时,所有在你设计稿中的元素都应该是一个个Component,这不仅是为了节省工作时间,更是为了保持产品的一致性,这在UI/UX设计中是非常重要的一点。

2. 为线框图添加交互

在你做好线框图,创建好UI组件库之后,现在应该为线框图添加交互了。幸运的是,Figma可以非常轻松的做到这一点。

你只需要在Prototype模式下,将元素拖动到它需要链接的页面中就可以了。记住如果链接到一个原始组件下,那么所有的拷贝项都会应用同样的链接,示例如下。

帮你省下90%的时间!如何使用Figma简化设计工作流程?

△ Making the wireframes interactive

下一步就是将可交互的线框图拿给老板们看,在prototype上直接获取反馈和意见。

3. 设计体系风格化

一旦你的可交互的线框图被确认后,现在可以创建风格化的设计体系了。在这一步中,你向UI组件库中建立的Component加入品牌设计原则、颜色和设计细节等等,然后就可以将你的线框图转变为一个高质量的设计原型了。

帮你省下90%的时间!如何使用Figma简化设计工作流程?

△ A style change on a component applies on all its instances

我喜欢提前向老板们展示一些设计规范,在给他们看所有的设计图之前就针对设计风格来获取反馈,我还喜欢添加一些UI组件在上面,让他们看看这些组件是怎么组合设计的。

帮你省下90%的时间!如何使用Figma简化设计工作流程?

△ A basic UI library for Airbnb

4. 精打细磨

一旦设计风格和规范被确认了,就剩下更精确的打磨UI交互了。接下来需要确认每个元素都在相应的位置,每个交互都链接到正确的页面。而且有些元素可能不是组件,也同样需要精细化设计,或者需要补充到组件中。确保原型可以正常交互,并且确保所有的链接都正常运转。

帮你省下90%的时间!如何使用Figma简化设计工作流程?

△ My Airbnb prototype

最终的原型完成!现在你可以发送链接给老板得到最终的确认了,然后,将其交付给开发人员,告诉他们如何从Figma下载图片,同时告诉他们还可以直接在原型上标注问题。

帮你省下90%的时间!如何使用Figma简化设计工作流程?

△ Adding a comment on the prototype

你也可以通过分享公共链接来测试你的设计原型,从用户那里获取反馈。

就是这么简单!希望我的设计过程可以帮助你在下一个项目中节省时间。

欢迎关注作者微信公众号:「彩虹BOOK」

帮你省下90%的时间!如何使用Figma简化设计工作流程?

收藏 134
点赞 10

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。