一世在设计界面和构建设计系统时花太多时间关注间距。您可能并不陌生于常数 1 px 和 8 px 的微调，连续检查您所创建的上一个组件的底部或中间空间，或者经典返回来调整一系列框架中的所有内容，因为您拥有更改了单个组件的大小。
这是一个解决方案：尝试设置一组垫片组件，并在 Figma 中使用自动布局。
在继续阅读之前，这里是织机中的快速演示视频。
- 您关心界面设计中的间距。
- 您使用Figma（如果没有，间隔子的概念可能仍然适用于其他设计工具）。
- 您熟悉或愿意阅读一些有关8pt 网格系统的信息（因此不必怀疑为什么此方法中的每个数字都设置为可被 8 整除）。
注意：本文中的屏幕截图引用了我今天在 Studio 中为Our Watch设计的作品。
- 我想记录和可视化我为组件和页面布局创建的间距规则，以便避免创建不必要的规则或不得不不断提醒自己这些规则。
- 我希望自己的框架保持完好无损，并不断调整组件，以减少设计维护时间。
Figma 中的垫片和自动布局的结合解决了这两个挑战。
它是一个透明的框，具有您选择的颜色，以及一个文本框，用于告诉您垂直或水平空间的像素值是多少。
这是其中带有垫片的卡组件：
请注意，我使用两种颜色来区分垂直（绿色）和水平（紫色）垫片。只要隔板对您有效，则完全由您决定如何设置隔板的样式。
在不同的时间，您可能希望使间隔物不可见或完全消失。该主垫片的功能就像一个开关，可帮助您控制整套垫片。
设置一组垫片
复制主垫片，更改高度和文本，创建一个新组件，然后重复进行直到设置好为止。这意味着主间隔器现在嵌套在每个新的间隔器组件中。
还记得我们如何设置 10 种不同的灰色阴影吗？不要在垫片上重复同样的错误。我发现通常只需要 5 种变体即可构建一个网页。
区分垂直和水平垫片
颜色有助于区分我的设置中的垂直和水平间隔物。我还建议使用不会伤害眼睛的颜色（例如绿色），并且与设计中使用的实际调色板有足够的区别。
如何设计和区分间隔物完全取决于您。确保它适合您。
每个断点一组
您的隔离物组也可以适应您的断点。
例如，XL 垂直间隔可能意味着在小断点处为 56px，在大断点处为 80px。
左：使用自动布局时，容器随着内容的增长而增长；右图：自动布局中元素的切换顺序不会损害结构（Source）
这是 Figma 对自动布局的书面定义：
将自动版式添加到框架时，内部的项目彼此相邻（垂直或水平）堆叠。然后，框架的大小由框架中项目的总大小决定。自动版式框架可以具有自己的填充，填充，描边和角半径，因此您可以创建按钮而无需添加其他图层。
- 使用 Figma 的自动版式设计，设计更多，尺寸更小
如果您不熟悉此概念，则这里有一个视频教程。
使用自动布局在您的组件中构建垫片
这是我想变成组件的手风琴产品：
第 1 步：使用水平自动布局将人字形和文本分组：
第 2 步：使用垂直自动布局添加关键点：
步骤 3：将其变成一个组件：
借助 spacer，自动布局中的值应始终保持为 0。
当将组件放在一起时，减少间隔物（通过主间隔物）的不透明度也很有帮助。
构建一个复杂的组件
现在，您可以将组件组合在一起以构建更复杂的组件。这是一个基于我们刚刚创建的手风琴的示例：
对于专门为复杂组件引入的垫片，我使用了不同的颜色。
建立页面
当您构建整个页面时，同样的想法也适用。
借助自动布局，现在更改单个组件的高度将很好地将所有其他组件向下推到页面上。
它只是可视化您创建的间距规则
而已。
您将花费更少的时间来创建不必要的规则和维护设计
自然地，它鼓励您在系统级思考上花费更多的时间。
您完全可以控制何时通过一个开关显示或隐藏垫片
调整主间隔物的不透明度，可以在进行设计演示时选择隐藏所有间隔物，或者在构建组件时选择调低的间隔物集。
您正在实时记录规则，并使开发人员更容易
将使用分隔符设置的组件放到页面上，很容易成为开发人员理解并用代码实现的真理来源。
不要以间隔和自动布局开始设计
我已经很难学到了。如果您在设计过程中太早引入这种方法，则隔离器和自动布局的结合可能很容易成为噩梦。
我们相信，在您的工作室中，当您拥有真正扎实的设计理念时，它就会开始增加价值，并且几乎准备好将所有内容组成组件并创建设计系统。
自动布局还不是万能的
自动版图对于 Figma 来说是相当新的。它非常强大，但是有时使用起来仍然很困难。例如，使具有嵌套自动布局的组件适应不同的宽度可能会特别具有挑战性。
毫无疑问，Figma 团队已经在进行下一次迭代，我们将很快找到一组更好的控件。
https://uxdesign.cc/worry-less-about-spacing-in-figma-8b44f34db4f5
若有收获，就点个赞吧
0 人点赞
