當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

figma设计_在Figma中使用隔片移交设计

發(fā)布時間：2023/12/9 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 figma设计_在Figma中使用隔片移交设计小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

figma設(shè)計(jì)

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

自從我發(fā)表論文以來，設(shè)計(jì)界對間隔件的概念產(chǎn)生了多少共鳴，我感到非常驚訝。

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 最后一個故事。它鼓勵我更深入地思考墊片在設(shè)計(jì)和開發(fā)中的作用。在Today, I took one step further to introduce spacers into the development handover process and our developer partner was over the moon.Today的最新(也是最后一個)項(xiàng)目中，我進(jìn)一步邁出了一步，將間隔片引入了開發(fā)移交過程，而我們的開發(fā)合作伙伴已步入正軌。

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的概念，或者對本故事的前半部分感興趣，請查看 不用擔(dān)心Figma中的間距 。

在本文中，我將討論： (In this article, I will talk about:)

No spacers until you are ready

準(zhǔn)備好之前不要間隔

Create a hierarchy in your spacers

在墊片中創(chuàng)建層次結(jié)構(gòu)

Use space containers

使用太空容器

Hand over design with spacers

帶墊片移交設(shè)計(jì)

Find spacer plugins in Figma

在Figma中查找spacer插件

1.準(zhǔn)備好之前不要使用墊片 (1. No spacers until you are ready)

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

讓我再次抬起墊片以設(shè)置場景。

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.

間隔物是一個透明的盒子，上面有您選擇的顏色和一個標(biāo)簽，告訴您垂直或水平空間的像素值是多少。

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.

抵制在您的早期設(shè)計(jì)過程中引入墊片的誘惑非常重要。墊片會限制您對空間和布局的看法，并迫使您將更多的精力放在一致性上，而不是創(chuàng)建好的設(shè)計(jì)。

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

當(dāng)您擁有真正扎實(shí)的設(shè)計(jì)概念時，它將開始增加價值，并且?guī)缀鯗?zhǔn)備好將所有內(nèi)容組成組件以創(chuàng)建設(shè)計(jì)系統(tǒng)。

2.在墊片中創(chuàng)建層次結(jié)構(gòu) (2. Create a hierarchy in your spacers)

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

您的設(shè)計(jì)中有一個層次結(jié)構(gòu)。墊片中也可能有一個。

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設(shè)計(jì) ，他將界面設(shè)計(jì)系統(tǒng)分為5個階段：原子，分子，生物，模板和頁面。

Atomic design, image credit: 原子設(shè)計(jì)中界面設(shè)計(jì)系統(tǒng)的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.

當(dāng)逐步完成這5個階段時，您還將開始發(fā)現(xiàn)有必要區(qū)分所使用的墊片。例如，您需要為原子創(chuàng)建的間隔物與分子的間隔物區(qū)分開。

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

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

A single set of spacers for the desktop breakpoint桌面斷點(diǎn)的一組隔離物

將角色分配給間隔物 (Assign roles to the spacers)

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

我們可以通過使用顏色為墊片分配不同的角色來區(qū)分墊片。

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

在此示例中，我簡化了設(shè)計(jì)系統(tǒng)的層次結(jié)構(gòu)，僅包含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.

您會發(fā)現(xiàn)，通過在間隔基中扮演不同的角色，可以更輕松地將原子，分子和生物區(qū)分開。

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

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

您在構(gòu)造設(shè)計(jì)元素時有模式。間隔物的使用方式又如何呢？

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

Richard ， PreviousNext的用戶體驗(yàn)主管，向我介紹了Slack聊天中的空間容器的概念。

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

它只是一個帶有墊片和占位符的組件，可以用定義的設(shè)計(jì)元素替換。

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.

📽?這是織布機(jī)中的一個快速演示視頻，向您展示如何在Figma中設(shè)置空間容器。

4.用墊片移交設(shè)計(jì) (4. Hand over design with spacers)

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

現(xiàn)在是時候?qū)⒛脑O(shè)計(jì)移交給開發(fā)人員了。

Two things you need to do:

您需要做的兩件事：

Put all of your components into one place, and structure them according to your design system hierarchy
將所有組件放在一個位置，并根據(jù)設(shè)計(jì)系統(tǒng)層次結(jié)構(gòu)進(jìn)行結(jié)構(gòu)化

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
展示如何打開和關(guān)閉墊片

Instruction for how to turn on or off the spacers in Figma有關(guān)如何打開或關(guān)閉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.

在構(gòu)建設(shè)計(jì)系統(tǒng)和創(chuàng)建間距規(guī)則時，請確保花一些時間讓開發(fā)人員參與。強(qiáng)烈建議他們逐步了解設(shè)計(jì)意圖，注意事項(xiàng)并解釋墊片的作用。

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.

請記住，開發(fā)人員不是實(shí)現(xiàn)您的設(shè)計(jì)的機(jī)器人。它們是整體構(gòu)想的組成部分。他們還是你們共同追求的體驗(yàn)的守門人。

它如何使您和開發(fā)人員受益 (How it benefits you and the developers)

Less time to document spacing rules for the designer
減少設(shè)計(jì)者記錄間距規(guī)則的時間
Less or ideally no more guess work in spacing rules for the developer
減少或理想情況下，不再需要為開發(fā)人員確定間距規(guī)則
A clear hierarchy and component inventory for both parties
雙方明確的層次結(jié)構(gòu)和組件清單

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工作區(qū)之友的Janusz Wierzbowski )
Grids generator (suggested by: Raffaele Vitale)
網(wǎng)格生成器 ( 建議： 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中的本機(jī)布局網(wǎng)格來創(chuàng)建間隔，因此您可以使用cmd + G打開或關(guān)閉它( 建議： 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)
當(dāng)開關(guān)位于單獨(dú)的設(shè)計(jì)系統(tǒng)文件中時，需要顯示或隱藏間隔物時， 可見性會派上用場( 建議： 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.

如果您遇到其他與墊片相關(guān)的插件，請?jiān)谠u論中讓我知道，我將它們添加到上面的列表中。

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

感謝您的閱讀！ ?🏿嗨，我是Lennon Cheng ，是互動設(shè)計(jì)師和自由職業(yè)者。目前居住在澳大利亞墨爾本。

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)，這是一個巴西組織，致力于通過采取行動，賦權(quán)和知識共享的舉措來促進(jìn)科技行業(yè)中的黑人女性平等。對系統(tǒng)性種族主義保持沉默是不可行的。建立您相信的設(shè)計(jì)社區(qū)。

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