figma設計

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

自從我發表論文以來，設計界對間隔件的概念產生了多少共鳴，我感到非常驚訝。

last story. It encouraged me to think more deeply about the role of spacers in design and development. In my latest (and final) project at 最后一個故事 。 它鼓勵我更深入地思考墊片在設計和開發中的作用。 在Today, I took one step further to introduce spacers into the development handover process and our developer partner was over the moon.Today的最新(也是最后一個)項目中，我進一步邁出了一步，將間隔片引入了開發移交過程，而我們的開發合作伙伴已步入正軌。

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:)

No spacers until you are ready

準備好之前不要間隔

Create a hierarchy in your spacers

在墊片中創建層次結構

Use space containers

使用太空容器

Hand over design with spacers

帶墊片移交設計

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 card component uses horizontal and vertical spacers卡組件使用水平和垂直墊片

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個階段： 原子 ， 分子 ， 生物 ， 模板和頁面 。

Atomic design, image credit: 原子設計中界面設計系統的5個階段，圖像信用： Brad FrostBrad Frost

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.

因此，一組墊片(對于某個斷點)可能不夠。

A single set of spacers for the desktop breakpoint桌面斷點的一組隔離物

將角色分配給間隔物 (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 。

Spacers assigned with different roles分配了不同角色的墊片

Here are these spacers in action:

這是起作用的這些間隔物：

Example of spacers used in an Atom, a Molecule and an Organism在原子，分子和生物體中使用的間隔基的例子

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:

這是一個例子：

Space container examples太空集裝箱的例子

📽? 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
  將所有組件放在一個位置，并根據設計系統層次結構進行結構化

How the handover file might look in Figma (the screenshot is kept small on purpose)切換文件在Figma中的外觀(屏幕截圖故意保留得很小)

• Show how to switch on and off the spacers
  展示如何打開和關閉墊片

Instruction for how to turn on or off the spacers in Figma有關如何打開或關閉Figma中的墊片的說明

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.

在構建設計系統和創建間距規則時，請確?；ㄒ恍r間讓開發人員參與。 強烈建議他們逐步了解設計意圖，注意事項并解釋墊片的作用。

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

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women)，這是一個巴西組織，致力于通過采取行動，賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。

翻譯自: https://uxdesign.cc/handing-over-design-with-spacers-in-figma-6c5bfd76a6d5

figma設計

總結

以上是生活随笔為你收集整理的figma设计_在Figma中使用隔片移交设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。