figma下載

重點 (Top highlight)

I spend way too much time caring about spacing when designing interfaces and building design systems. You are probably no stranger to the constant 1 px and 8 px nudging, continuous checking of the bottom or in-between space for a previous component you have created, or the classic coming back to tweak everything in a series of frames just because you have changed the size of one single component.

在設計界面和構建設計系統時，我花了太多時間關注間距。 您可能并不陌生于常數1 px和8 px的微調，連續檢查所創建的上一個組件的底部或中間空間，或者經典返回來調整一系列框架中的所有內容，因為您擁有更改了單個組件的大小。

Here’s a solution: try setting up a set of spacer components and use auto-layout in Figma.

這是一個解決方案： 嘗試設置一組墊片組件，并在Figma中使用自動布局 。

Before you read on, here’s a quick demo video in loom.

在繼續閱讀之前，這里是織布機中的快速演示視頻 。

assuming我假設... (?🏿 I am assuming…)

• You care about spacing in interface design.
  您關心界面設計中的間距。

• You use Figma (if not, the concept of spacer may still apply to other design tools).

  您使用Figma (如果沒有，間隔子的概念可能仍然適用于其他設計工具)。

• You are familiar or willing to read a bit about the 8pt grid system (so you don’t have to question why every number in this approach is set up to be divisible by 8).

  您熟悉或愿意閱讀一些有關8pt網格系統的信息 (因此您不必質疑為什么此方法中的每個數字都設置為可以被8整除)。

Note: Screenshots in this article references my design work for Our Watch at my studio Today.

注意：本文的屏幕截圖引用了我今天在Studio中為Our Watch設計的作品。

🤔當我說“我想少擔心間距”時，是指： (🤔 When I say “I want to worry less about spacing”, I mean:)

• I want to document and visualise the spacing rules I have created for components and page layout so that I avoid creating unnecessary rules or having to constantly remind myself of said rules.

  我想記錄和可視化我為組件和頁面布局創建的間距規則， 以便避免創建不必要的規則或不得不不斷提醒自己這些規則 。

• I would like my frame to stay intact and adapt with my constant tweaking of components so that I waste less time maintaining my design.

  我希望自己的框架保持完好無損，并不斷調整組件， 以減少設計維護時間 。

The combination of spacers and auto-layout in Figma addresses both of the challenges.

Figma中的墊片和自動布局的結合解決了這兩個挑戰。

1.什么是墊片？ (1. What is a spacer?)

這是一個墊片(我沒有發明它)： (Here is a spacer (and I did not invent it):)

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

它是一個透明的框，具有您選擇的顏色，一個文本框告訴您垂直或水平空間的像素值是多少。

這是其中帶有墊片的卡組件： (Here is a card component with spacers in it:)

Notice that I use two colours to differentiate vertical (green) and horizontal (purple) spacers. It’s totally up to you how you style the spacers, as long as it works for you.

請注意，我使用兩種顏色來區分垂直(綠色)和水平(紫色)墊片。 只要能為您設計隔墊，就完全取決于您如何設計隔墊的樣式。

2.在Figma中設置墊片組件 (2. Set up spacer components in Figma)

創建一個主墊片以幫助您控制所有墊片 (Creating a main spacer to help you control all spacers)

At different times, you might want to make the spacers less visible or entirely disappear. This main spacer will function like a switch to help you control the full set of spacers.

在不同的時間，您可能希望使間隔物不可見或完全消失。 該主墊片的功能就像一個開關，可幫助您控制整個墊片。

設置一組墊片 (Set up a set of spacers)

Copy the main spacer, change the height and text, create a new component and repeat till you have a set. This means the main spacer is now nested in every single one of your new spacer component.

復制主墊片，更改高度和文本，創建一個新組件，然后重復進行直到設置好為止。 這意味著主間隔器現在嵌套在每個新的間隔器組件中。

Remember how we set up 10 different shades of grey? Don’t repeat the same mistake with spacers. I find I usually only need 5 variations to construct a web page.

還記得我們如何設置10種不同的灰色陰影嗎？ 不要在墊片上重復同樣的錯誤。 我發現通常只需要5個變體即可構建一個網頁。

區分垂直和水平墊片 (Differentiate vertical and horizontal spacers)

Colours help differentiate vertical and horizontal spacers in my setup. I also recommend using colours that are not going to hurt your eyes (e.g. green) and are different enough with your actual colour palette used in design.

顏色有助于區分我的設置中的垂直和水平間隔物。 我還建議使用不會傷害眼睛的顏色(例如綠色)，并且與設計中使用的實際調色板有足夠的區別。

It’s entirely up to you how you want to style and differentiate spacers. Make sure it works for you.

如何設計和區分墊片完全取決于您。 確保它適合您。

每個斷點一組 (A set for each breakpoints)

Your set of spacers can adapt with your breakpoints as well.

您的隔離物組也可以適應您的斷點。

For example, an XL vertical spacer might mean 56px on a small breakpoint and 80px on a large breakpoint.

例如，XL垂直間隔可能意味著在小斷點處為56px，在大斷點處為80px。

3.在Figma中什么是自動布局？ (3. What is auto-layout in Figma?)

These two images from Figma shows the essence of auto-layout:

來自Figma的以下兩個圖像顯示了自動布局的本質：

Source)Source )

This is Figma’s written definition of auto-layout:

這是Figma對自動布局的書面定義：

When you add Auto Layout to a frame, the items inside are stacked next to each other (either vertically or horizontally). The frame’s size is then determined by the total size of the items within it. Auto Layout frames can have their own padding, fill, stroke and corner radius, so you can create buttons without adding additional layers.— Design more, resize less, with Auto Layout by Figma

