figma下載

Figma’s Auto Layout has been around for a while, but not everyone’s aware of the benefits it brings. It doesn’t replace constraints, they’re still very much needed. The trick is to use the right feature where necessary. I want to show you how to combine components, constraints, and Auto Layout for the best results.

Figma的自動版式已經存在了一段時間，但并不是每個人都意識到它帶來的好處。 它不能代替約束，仍然非常需要它們。 訣竅是在必要時使用正確的功能。 我想向您展示如何組合組件，約束和自動版式以獲得最佳效果。

I threw together a screen for an Uber Eats inspired food delivery app and I’m going to tear it down to show you how you can use Auto Layout along with constraints and components to up your design game.

我為受Uber Eats啟發的送餐應用程序放了一個屏幕，我將其拆下來向您展示如何使用自動版式以及約束和組件來設計游戲。

Prototype in Figma Mirror. A little drizzly today, don’t mind the droplets. Figma Mirror中的原型。 今天有點毛毛雨，不要介意水滴。

Most of you already know that, but for a word of introduction, what Auto Layout does is automatically arrange elements placed inside of a frame. These elements can be either arranged vertically or horizontally and you can set the spacing between individual elements as well as between the elements and the borders of the frame. Because of this can’t use constraints or place elements on top of one another in frames that use Auto Layout.

你們大多數人都已經知道這一點，但簡單地說，“自動布局”的作用是自動排列放置在框架內部的元素。 這些元素可以垂直或水平排列，您可以設置各個元素之間以及元素與框架邊框之間的間距。 因此，不能使用約束，也不能在使用“自動布局”的框架中將元素彼此重疊放置。

At the top-most level, these are the four separate elements that the screen/frame is comprised of.

在最頂層，這些是組成屏幕/框架的四個獨立元素。

The header consists of four inner frames and uses Auto Layout. We’ll get to it later.

頁眉由四個內部框架組成，并使用“自動布局”。 我們稍后再討論。

This is the headline element which is simply a left and bottom constrained text element inside a frame.

這是標題元素，僅是框架內的左側和底部約束文本元素。

The content area frame is a little more complex. More on that later.

內容區域框架稍微復雜一些。 以后再說。

The bottom menu houses a top and horizontally stretched 375x1px light gray rectangle and a group of icons inside a frame that we’ll tackle a little later.

底部菜單包含頂部和水平拉伸的375x1px淺灰色矩形，以及框架內的一組圖標，稍后我們將解決。

The frame for the screen is a lot longer than shown in the example above so that the much longer content area can be scrollable. The header’s and the menu’s positions are fixed when scrolling, which is one of the reasons we can’t be using Auto Layout in this frame. The sections (2) and (3) have their constraints set to align to top and stick to the left and right edges so that if the frame was to be resized, they’d stick to their initial position and also fill out the screen horizontally the way they do now.

屏幕的框架比上面的示例顯示的要長得多，因此可以滾動更長的內容區域。 滾動時標題和菜單的位置是固定的，這是我們不能在此框架中使用“自動布局”的原因之一。 將第(2)和(3)節的約束設置為與頂部對齊并固定在左右邊緣，這樣，如果要調整框架的大小，它們將固定在其初始位置并水平填充屏幕他們現在的方式。

Now let’s look at the header element. It’s comprised of another four frames and this is where Auto Layout comes into play. They’re arranged vertically and there’s no spacing between any of them or any of the borders of the frame.

現在讓我們看一下header元素。 它由另外四個幀組成，這是自動版式發揮作用的地方。 它們是垂直排列的，它們之間或框架的邊框之間都沒有間距。

This is the typical status icon setup in iOS. This frame contains a group of elements locked inside a frame that is set centered both horizontally and vertically. The inner frame houses a left and center constrained text element and right and center constrained vector icons.

這是iOS中典型的狀態圖標設置。 此框架包含一組鎖定在水平和垂直居中設置的框架內的元素。 內部框架包含一個左和中心約束的文本元素以及右和中心約束的矢量圖標。

This frame contains a frame that again uses Auto Layout to take care of the elements inside of it — we’ll get to it later.

該框架包含一個框架，該框架再次使用“自動布局”來處理其中的元素-我們將在稍后進行介紹。

It’s just a simple spacer element, a frame that is 1px tall with a light gray background.

這只是一個簡單的間隔元素，一個高度為1px的框架，背景為淺灰色。

This frame contains a left and center aligned icon and a horizontally and vertically centered text element.

該框架包含一個左對齊和居中對齊的圖標以及一個水平居中和垂直居中的文本元素。

Now since every frame I use in this project is a component, what this does is enable me to easily modify the content of the header element across many screens. I can now easily modify the height of all inner frames or add more inner frames.

現在，由于我在該項目中使用的每個框架都是一個組件，因此使我能夠輕松地在許多屏幕上修改header元素的內容。 現在，我可以輕松地修改所有內部框架的高度或添加更多內部框架。

I often use this type of structuring when designing menus. In one of the bigger projects I work on we often use popup menus with a set number of options. The master component includes all these available options, but since each child instance of the popup menu uses 3–4 options at most, I just hide all the unnecessary ones. This way I use the same component across the entire system and just hide/unhide whatever menu options I need on a given screen. This technique could be used the same way in case of the header above — you could include all types of header elements used anywhere in the app and just hide/unhide the ones you need on a given screen.

