原文地址：https://blog.nicolesaidy.com/how-to-streamline-your-ui-ux-workflow-with-figma-b72c30596435
去年，我一直使用Figma软件来进行我的UI/UX设计工作，并且它节省了我很多工作时间。他真的改变了我的工作流。
除了直观的使用。我喜欢Figma的原因是因为他是完整的一套东西。它使我能够在整个设计过程中工作：线框图、设计、设计系统、原型设计和协作。
我不想谈论你为什么应该使用Figma。反而，我将向你展示你怎样使用一个简单的黑客软件节省你下一个项目的时间。
这都归结为Figma中的一个重要特性：✨组件✨。
组件在Figma中是和Sketch中的符号是非常相似的。但是我认为Figma的组件更灵活，更容易使用。如果您对组件不太了解，请先阅读本文或观看本教程。
Figma 怎样节省我的时间呢？让我们看看传统的设计过程与Figma中的设计过程的对比。
最简单的经典过程是在像Balsamiq这样的应用程序中构建线框图，然后在另一个应用程序 Sketch中构建设计，然后在另一个应用程序像 inVision中构建原型。这不是一个相互作用的过程，因为它会引起摩擦并浪费很多时间，更不用说它会在线框和原型之间产生巨大的差距。
使用Figma，您可以跳过2个步骤，在Figma中构建交互式线框，创建一个UI库（在相同的时间），然后更新已经花费宝贵时间用于创建最终设计原型的UI组件。
让我换个说法。从一开始就使用组件构建线框。当你这样做时，在你的线框被批准之后，你所需要做的就是更新组件。这将把它们从灰度基本形状转换为详细设计的组件，这些组件可以完全将线框转换为高保真原型。
下面是执行步骤
在这步骤之前，你应该已经在纸上画完了你屏幕上的草图。之后，是时候把他们移到数字线框了。
你开始在屏幕上画之前。第一件事是你需要创建一个UI框架库。这就是所有可重用的UI组件和指导原则将发生的地方。
第一个组件你应该创建你的文本样式。创建每一个样式的组件（H1,H2,H3,H4,P,Small，等）。保持原样的字体，不要考虑设计。
现在，每当您想向屏幕添加文本时，都可以从UI库中的文本组件中获取一个实例。为什么?当你进入设计阶段，想要改变你所有屏幕的字体样式时，你只需要从这里改变一次，它就会在任何地方更新。你一会就明白了。
这个概念同样适用于所有其他组件。
创建所有其他对象作为组件，如按钮、输入、下拉列表、导航栏、卡片、标签、页脚等。我通常喜欢先在屏幕中创建对象，在它的上下文中构建它，然后将它拖到我的UI库并将其转换为组件，然后将其复制回我的屏幕。
到项目结束时，（几乎）您在设计中创建的每个对象都应该是一个组件。这不仅可以节省您的工作时间，而且还可以保持整个产品的一致性，这是UI/UX设计中的一个关键点。
完成线框图和创建UI库之后，是时候让线框图交互了。幸运的是，Figma让这一切变得非常容易。
您只需要在原型模式下将每个对象拖到其链接页。请记住，链接原始组件会将相同的链接应用于其所有实例，如下所示。
下一步是与利益相关者共享交互式线框，并通过直接在原型上添加评论来获得反馈。
在几个迭代周期之后，您的线框应该得到批准。
一旦您的交互式线框获得批准，您现在就可以设计系统的样式。在这个步骤中，您将品牌设计指南、颜色和设计细节添加到您的UI库中已经构建的组件中。此步骤完全将线框转换为高保真设计原型。
我喜欢先向利益相关者展示风格指南，以便在向他们展示所有屏幕之前获得关于情绪和设计风格的反馈。我喜欢在其中添加一些UI组件，让他们了解每个组件的设计方式。
一旦样式指南获得批准，剩下的就是对原型进行润色。在这里你可以确保一切都到位。有些对象可能不是需要设计的组件，或者需要填充的组件。确保播放原型并尝试链接以确保所有链接都正常工作。
原型完成了！现在，您可以与利益相关者共享一个链接，以获得最终批准。然后，您将它交给开发人员，向他们展示如何检查和导出Figma中的图像，同时他们还可以直接在原型上提出任何问题。
您还可以与用户共享一个公共链接来测试原型并收集反馈。
就这样！我希望我的过程能帮助你节省下一个项目的时间。
如果你喜欢这个，那么你肯定会喜欢我用Figma简化你的工作流程的SkillShare类，点击这里免费获得我的类（以及2个月的SkillShare溢价）。
别忘了在下面给我一些👏，在我的博客上写更多与设计相关的文章。
