Responsive UX/UI Design in Figma 1.5h deep dive 2024 UPDATE!
What you'll learn
- Auto Layout
- Constraints
- Testing responsive components with Breakpoints
- Documenting responsive components and pages
- Absolute positioning
- Fix aspect ratio
- Auto layout resizing
- How to find the right breakpoints and translate them to Figma
- How to media queries work under the hood in CSS
- Breakpoint Plugin
- Note: We will NOT deal with coding responsive web!
- Figma working material file with plenty of exercises
- Access to the moonlearning student files library
Requirements
- We start at 0 with responsive design, but you should have basic Figma knowledge
- You need access to a (free) Figma account
Description
Deep Dive: Figma Auto Layout, Constraints, Breakpoints & Modes(1.5h)
NEW! Full Config 2024 Update Featuring the New Figma UI Design!
Auto layout driving you crazy? Scared of what will happen with your design in the browser? Then this class is just right for you! We will learn everything about how to set up responsive designs in Figma.
This is going to be a real deep dive into auto layout, constraints, and, most importantly but rarely discussed, how to deal with breakpoints for your UI design, ranging from a simple setup to a more advanced approach with variables and modes.
Understanding and combining these tools will help you set up components, design patterns, and entire pages that align with code settings.
With the Figma course material file, you can work alongside me or return to exercises with detailed instructions in your own time.
This class is right for you if you have basic knowledge of Figma or if you are an advanced Figma user and want to brush up on your skills.
Auto Layout deep dive
What is auto layout?
Setting up auto layout frames
The auto layout menu
The auto setting
Advanced auto layout menu
Resize settings
Vertical resizing tips
Ignore auto layout
Auto layout components and variables
Setting min and max values
Auto layout wrap
Fixed aspect ratio images (hack)
Learn about nesting: parent-child relationship
Suggest auto layout
Some magic with tables: auto layout and AI
More advanced setup (examples)
Auto layout pages
Auto layout and CSS flexbox
Slot components with auto layout
Constraints
What are constraints in Figma?
Constraints and grids
A quick intro to grids in Figma
Breakpoints & Modes
Introducing CSS breakpoints
Breakpoints in Figma
Modes and screen sizes: a quick intro
Binding variants to modes
Hide and show with booleans
Responsive typography with modes
Figma course material file
Who this course is for:
- We start at 0 with responsive design, but you should have basic Figma knowledge
- Advanced UI Designer that want to brush up their skills
- Graphic designers crossing over to UX/UI
- Anyone who wants to learn some great stuff!
- Developers that want to understand how responsive UI components are setup to improve the conversation with design (note this is a UI design course, not a programming class!)
Instructor
- 4.7 Instructor Rating
- 4,638 Reviews
- 16,840 Students
- 5 Courses
Hi! I'm Christine Vallaure, UI designer, speaker, founder of moonlearning – a UX, UI, and Figma online learning platform, where design meets code, and author of "the Solo", a practical guide for building and running digital products as a company of one.
I’ve always been drawn to the intersection of design and technology. With moonlearning, I’ve built a space where these two worlds not only meet but thrive together. It’s where my love for solving visual problems, the creative flexibility of Figma, and the logic of code all come together. Whether I’m deep in design work, sharing insights on stage, or leading live workshops, my aim is to make the creative process more accessible and encourage others to confidently build digital products, bridging the gap between design and development.