But this is not the only way to separate or distribute elements inside a frame with Auto Layout. Inside the padding options, this is shown as Packed. In the previous section, we saw how elements are separate following a predefined, constant value. You can also easily arrange elements dragging and dropping them directly on the canvas. Therefore, the layer's order is more crucial than ever, and something you have to be careful about when using Auto Layout. You have to keep in mind that if you change the order of the layers from the layer's list, this will also affect the elements on the canvas. This is the opposite of my personal preference (yikes!). This means that the uppermost layer will be the element that is at the bottom on the canvas, and the other way around. Figma uses by default an arrangement order inverse to what we see on screen. Now that we have more elements inside the component, we can already see what's going on in the layer's list.
When we add (or remove) a layer, it will respect these values. With this separation, no matter how many element we have, all of them will always be at the same distance from each other. A clear example would be items on a list. Separation is something very useful when we have a component that contains several layers that must keep the same distance to each other, so the layout won't break if you add or remove elements. This means that if you add another element to the right, it will automatically keep the same distance: All layers inside the component are separated equally. This distance will be the same between all elements. This distance has nothing to do with the padding we set before it's a value that is configured independently. So far we have had just a single layer inside the frame, but what would happen if we had another? By adding an additional element, let's say an icon, you will see there's a separation between icon and text. So, all this means that while the content changes the component will take those values into consideration to leave that area free, just as if they were blank margins. If you'd rather prefer to apply the same value to all sides at the same time, you can just type the number you want, and the padding will be equally applied. When all paddings aren't the same, you will see the text Mixed. Even so, you can modify them, so all values are different from each other. If you click on the padding options, you will be able to see the values applied: Figma has calculated them to be the same up and down, left and right. When you apply Auto Layout, Figma will automatically add padding to each one of the sides, based on the separation to the container frame that the elements previously had. And if you haven't, then you can understand padding as the internal margins of the component.
If you have worked with CSS before, this may sound familiar to you. To combine directions you will need to use nested layouts, something that we will cover later on. You can only set one direction at the time.
By just applying Auto Layout you can already see some things happening, that we'll see one by one to understand them, and adapt them to what we need. The typical example is a button: A frame with a text, as simple as it gets. But well, you'll start seeing how it works by having at least two layers. You can apply Auto Layout to either frames (even if empty) and componentes. Even if this is just an introduction, I hope this guide is complete enough for you to start using this feature with more confidence than ever before. We'll go step by step starting with its most basic characteristics, to an idea of the potential it has to achieve more complex design layouts. On this article we will cover what you can achieve using Auto Layout.
#Figma valuation trial#
It's also difficult, initially, to get predictable results without so many attempts, and trial and error. It can be a bit hard to understand how it works, specially at the beginning. In brief, it allows you to structure components and frames in a way that can automatically grow, making the container adapt to the size of its contents, or the other way around.īeing such a flexible feature, it also has its complexity and limitations. An introduction with examples so you can finally understand how Auto Layout works in Figma, and how can you use it to automatically adapt your designs.Īuto Layout is one of the most important features in Figma, with a versatility that sets it apart from the ones in other design tools.
0 kommentar(er)
