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 ，是互動設計師和自由職業者。 目前居住在澳大利亞墨爾本。