分类 - Figma
图标是任何设计系统或产品体验的重要组成部分。图标帮助我们快速导航。它们与语言无关。最重要的是：它们真的很小，所以它们不会占用太多的空间。图标是良好设计系统的基本组成部分，对营销材料非常有帮助。它们是插图内容的基本构建块，但它们也具有很高的技术性。
喜欢设计图标的人并不多，擅长设计的人就更少了。我编写本指南是为了帮助您成为这些人中的一员。
无论您是设计系统专家、插画家还是产品设计师，本指南都将帮助您学习如何构建图标、如何将它们与您的品牌保持一致，以及如何将它们实施到您的设计系统中。让我们从基础开始。
图标的基本元素
尺寸
一致性是图标的关键，当你构建它们时，所有的图标都应该是相同的大小。首先，您需要确保您知道您的网格是如何构建的（8 或 10 的倍数？）。从那里，您的基本图标大小应该直接与此相关。所以，如果你有一个基于 8s 的网格，你会想要在 16、24 或 32 处构建。
选择一个通用尺寸来构建您的所有图标，然后允许您的工程师缩放到其他设计师可能需要的其他尺寸。您不想以多种尺寸一遍又一遍地构建相同的图标。
当您需要字形复杂度时，这就是您想要开始添加大小的时候。你的基本产品图标可能是 24 像素，但营销图标是 80 像素，因为在使用上存在巨大差异。您需要为那些较大的尺寸添加细节。
在构建不同尺寸的相同图标时，我喜欢从最大的尺寸开始，然后向下。我发现删除细节和简化要容易得多，而不是边走边添加。在您真正将其最小化之前，它还可以让您了解对象。
颜色
对于产品图标，使用 1 种颜色：黑色。除此之外，您的组件将变得过于复杂，其他设计师难以利用。对于营销图标，如果它是您品牌的重要组成部分，您可能希望使用 2 种颜色，但我个人认为图标应该是单一颜色。任何具有 3 种或更多颜色的东西都是插图，而不是图标。
网格
该像素网格是使用最小增量的根本格：一个像素。在构建图标时，您总是希望将对象与像素网格对齐，尤其是直线。但是，您可以在像素网格上构建其他形状（如果您使用 Figma，您已经自动完成了）。你想在像素网格上构建东西，不仅仅是因为它会渲染得更好，还因为它让你的生活更轻松。当您使用网格时，均匀地间隔事物要容易得多。它可以帮助您与您的位置保持一致，并且总体上会使您的图标看起来更好。您可以在 F
带有示例的介绍，以便您最终了解自动布局在 Figma 中的工作原理，以及如何使用它来自动调整您的设计。
自动布局是 Figma 中最重要的功能之一，其多功能性使其与其他设计工具中的功能区分开来。简而言之，它允许您以一种可以自动增长的方式构建组件和框架，使容器适应其内容的大小，或者相反。
作为一个如此灵活的功能，它也有其复杂性和局限性。可能有点难以理解它是如何工作的，尤其是在开始时。最初也很难在没有如此多的尝试和反复试验的情况下获得可预测的结果。
在本文中，我们将介绍使用自动布局可以实现的目标。我们将从它最基本的特征开始一步一步地了解它实现更复杂的设计布局的潜力。即使这只是一个介绍，我希望本指南足够完整，让您比以往任何时候都更有信心开始使用此功能。
获取基础知识
让我们从简单的事情开始。您可以将自动布局应用于框架（即使是空的）和组件。但是，您将通过至少两层开始了解它是如何工作的。
典型的例子是一个按钮：一个带有文本的框架，尽可能简单。通过应用自动布局，您已经可以看到一些正在发生的事情，我们将一一看到以了解它们，并使它们适应我们的需要。
方向
首先，我们有方向。这意味着组件在拥有更多或更少内容后将如何增长。这可以是垂直的（向下的箭头）或水平的（向右的箭头）。在我们的第一个示例中，我们将其设置为水平的。这意味着如果文本较长，则组件将水平拉伸以为内容腾出空间。
方向也可以是垂直的。Figma 根据组件的结构默认应用一个或另一个，从它的理解来看，这对每种情况都更有意义。无论如何，这是您可以随时更改的内容。
填充
如果您以前使用过 CSS，这对您来说可能听起来很熟悉。如果您还没有，那么您可以将填充理解为组件的内部边距。当您应用 Auto Layout 时，Figma 将根据元素之前与容器框架的间隔自动为每一边添加填充。如果您单击填充选项，您将能够看到应用的值：Figma 已计算出它们的上下、左右相同。即便如此，您也可以修改它们，因此所有值都彼此不同。
当所有填充都不相同时，您将看到文本Mixed。如果您更愿意同时对所有边应用相同的值，您只需输入所需