更多教程、资源、文章欢迎访问 Figma 中文网
- 原文作者：Nicole Said
- 原文链接：https://blog.nicolesaidy.com/how-to-streamline-your-ui-ux-workflow-with-figma-b72c30596435
image
过去一年我在自己的 UI/UX 工作流程中都一直使用 Figma，它真的节约了我很多的时间，并完全改变了我的工作模式。
除了使用上更加符合直觉，Figma 还有一个很吸引我的点：它几乎能够覆盖我从线框图、设计、设计系统构建、交互原型到协作的整个设计工作流程。
我不会讲为什么要使用 Figma，而是要给你展示如何使用 Figma 节约时间，并应用到你的下一个项目中，而这一切都归结于 Figma 的组件功能。
image
Figma 非常类似于 Sketch 中的 Symbol，但是我觉得它更加灵活易用。如果你对 Figma 的组件还不够了解，可以看一下这篇文章（https://blog.figma.com/components-in-figma-e7e80fcf6fd2）了解一下。
为什么说 Figma 可以节约我的时间呢？为了对比 Figma 的设计流程，我们先看一下传统的设计工作流程。
工作流程对比
传统流程
最经典的模式，是先在一个软件（比如 Balsamiq）中绘制线框图，再使用 Sketch 等软件绘制界面，最后使用 inVision 这类软件添加交互。这种流程会因为摩擦而浪费大量的时间，更不用说线框图和最后的交互原型之间的巨大差别。
image
Figma 的工作流程
在 Figma 中，以上步骤几乎都可以在一个软件中完成，而且在绘制线框图的同时你可以创建一套 UI 组件库，并运用在最终的可交互原型中。
image
再次重申：你在最开始创建线框图时就创建了一套可复用的组件库。这个过程可以很快，而当你这一套线框图所表达的逻辑通过评审之后，就可以更新组件样式，将其转换成一个更加高保真的设计图，或者可交互原型。
如何工作？
下面我将详细介绍我的这一套设计工作流程。
1、创建线框图
在此之前，你最好先在纸上画一些草图，想清楚整个产品逻辑，然后再用电脑开始画。
在绘制之前，先创建一个 frame，我们给它起名为 UI library。我们将把所有的可复用组件和设计规范放在这里。
接着，我们在里面先绘制一些基本的文字样式（H1, H2, H3, H4, P, Small 等）。此时我们可以直接使用默认样式，而不需要考虑设计。
image
现在，你可以在任何需要使用文字的地方使用这些文字组件的 instance（复制一个过去）。之所以这么做，是因为在后面的设计阶段我们将统一改变这些文字样式，那时候就只需要改变 master 组件的样式，其余 instance 都会跟着改变。其余的组件我们也将这么做。
image
接下来绘制其它的组件，比如按钮、输入框、下拉菜单、导航条、卡片、标签、页脚等等。我一般喜欢先绘制具体页面，再提取出一些元素将其转换为组件，在移动到 UI library 中。
image
在结束时，你的设计图中几乎所有的元素都变成了组件。组件不仅可以为你节省时间，还可以保持产品一致性，这对于 UI/UX 设计来说是很重要的。
2、让你的线框图可交互
当你绘制完线框图并创建一套组件库之后，我们可以给它添加一些交互动作，Figma 内置很多交互效果可以帮我们做到。
你所需要做的就是在原型模式下，来连接需要交互的不同元素并设定他们之间的动作。需要注意的是，如果你连接了一个 master 组件，那么这将对其所有 instance 都起作用。
image
下一步就是分享你的原型链接给其他人，让他们直接在原型上给予反馈。接下来，根据反馈，修改你的线框图，直到最后确定下来。
3、细化样式
接下来，就是细化你的线框图样式，将其转换为高保真设计图。在这一步，你可以直接在每个 master 组件上来应用品牌的色调和细节，得益于其组件唯一来源的特性，我们可以很快将线框图转换为高保真设计图。
image
我一般习惯于先给其他人先看整个设计规范，即所有细化过样式的组件，来看看他们对这个有什么感觉，符不符合我们的品牌调性。
image
4、完善原型
当你的设计风格得到认可，就可以开始下一步：打磨原型细节。你可以检查一下还有哪些元素可以作为组件，哪些组件可以优化一下，每个需要交互的元素是否都添加了链接，以及交互效果是否正确。
一切就绪，你就可以分享出一个链接给开发，并告诉他们如何查看标注，如何导出素材，他们遇到问题也可以直接在原型上评论。
image
如果可以，你甚至还可以将此链接分享给用户，邀请他们来进行测试，以获得反馈。
以上，希望能给你带来一些帮助，并帮助你在下个项目中节省时间。
image
网友评论