I was quite surprised by how much the design community resonated with the concept of spacers since I published my

自从我发表论文以来，设计界对间隔件的概念产生了多少共鸣，我感到非常惊讶。

I would like to share some new thoughts with you in this article.

我想在本文中与您分享一些新想法。

If you are unfamiliar with the concept of spacer or you are interested in the first half of this story, please check out Worry less about spacing in Figma.

如果您不熟悉spacer的概念，或者对本故事的前半部分感兴趣，请查看 不用担心Figma中的间距 。

在本文中，我将讨论： (In this article, I will talk about:)

1. No spacers until you are ready
   准备好之前不要间隔
2. Create a hierarchy in your spacers
   在垫片中创建层次结构
3. Use space containers
   使用太空容器
4. Hand over design with spacers
   带垫片移交设计
5. Find spacer plugins in Figma
   在Figma中查找spacer插件

1.准备好之前不要使用垫片 (1. No spacers until you are ready)

Let me bring up the spacers again to set the scene.

让我再次抬起垫片以设置场景。

A spacer is a transparent box with your colour of choice and a label telling you what’s the pixel value of the vertical or horizontal space.

间隔物是一个透明的盒子，上面有您选择的颜色和一个标签，告诉您垂直或水平空间的像素值是多少。

Resisting the temptation of introducing spacers into your early design process is very important. Spacers will restrain how you think about space and layout, and force you to focus more on consistency over creating good design.

抵制在您的早期设计过程中引入垫片的诱惑非常重要。 垫片会限制您对空间和布局的看法，并迫使您将更多的精力放在一致性上，而不是创建好的设计。

It starts adding values when you have a really solid design concept, and is almost ready to componentise everything to create a design system.

当您拥有真正扎实的设计概念时，它将开始增加价值，并且几乎准备好将所有内容组成组件以创建设计系统。

2.在垫片中创建层次结构 (2. Create a hierarchy in your spacers)

There is a hierarchy in your design. There also could be one in your spacers.

您的设计中有一个层次结构。 垫片中也可能有一个。

Brad Frost introduced Atomic design, in which he divided the interface design system into 5 stages: Atoms, Molecules, Organisms, Templates and Pages.

Brad Frost介绍了Atomic设计 ，他将界面设计系统分为5个阶段： 原子 ， 分子 ， 生物 ， 模板和页面 。

When stepping through the 5 stages, you will also start finding the need to differentiate the spacers you used. For example, the spacers you created for an Atom need to be distinguished from the spacers for a Molecule.

当逐步完成这5个阶段时，您还将开始发现有必要区分所使用的垫片。 例如，您需要为原子创建的间隔物与分子的间隔物区分开。

Therefore, one set of spacers (for a certain breakpoint) might not be enough.

因此，一组垫片(对于某个断点)可能不够。

将角色分配给间隔物 (Assign roles to the spacers)

We can differentiate spacers by assigning them different roles by using colours.

我们可以通过使用颜色为垫片分配不同的角色来区分垫片。

In this example, I simplified the hierarchy of my design system to only include Atoms, Molecules and Organisms.

在此示例中，我简化了设计系统的层次结构，仅包含Atoms ， Molecules和Organisms 。

Here are these spacers in action:

这是起作用的这些间隔物：

You can see that by having different roles in your spacers, it is easier to tell Atoms, Molecules and Organisms apart from each other.

您会发现，通过在间隔基中扮演不同的角色，可以更轻松地将原子，分子和生物区分开。

3.使用太空容器 (3. Use space containers)

You have patterns in constructing elements of your design. What about patterns in how you use the spacers?

您在构造设计元素时有模式。 间隔物的使用方式又如何呢？

Richard, User Experience Lead at PreviousNext, introduced me the concept of space container over a Slack chat.

Richard ， PreviousNext的用户体验主管，向我介绍了Slack聊天中的空间容器的概念。

It’s simply a component with spacers, and placeholders to be replaced with defined design elements.

它只是一个带有垫片和占位符的组件，可以用定义的设计元素替换。

Here’s an example:

这是一个例子：

📽️ Here’s a quick demo video in loom showing you how to set up space containers in Figma.

📽️这是织布机中的一个快速演示视频，向您展示如何在Figma中设置空间容器。

4.用垫片移交设计 (4. Hand over design with spacers)

It’s time to hand over your design to the developers.

现在是时候将您的设计移交给开发人员了。

Two things you need to do:

您需要做的两件事：

• Put all of your components into one place, and structure them according to your design system hierarchy
  将所有组件放在一个位置，并根据设计系统层次结构进行结构化

• Show how to switch on and off the spacers
  展示如何打开和关闭垫片

Make sure you spend some time involving the developers when constructing the design system and creating spacing rules. Walking them through the design intent, considerations and explaining the role of spacers are also highly recommended.

在构建设计系统和创建间距规则时，请确保花一些时间让开发人员参与。 强烈建议他们逐步了解设计意图，注意事项并解释垫片的作用。

Remember that developers are not robots who implement your design. They are an integral part of the overall vision. They are also the gatekeepers to the experience you are both striving for.

请记住，开发人员不是实现您的设计的机器人。 它们是整体构想的组成部分。 他们还是你们共同追求的体验的守门人。

它如何使您和开发人员受益 (How it benefits you and the developers)

• Less time to document spacing rules for the designer
  减少设计者记录间距规则的时间
• Less or ideally no more guess work in spacing rules for the developer
  减少或理想情况下，不再需要为开发人员确定间距规则
• A clear hierarchy and component inventory for both parties
  双方明确的层次结构和组件清单

5.在Figma中查找spacer插件 (5. Find spacer plugins in Figma)

Here’s a list of plugins in Figma touches the concept of spacers:

这是Figma中涉及到间隔符概念的插件列表：

• Spacers (suggested by: Bertrand Berlureau)

  垫片 ( 由 Bertrand Berlureau 建议 )

• Spacing manager (suggested by: Janusz Wierzbowski from Friends of Figma Slack workspace)

  间距管理器 ( 建议：Figma Slack工作区之友的Janusz Wierzbowski )

• Grids generator (suggested by: Raffaele Vitale)

  网格生成器 ( 建议： Raffaele Vitale )

• Use the native layout grid in Figma to create spacers, so you can turn it on or off using cmd+G (suggested by: Michael Todd)

  使用Figma中的本机布局网格来创建间隔，因此您可以使用cmd + G打开或关闭它( 建议： Michael Todd )

• Visibility comes in handy when you need to show or hide spacers when the switch is in a separate design system file (suggested by: Zachary Sanderson-Harris)

  当开关位于单独的设计系统文件中时，需要显示或隐藏间隔物时， 可见性会派上用场( 建议： Zachary Sanderson-Harris )

Let me know in the comments if you come across other spacer-related plugins, I will add them to the list above.

如果您遇到其他与垫片相关的插件，请在评论中让我知道，我将它们添加到上面的列表中。

Thank you for reading! ✋🏿 Hi, I am Lennon Cheng, an Interaction Designer and a Freelancer. Currently living in Melbourne, Australia.

感谢您的阅读！ ✋🏿嗨，我是Lennon Cheng ，是互动设计师和自由职业者。 目前居住在澳大利亚墨尔本。