If you’re new to Figma and want to learn how to create clean, responsive components using Auto Layout, you’re in the right place. In this beginner-friendly Figma tutorial, we’ll walk you through building a simple card design step by step — complete with an image, headline, body copy, and CTA (call to action).
By the end of this guide, you’ll understand how to use Figma layout settings, apply padding, spacing, and even organize your layers. Whether you’re working on UI/UX, web design, or a personal design system, mastering Auto Layout in Figma is essential.
Why Use Auto Layout in Figma?
Auto Layout is one of Figma’s most powerful features. It helps you:
- Create responsive components that adjust to content.
- Maintain consistent spacing and alignment.
- Save time when updating or duplicating elements.
It’s especially useful in UI design when working with cards, buttons, modals, and entire page layouts.
Step-by-Step: Build a Card Design with Auto Layout in Figma
1. Start With a Frame and Add an Image
Open a blank canvas in Figma and create a square frame using the Frame Tool. Instead of filling it with a solid color, upload an image — in this tutorial, we used a cute cat photo. You can crop and scale the image for better composition.
2. Add Text
Use the Text Tool to add your headline. Set the font to Proxima Nova Black at 40px for a bold, readable style. Copy and paste the text box to add body copy. Reduce the font size to 20px and change the weight to Regular for contrast.
For placeholder text, we used the Lorem Ipsum plugin to generate four sentences of Lorem Ipsum quickly.
Duplicate the text box again and write your CTA — something like “CTA link here.” Add an underline using the typography settings to make it look clickable.
3. Apply Auto Layout to the Text
Select your headline, body copy, and CTA, then hit Shift + A or right-click and select Add Auto Layout. This wraps your text elements in a frame with layout controls on the right panel.
Adjust the spacing between text elements and make sure the height of each text box is set to Hug Contents to keep everything tight and consistent.
5. Combine Text and Image into One Auto Layout Frame
Now, select both your image and the text group. Again, use Shift + A to wrap them in a single Auto Layout frame. This will align your text and image and make the layout more responsive.
6. Add Padding, Background Color, and Rounded Corners
To give your card a polished look, apply padding (we used 40px on all sides), set a light gray background, and round the corners (20px works well). Don’t forget to round the image corners too for visual consistency.
7. Organize and Rename Layers
Lastly, clean up your layers panel. Rename your top-level frame as “Card,” label the image and text sections appropriately, and ensure everything is grouped logically. This helps keep your design organized — especially as your project grows.
Final Thoughts
Using Auto Layout in Figma makes your designs smarter, more scalable, and visually consistent. Whether you’re creating simple cards or full-blown interfaces, these Figma tips will save you time and help you build cleaner layouts.