#2 Figma's Auto Layout
Hi 👋 I’m Inés! Welcome to Figma Fridays. This is your go-to space for mastering Figma with practical, hands-on lessons. 👩🏼💻
Figma Fridays: How to use Auto Layout and make it awesome!
Figma's Auto Layout is a powerful tool that makes designing responsive and flexible layouts easier. Think of it as a smart way to arrange elements automatically, ensuring they adjust properly when you resize a frame or change the content.
With Auto Layout, you can create consistent and adaptable designs without manually adjusting every single element. It works like a rule-based system—once set up, it will automatically maintain spacing, alignment, and sizing.
How Does Auto Layout Work?
When you apply Auto Layout to a frame, you can control:
→ Direction: Arrange elements vertically (stacked) or horizontally (side by side).
→ Spacing: Define gaps between elements.
→ Padding: Add space around the elements inside a frame.
→Resizing Behavior: Set elements to hug content (fit the text size), fixed width/height, or fill the container (stretch to available space).
Let’s explore three practical ways to use Auto Layout in a real-world design project.
E-Commerce Product Cards
If you're designing an online store, product cards are essential. Auto Layout makes them responsive and easy to duplicate while keeping everything aligned.
Step-by-Step: How to Create a Product Card
Start with a Button:
Type a call-to-action (e.g., "Add to Cart").
Select the text and press Shift + A to apply Auto Layout.
Adjust padding and corner radius for styling.
Add a Product Image:
Drag an image into the frame and resize it as needed.
Arrange the Title and Price:
Type the product name and price.
Select both and press Shift + A to group them in a horizontal Auto Layout frame.
Nest Elements for Better Control:
Wrap the title and price in another Auto Layout frame (for better spacing).
Combine Everything in a Vertical Auto Layout:
Select the button, image, and text group, then press Shift + A.
Set the direction to vertical and adjust spacing.
Style the Card:
Add a background color, apply padding, and tweak spacing.
Why Use Auto Layout?
If you need 10+ product cards, Auto Layout ensures they all look consistent.
Any text changes won’t break the layout.
Ensure responsive design
Hope this helped you get started with Figma’s Auto Layout! For a more comprehensive guide you should check UX Crush’s guide :)
Stay curious 🐈⬛ Cheers!