What is auto-layout in Figma?
Do you know Auto Layout only applies to frames, not objects like rectangles, elipses, etc.? Auto Layout is perfect for components (e.g., buttons), component sets (e.g., pricing cards), or entire sections.
Auto Layout is the most discussed feature of Figma; you can add it to frames and components. It lets you create designs that grow to fill or shrink to fit and reflow as their contents change. This is great when you need to add new layers, accommodate longer text strings, or maintain alignment as your designs evolve. Here is the basic setting in Auto Layout and more other settings in Auto Layout.
Adjust resizing
One of the most powerful functions of auto-layout is its ability to control the dimensions of the objects in an auto-layout frame.
Set resizing behavior for parent auto-layout frames to adapt to any changes made to their children's objects. Resizing settings can be applied to objects on both the X and Y axes individually using the drop-down menus in the right sidebar.
With the resizing setting, you can set how the component proportions should behave when changing the content inside. So, here are the three basic options for width and height you should know.
>< Hug: The frame adapts its size to the content inside.
| — | Fixed = Keep the proportions set by designer
<> Fill = Content inside frame use full available space
Canvas stacking
Stacking is a way to control the relationship between elements that are arranged above and below each other on your canvas. Stack automatically puts elements inside a flex container, which prevents overlap when the viewport changes size.
Stacking positions in Figma determine layer order on the canvas, higher position on top of lower. You can switch between these options within Advanced layout.
Absolute position
Absolute positioning in Figma refers to fixed element coordinates independent of other elements on the canvas. Choose the auto-layout frame's child and click the [+] button in the right sidebar, which looks like the close window button, to use this absolute position.
Spacing mode
Spacing mode allows you to easily create responsive designs by automatically adjusting the spacing between elements based on the size of the frame they are in
Text baseline
Text baseline allows you to control the alignment of text within a text box. The baseline is an imaginary line on which the base of the characters sits, and adjusting the baseline affects the vertical alignment of the text.
Adjusting the baseline is useful when you want precise control over the vertical alignment of text, especially in situations where you need to align text across different text layers or design elements.
Use text baseline alignment to achieve pixel-perfect alignment of two texts with various sizes or weights.
