Figma for Beginners | Design a Responsive Card with Auto Layout

Learn how to use Auto Layout in Figma to create a responsive product card, no plugins needed. We’ll start with prepared elements, organise them into Auto Layout frames, and build a card that switches between side-by-side and stacked layouts as you resize it. You’ll learn how to: • Plan the structure and group related elements • Control padding, spacing, and alignment • Build an image container with badges • Use Fill container and Hug contents • Set minimum and maximum widths • Use Wrap to create a responsive layout ⏱ Chapters 00:00 Intro and responsive card preview 00:15 Understanding the card’s structure 01:10 Creating the Add to cart button 02:15 Grouping stock information, prices, and colours 03:00 Building the ratings row 03:50 Grouping the product text 04:15 Assembling and sizing the details section 05:55 Building the image container 08:25 Combining the image and product details 09:45 Setting minimum and maximum widths 10:40 Enabling Wrap and testing responsiveness 11:10 Final styling and resize demo This tutorial is part of my Figma for Beginners playlist. If you’re new to Figma, watch my Figma Crash Course for an introduction to the basics. Try changing the content and width limits to see how your card responds. What would you like to learn next? Let me know in the comments, and subscribe for more Figma tutorials. #figma #figmatutorial #uiuxdesign #designforbeginners