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

前言

我开始使用Figma时，就想充分利软件特性重规划设计流程，正好这篇计经验，觉得有帮助，享给大家。Medium上获赞超过3K的热门文章，为你的下个项目下90%的间。

译文：

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

Figma有常符合觉使用体验，除此，我喜欢它原有：这是条常完工作流，我可以用它来做所有设计过程：线框图、设计稿、设计体系、图标库、原型和沟合作。

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

这就归功于Figma的一重功能：Components（组件）.

△ Components in Figma by Rasmus Andersson

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

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

设计过程对比

1. 传统设过程

传统的设过程一般先一款app中设线框图原型，然后其他软件中UI设，比如Sketch，后用其他软件交付研发。这交互过程并不友好，很浪费时间，且线框图终交付的原型图之间差别较。

2. Figma设计程

在Figma中，你以跳前面2步直接创建互的框图，同时创建一个UI库，最更新你先前创造的UI components就以。

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

具体怎么做呢？

里有一具的步骤供参考。

1. 创建框图

在一步之前，你应该在纸上画草稿，在之，现在是时将他们变为数字化的框图。

始画界面之，的第一创建一UI框架库，这一让可以重复利用UI组件设原则的方。

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

△ Every text style is a component

现在，在屏幕中添本的时候，必须从UI组件库中调取相的本。为么？因为当你进行到设计阶的时候，如果你想要修改有界面的本效果，你就可一次性在组件库中修改，然后有容就都会跟着变了。

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

△ My Airbnb UI library

用个方法建立所有的组件，比：Buttons, Inputs, Dropdowns, Navbars, Cards, Labels, Footers等等。我一般先在屏幕中设计组件，用页面需要的内容来创建，拖进UI库中，将其变为组件，最拷贝回页面中。

△ My Airbnb wireframes

项目结尾时，所设稿中的元素都应该一Component，这不仅了节省作时间，了保持产品的一致性，这UI/UX设中非常重的一点。

2. 线框图添加交互

好线框图，创建好UI组件库之后，应该线框图添加交互了。幸运的，Figma可以非常轻松的到这一点。

你只需要在Prototype模式下，将素拖动它需要链的页面中就可以了。记住如果链一个始组件下，那所有的拷贝项都会应用同的链，示例如下。

△ Making the wireframes interactive

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

3. 设计体系格

一旦你的可交互的线框图被确认后，现在可创建格的设计体系了。在这一步中，你向UI组件库中建立的Component入牌设计原则、颜色和设计细节等等，然后就可将你的线框图转变为一个质量的设计原了。

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

我喜欢提前板们展示些设计规范，在他们看所有设计图前针设计风格来获取反馈，我喜欢添加些UI组件在上，让他们看看这些组件是怎么组合设计。

△ A basic UI library for Airbnb

4. 精打细磨

旦设计风格和规范被确认了，剩下更精确打磨UI交互了。接下来需要确认个元素都在相应位，个交互都链接到正确页。而有些元素可能不是组件，也样需要精细化设计，或者需要补充到组件。确保原型可以正常交互，并确保所有链接都正常运转。

△ My Airbnb prototype

最终的原型完成！现在你以送链接给老板得到最终的确认，，将其付给开人，告诉他们何从Figma下载图，同时告诉他们还以直接在原型上标注问题。

△ Adding a comment on the prototype

也可以通过分享公共链接测试的设原型，从用户那里获取反馈。

就是这简！希望的计过程可以帮助你在下一个项目中节间。

注作者微信公众号：「彩虹BOOK」