在設計菜單時，我經常使用這種類型的結構。 在我從事的較大的項目之一中，我們經常使用帶有一定數量選項的彈出菜單。 主組件包括所有這些可用選項，但是由于彈出菜單的每個子實例最多使用3–4個選項，因此我只隱藏了所有不必要的選項。 這樣，我在整個系統中使用相同的組件，并且只隱藏/取消隱藏給定屏幕上需要的任何菜單選項。 對于上面的標題，可以以相同的方式使用此技術-您可以包括應用程序中任何位置使用的所有標題元素類型，而只在給定屏幕上隱藏/取消隱藏所需的標題元素。

The content area frame contains cards (in the case of this particular project there are 5 cards) that are arranged vertically. The cards are 345px wide, and the horizontal padding is set to 15. That’s because I’m designing with a specific screen size in mind. I might be adding more cards, but I won’t be changing the screen’s size to anything other than 375px wide. We also needed some spacing between the cards themselves, so I set it to 32px. All cards use the same parent component whose inner elements (the image, the title etc.) I later modify accordingly.

內容區域框架包含垂直排列的卡片(在此特定項目中，有5張卡片)。 這些卡的寬度為345px，水平填充設置為15。這是因為我在設計時考慮了特定的屏幕尺寸。 我可能會添加更多的卡，但是我不會將屏幕的尺寸更改為375像素寬以外的任何尺寸。 我們還需要在卡本身之間留一些間距，因此我將其設置為32px。 所有卡都使用相同的父組件，其內部元素(圖像，標題等)將在以后進行相應修改。

The card element is another component that exploits the Auto Layout feature.

卡元素是利用自動布局功能的另一個組件。

This is the image frame. In case of an app like this you could set up a bunch of image components that you could then easily switch between. You could also set these images up as styles. Check out my article on how to create a simple design system to find out how.

這是圖像幀。 如果是這樣的應用，您可以設置一堆圖像組件，然后可以在它們之間輕松切換。 您也可以將這些圖像設置為樣式。 查看有關如何創建簡單設計系統的文章，以了解如何進行。

The title & delivery time frame consists of two elements — one aligned to left and center, the other one to right and center as well.

標題和交付時間框架由兩個元素組成-一個元素左對齊并居中，另一個元素右對齊并居中。

This Auto Laid out frame uses Auto Layout for the two tags inside that are also using Auto Layout themselves. I’ll focus on this particular element in a bit.

此自動布局框架將自動布??局用于內部的兩個標簽，它們本身也使用自動布局。 我將重點關注這個特定元素。

Now again this kind of setup enables us to modify the contents of an individual card — modify, add or remove elements from it without negatively impacting the content area. Say your stakeholders decide it’d be a good idea to place a little description for every restaurant under its name, you just add a frame that houses a text element and you’re good to go — this design change is not only automatically populated to all your screen but also arranged according to the layout you’ve decided on.

現在，這種設置再次使我們能夠修改單個卡的內容-修改，添加或刪除其中的元素，而不會對內容區域造成負面影響。 假設您的利益相關者認為在每個餐廳的名稱下放置一個簡短的描述是一個好主意，您只需添加一個包含文本元素的框架，便可以了，這種設計更改不僅會自動填充到您的所有屏幕，還可以根據您確定的布局進行排列。

The tags use the type of Auto Layout structuring I talked about earlier. As shown above, both tags stem from the same master component. The master component contains all types of elements used in a tag. The icon (replacable) and 3 editable text elements. The visibility of these elements is then configured accordingly. This way if you decide to change the font styling, the colors or the border radius of a tag, all you need to do is modify the settings of only one component.

標記使用我之前提到的“自動布局”結構的類型。 如上所示，兩個標簽都來自同一主組件。 主組件包含標簽中使用的所有類型的元素。 圖標(可替換)和3個可編輯文本元素。 然后相應地配置這些元素的可見性。 這樣，如果您決定更改標簽的字體樣式，顏色或邊框半徑，則只需修改一個組件的設置即可。

This is one of my favorite examples of combining Auto Layout with constraints. At the top-most level, both frames contain a center-aligned frame. The center-aligned frames use Auto Layout to arrange elements they contain and depending on what’s going on inside, how many elements there are or how big they are, they expand or contract while retaining the correct position.

這是將自動版式與約束相結合的最喜歡的示例之一。 在最頂層，兩個框架都包含一個中心對齊的框架。 居中對齊的框架使用“自動布局”來排列它們包含的元素，并根據內部發生的情況，有多少個元素或它們的大小來擴展或收縮，同時保留正確的位置。

There are many other way to combine Auto Layout with constraints, especially at a more complex level, where you need to accommodate for screen size changes as well as any changes inside the frames, but this short article should give you a general idea of what can be done using the features Figma provides.

還有許多其他方法可以將自動版式與約束結合起來，尤其是在更復雜的級別上，在這種情況下，您需要適應屏幕尺寸的變化以及框架內的任何變化，但是這篇簡短的文章應該讓您大致了解可以使用Figma提供的功能來完成。

Do you use Auto Layout in your designs? Would you do any of the things differently? Let me know in the comments below.

您在設計中使用自動版式嗎？ 您會以不同的方式做任何事情嗎？ 在下面的評論中讓我知道。

翻譯自: https://uxdesign.cc/figmas-auto-layout-in-action-d84c4688aca4

figma下載

總結

以上是生活随笔為你收集整理的figma下载_Figma的自动版式实用的全部內容，希望文章能夠幫你解決所遇到的問題。

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