將自動版式添加到框架時，內部的項目彼此相鄰(垂直或水平)堆疊。 然后，框架的大小由框架中項目的總大小決定。 自動版式框架可以具有自己的填充，填充，筆觸和角半徑，因此您可以創建按鈕而無需添加其他圖層。— 使用 Figma的 自動版式 ， 設計更多，尺寸更少

Here’s a video tutorial if you are not familiar with the concept.

如果您不熟悉此概念，則這里有一個視頻教程 。

4.結合墊片和自動布局 (4. Combine spacers and auto-layout together)

使用自動布局在您的組件中構建墊片 (Build spacers into your components using auto-layout)

Here’s an accordion item I want to turn into a component:

這是我想變成組件的手風琴產品：

Step 1: use a horizontal auto-layout to group the chevron and text:

第1步：使用水平自動布局將人字形和文本分組：

Step 2: use a vertical auto-layout to add in the key-lines:

第2步：使用垂直自動布局添加關鍵點：

Step 3: Turn it into a component:

步驟3：將其變成一個組件：

With the help of spacer, the value in your auto-layout should always stay at 0.

借助spacer，自動布局中的值應始終保持為0。

Decreasing the opacity of the spacers (through the main spacer) helps a lot when putting a component together as well.

當將組件放在一起時，減少間隔物(通過主間隔物)的不透明度也很有幫助。

構建一個復雜的組件 (Build a complex component)

You can now combine components together to build more complex ones. Here’s an example of an accordion based on what we have just created:

現在，您可以將組件組合在一起以構建更復雜的組件。 這是一個基于我們剛剛創建的手風琴的示例：

I use a different colour for the spacers introduced specifically for the complex component.

對于專門為復雜組件引入的墊片，我使用了不同的顏色。

建立頁面 (Build a page)

The same idea applies when you build out an entire page.

當您構建整個頁面時，同樣的想法也適用。

With the help of auto-layout, now changing the height of a single component will just nicely push all the other components down the page.

借助自動布局，現在更改單個組件的高度將很好地將所有其他組件向下推入頁面。

5.它如何幫助您和他人 (5. How it helps you and others)

它只是可視化您創建的間距規則 (It simply visualises the spacing rules you have created)

That’s it.

而已。

您將花費更少的時間來創建不必要的規則和維護設計 (You will spend less time creating unnecessary rules and maintaining your design)

Naturally, it encourages you spending more time on system level thinking.

自然地，它鼓勵您在系統級思考上花費更多的時間。

您可以通過一個開關完全控制何時顯示或隱藏墊片 (You have total control over when to show or hide spacers with a single switch)

Adjusting the opacity of the main spacer, you can choose to hide all the spacers when doing a design presentation, or have a much tuned down set of spacers when building out components.

調整主間隔物的不透明度，可以在進行設計演示時選擇隱藏所有間隔物，或者在構建組件時選擇調低間隔的一組間隔物。

您正在實時記錄規則，并使開發人員更容易 (You are documenting rules on the fly and making it easier for the developers)

Putting the components you set up with spacers onto a page can easily become the source of truth for the developers to understand and implement in code.

將使用分隔符設置的組件放到頁面上，很容易成為開發人員理解并用代碼實現的真理來源。

6.不完善的解決方案 (6. An imperfect solution)

不要以間隔和自動布局開始設計 (Don’t start your design with spacer and auto-layout)

I have learned this the hard way. The combination of spacers and auto-layout might easily turn into a nightmare if you introduce this approach too early in your design process.

我已經很難學到了。 如果您在設計過程中太早引入這種方法，則間隔器和自動布局的組合可能很容易變成噩夢。

Collectively at our studio, we believe it starts adding value when you have a really solid design concept, and is almost ready to componentise everything and create a design system.

在我們的工作室里， 我們相信，當您擁有真正扎實的設計概念時，它就會開始增加價值，并且幾乎準備好將所有內容組成組件并創建設計系統。

自動布局還不是萬能的 (Auto-layout is not almighty, yet)

Auto-layout is fairly new to Figma. It’s very powerful, but can still be challenging to use at times. For example, adapting a component with nested auto-layout to different width might be particularly challenging.

自動版圖對于Figma來說是相當新的。 它非常強大，但有時使用起來仍然很困難。 例如，使具有嵌套自動布局的組件適應不同的寬度可能會特別具有挑戰性。

I have no doubt that the Figma team is already working on the next iteration and we will find a set of greater controls in no time.

毫無疑問，Figma團隊已經在進行下一次迭代，我們將很快找到一組更好的控件。

Part 2 of the story is here: Handing over design with spacers in Figma

故事的第2部分在這里 ： 在Figma中移交帶有墊片的設計

感謝您的閱讀！ (Thank you for reading!)

Hopefully this article gives you some new thoughts about spacing in design.

希望本文為您提供有關設計間距的一些新思路。

How do you manage spacing in your design? Do you think spacer and auto-layout will be a good combo? Feel free to leave some thoughts in the comment section.

您如何在設計中管理間距？ 您認為間隔和自動布局將是一個很好的組合嗎？ 隨時在評論部分中留下一些想法。

—

-

?🏿 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/worry-less-about-spacing-in-figma-8b44f34db4f5

figma下載

總結

以上是生活随笔為你收集整理的figma下载_不用担心Figma中的间距的全部內容，希望文章能夠幫你解決所遇到的問題。

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