To design efficiently in Figma, it’s important to organize elements like an HTML structure and align them using a system similar to display: flex in CSS.
In Figma, Auto Layout works like a <div> container, and its alignment follows the same logic as display: flex.
In this video, we will explain the basics of Auto Layout so you can design scalable and consistent websites while making the most of variables.
Working with Text
Before we start, here are some common mistakes to avoid when working with text in Figma:
✅ Don’t press ENTER for line breaks. Let the text adjust to the container width.
✅ Never resize text vertically. Always set it to auto height.
✅ If centering text, make sure to set Text Align Center.
Auto Layout
In Bricks Builder, we usually build layouts from the outside in: first, we add a section, then a container, and finally the content (text, buttons, cards, etc.).
In Figma, we work from the inside out: first, we create components, then containers, and lastly, sections.
🔹 In this video, we will call components small elements like buttons, lists, or cards (even though Figma has a special feature called Components, we will cover that later).
Let’s start with the most basic component: a button.
Creating a Button with Auto Layout
1️⃣ Create the button text.
2️⃣ Select the text and press Shift + A to wrap it in an Auto Layout.
3️⃣ In the left panel, you will see that a Frame was created. Always give it a name. Inside the Frame, you’ll find the text.
4️⃣ When selecting the Frame, the right panel will show Auto Layout properties:
- Width
- Height
- Direction
- Alignment
- Gap
- Padding
Styling the Button
📌 Padding
To adjust padding individually, click the “Individual Padding” icon.
🔹 Important: In Figma, padding values can only be in pixels (px)—not EM or %.
📌 Styles
Now, add a background color and change the text color.
Key Properties for Scalability
To make the design scalable, we need to set two key properties:
🔹 HUG → The container adjusts to fit the content inside (the text).
🔹 FILL → The container takes up 100% of the available width or height (only works if there is a parent container).
For buttons, the best option is to set both width and height to HUG so the button resizes automatically based on the text.
If you now change the text size, you’ll see the button adjust instantly.