Figma Auto Layout Explained: Responsive Web Card in a Few Clicks - Jan Mraz
9.8K views · 2025-06-03
UI Design
Stop struggling with responsive components in Figma, do this instead.
If you've ever fought with breakpoints or watched your layouts fall apart on different screen sizes, this video is for you.
In just a few steps, UX/UI designer Jan Mraz will show you how to build a responsive card component using the latest Figma Auto Layout features — no plugins, no hacks. Just smart layout settings that actually scale.
What you’ll learn:
How to structure your frames for flexibility
When and why to use the Wrap feature
The ideal min/max width settings for responsive cards
Tips to keep your design consistent across devices
Want the full guide + Figma file?
Download it free here: https://contra.com/p/7BkOe3ZE-designing-fully-responsive-web-card-using-figma-auto-layout
If you've ever fought with breakpoints or watched your layouts fall apart on different screen sizes, this video is for you.
In just a few steps, UX/UI designer Jan Mraz will show you how to build a responsive card component using the latest Figma Auto Layout features — no plugins, no hacks. Just smart layout settings that actually scale.
What you’ll learn:
How to structure your frames for flexibility
When and why to use the Wrap feature
The ideal min/max width settings for responsive cards
Tips to keep your design consistent across devices
Want the full guide + Figma file?
Download it free here: https://contra.com/p/7BkOe3ZE-designing-fully-responsive-web-card-using-figma-auto-layout