在我过去八年的设计生涯中，我大部分时间都在 Figma 上工作，与设计师和工程师合作创建组件，建立模式，从而推动产品不断发展，并在实际应用中展示效果。
在这个过程中，有很多时刻让我感到无比满足和快乐，比如发布新库文件时，或者在应用中看到曾经只存在于 Figma 中的组件活跃于界面中。但最让我开心的是，通过使用系统，让设计师能够更自信地开展工作。设计系统的目标从来不是限制或减少创造力和探索，而是帮助团队把所有的决策和模式整理出来供其他人使用，使他们发挥最佳水平，这是我最欣赏的地方。
在 Figma 中创建组件相对简单。但要使用如约束和自动布局这样的工具来构建可以在各种情况下、不同屏幕宽度和高度下良好运行的组件，则需要更多的挑战和胆识。首先，让我们先来谈谈这些工具及其在 Figma 内的工作原理，同时我也会分享一些帮助确保系统可靠性的技巧和实践。
在 Figma 中，我们可以使用两个主要工具来构建响应灵活的组件：约束和自动布局。约束允许我们设置当 父容器 调整大小时选定项目的行为。而自动布局则是我们可以应用于容器的工具，使其根据 内部 的内容调整大小。
正如我们能够使用 约束 来设置组件中项目的行为一样，我们可以使用自动布局来定义组件本身的大小，以及内容在框架内的调整方式。
在设计系统的组件中，自动布局是非常有用的工具，比如按钮或输入框，或者任何我们预期设计师在其工作中进行修改的组件。自动布局允许我们在保持设定的间距、内距和调整属性的前提下调整组件的内容。考虑到为团队中的其他人构建可扩展和强大的组件，使用自动布局是至关重要的，并且是 Figma 中绝佳的工具。
然而，尽管自动布局非常棒，但对于许多设计师（包括我自己）来说，这个布局工具往往让人感到望而生畏。使用自动布局需要提前考虑框架或组件应该如何表现，偶尔我们还可能直到团队中的某人使用时才发现某些东西未按预期工作。
我很乐意分享一些我在用该功能构建响应组件时总结的技巧，希望这些建议能在你建立组件库时有所帮助。但首先，也许更详尽地介绍如何使用工具时的各种布局选项会很有帮助。
当我们将图层的大小设置为 Fixed 时，无论其父容器和内部内容如何变化，其大小都保持不变。我们希望在设计中应用固定大小选项的项目是那些尺寸永远不应该改变的项目，如 iOS 的 Table Row 中的 Toggle。如果由于内部内容变化导致该 Table Row 的宽度或高度改变，我们的 Toggle 大小仍将保持不变。
💡 小贴士： 当 Figma 在我们的宽度和高度输入框右边显示无 “Fill” 或 “Hug” 标签的数字时，这表明值为 Fixed。
通过将图层的大小选项设置为 Fill，图层类似于水装满容器一样填满容器。在以下示例中，其中 Table Row 的标签宽度设置为 Fill，我们的文本将填充到容器对 Toggle 的边缘。
💡 小贴士： 我们可以通过双击框架选择边界的顶部或侧面，同时按住 ⌥ Option 键来快速设置大小为 Fill。 (但确保其所在的容器已经应用了自动布局！)
虽然听起来有些不寻常，但相信我，这样解释有助于理解！ 我把 Hug 重新定义属性想象为就像我们抱着一个气球。如果气球在我们怀中膨胀，我们的抱会变大！但如果气球的气体出来了，我们抱的范围会缩小。
当我们在 Figma 中将大小选项设置为 Hug 时，图层的大小将根据内容的大小而增长或缩小。在下方的例子中，文本层的大小取决于这个次要标签的长度。
💡 小贴士： 我们可以通过双击框架最顶部或侧面的选择边界来快速设置大小为 Hug。
我将这个文本图层的宽度设置为 Hug，因为如果需要调整大小，我要确保其中的主标签（本例中的“Wi-Fi”），已设置为 Fill，只能占据剩余的可用空间。
没有疑问，自动布局是一个绝佳的工具，但对于许多设计师（包括我自己）来说，它有时在使用上会比较令人沮丧。同时，想要确保你做对了有关组件可能用途的布局调整和决策也不太容易。
尽管 Figma 提供了在属性面板中悬停在调节选项时的画布提示，如 fixed、fill 和 hug，我们仍无法看到决策的最终结果，而当出错时也很难知道从何处下手进行调试。
当我最初在开始使用自动布局时，我记得自己以为做对了一切，然而当在实际设计中使用时却发现它崩溃了。你听着是不是很熟悉？我的工作流程大致如下：
步骤 1: 设计并创建一个组件
对我来说，第一步总是创建我需要的界面，并把它转变为一个组件 (⌘ Command, ⌥ Option, K)，把设计准备好，以便我自己或其他设计师在设计中使用。
步骤 2: 添加自动布局并进行调整
如这个界面中，来自 iOS 的 TableRow 单元格需要响应设备的变化，然后我将添加自动布局。在这一阶段，组件内部的内容可能会发生迁移。但是在进行一些调试后，我一般可以选择正确的设置，以使组件看起来符合预期。
步骤 3: 使用一个实例
接下来，我终于感到准备好使用我刚刚创建的组件实例了！但是，就在添加合适的内容或调整其大小时，却出现了问题。在这种情况下，我本以为不论高度如何，内容应该保持居中，文本填充整个容器，标签和插图始终保持在最右端。
这迅速将我引向第四步：压倒。
当我比较自己原始的应用和使用自动布局的方法与我今天的方式，有一个显著的差异：开始测试应用自动布局结果的顺序。
我过去常常等到 最后 才看组件的图层结构和自动布局设置是否运作正常，如果有问题，我总觉得需要重新开始。从头再来。而现在，我喜欢先生成一个未完成的组件实例，并以怪异且未预料的方式拉伸它，看看会发生什么。如果我能让这个组件在最奇怪的大小中正常工作，我就确信它能在几乎所有情况下都能工作。为了更好地展示这一点，这种方法如下：
步骤 1: 没有完成设计时，创建一个组件
回忆一下 TableView 单元格组件，我会先创建框架，也许加入一两件内容，然后几乎立即将未完成的设计转换成一个组件 (⌘ Command, ⌥ Option, K)。
步骤 2: 创建未完成的组件实例
创建组件后，下一步我将从未完成的组件中生成一个实例，可以通过按住 ⌥ Option 拖动来完成。
步骤 3: 拉伸和调整组件大小
这一步，使我豁然开朗：调整这个未完成实例的大小，看看什么在起作用，更重要的是，什么地方出了问题。通过这一操作，我获得了一个全新的参考点，同时能 立即 看到我的自动布局设置如何影响实例。对于我来说，这种即时的视觉反馈非常有用！
步骤 4: 添加剩余内容并进行调整
最后，是时候在继续调整过程中添加剩余的内容了。在这个过程中，我会添加标题、描述、标签和小箭头，同时对自动布局允许的大小和对齐属性进行调整。参考点依然在我面前，由于实例进行了显著的调整，包含了更多的内容，我可以立即知道我所做的更改是否能带来正确的视觉布局效果。
当你看到这种方法时，可能觉得这是一个微小的变化，实际上，确实如此！通过简单地调整构建组件和使用布局设置的顺序，我可以更清晰地理解自动布局中的控制和设置，确保这个组件在任何人自己的设计中都能很好地运作。
