2024 年 9 月 2 日
Figma 最佳实践
我们从 Figma 成立之初就拥有丰富的经验，我们相信了解一些最佳实践非常有用。这些做法有助于简化我们的Grial UI Kit产品和我们提供的众多服务中的设计流程和开发。
.png)
你们中许多人可能还记得，在用户界面设计的早期，我们没有现在的优秀工具。在 Sketch 问世之前，我们处理了包含数千个图层的 Photoshop 文件或大量的 Illustrator 文件，这解决了我们的许多问题，并成为 UXDivers 的必备工具。在那些日子里，InVision在演示、原型设计和与客户互动方面发挥了重要作用。然后是 Figma，它看似有潜力，但当时还很年轻。但是，在短时间使用它并看到其背后的社区支持之后，很快就用一个工具代替了整个流程，我们毫不犹豫地做出了转变。
我们从 Figma 成立之初就拥有丰富的经验，我们相信了解一些最佳实践非常有用。这些做法有助于简化设计流程和开发，无论是在我们的 试用 UI 套件 产品以及我们提供的众多服务。
尽管这是一个相对较新的补充，但它在颜色、排版、属性、原型设计等许多方面都具有巨大的潜力。但是基础知识是至少为我们最常用的东西提供库，例如：
这样，设计过程就会大大加快，并且可以避免用户界面中的不一致之处。
在我们的设计中使用组件和变体对于保持一致性和避免在多个地方重复更改同一个元素至关重要。
这是另一个功能强大的工具，起初可能有点棘手，但毫无疑问，它是我们在设计元素、组织屏幕上的元素、使我们的设计响应式等元素时最好的朋友之一。
与自动布局齐头并进的是约束条件的使用，这对于理解元素修改容器时的行为至关重要。主要用途是当我们需要确保我们的设计在不同的屏幕尺寸上表现良好时。
与此相关的是，我们还可以将其与变量和最小/最大大小的使用联系起来。
例如，我们可以有两种按钮大小：移动版和桌面版。如果我们的设计从一种模式切换到另一种模式，我们的按钮也会切换。
挑战自己只使用框架，而不是群组或矩形。框架具有许多功能，通常可以简化和改进您的设计。避免添加矩形作为背景，图像也是如此。框架允许圆角半径，如果这还不够的话，它们可以实现自动布局以及许多其他好处。
请记住，通常会有一个团队在工作，而且你并不孤单，因此，无论是另一位设计师还是稍后将要实施你的设计的开发人员，所有内容都必须易于访问和理解。
虽然这不是 Figma 独有的功能，但有一些工具可以帮助我们解决这个问题：
提示： 最近，添加了在使用三个 “---” 命名页面时创建分隔符的选项。跟那些我们为保持事情井井有条而制作的 “________” 页面说再见。
与组织有关的一种良好做法是使用分支机构。尽管在开发中很常见，但在设计中并不常见，但它非常有用。我们可以创建一个特定的分支来与客户共享，同时不重叠地处理其他工作。另一个常见用途是当我们愿意开发一项新功能时；在不修改主文件的情况下创建一个 Branch 并进行所有必要的测试或修改。
小心： 至少目前，在每个分支中发表的评论不会与主分支合并；它们仅在该分支中可见。
最后但并非最不重要的是设计系统的使用。我们之前看到的大部分内容都可以成为其中的一部分，并在任意数量的文件中用作库。
拥有设计系统是一项不断演变的事情。对于 试用套件，拥有一个包含所有必要组件的库至关重要，可以构建我们想要的任何用户界面，或者在保持套件本质的同时添加新元素。
我们可以写一篇关于这些选项的完整博客，但就目前而言，这是一种熟悉概念并了解如何实现它们的方式，了解Figma的一些功能很重要，这将极大地提高你的工作效率并节省大量时间。
你熟悉或在 Figma 中使用过这些做法吗？请与可能认为它们有帮助的人分享。
