Figma
Deep Dive: Figma Auto Layout, Constraints, Breakpoints & Modes
Please note, in case you're not getting access to the new Figma UI yet, you can also use the archived previous course found here: https://skl.sh/3PJKok6 (I explain this in video 2).
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
Plus Figma course material file
This is a course by moonlearning, moonlearning.io moon learning
Christine Vallaure
No reviews yet. Be the first to review this course.
1 lesson, about 1.5 hours
A single ninety-minute session taking Figma from an empty file to a working interface: frames, components, auto layout and prototyping, aimed at somebody who has never opened it.
144 hours
A 144-hour UX and UI design certificate from Noble Desktop, taught live in New York or online, ending in a portfolio and a job-ready resume.
120 hours
A 120-hour UI design certificate from Noble Desktop covering Figma, Photoshop and Illustrator, taught live in New York or online.
420 hours
A 420-hour generative AI course from Noble Desktop, taught live in New York or online.
264 hours
A 264-hour generative AI course from Noble Desktop, taught live in New York or online.
282 hours
A 282-hour generative AI course from Noble Desktop, taught live in New York or online.
1 lesson, about 1.5 hours
A single ninety-minute session taking Figma from an empty file to a working interface: frames, components, auto layout and prototyping, aimed at somebody who has never opened it.
7 lessons, about 1 hour
A 7-lesson playlist on UX/UI design, 54 minutes, published on YouTube by Figma. Watched here on the course page.
9 hours
Hi there - my name is Dan Scott & welcome to Figma Essentials. Together - you and me - are going to learn everything you need to get started working as a UX Designer using Figma. We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly... we'...
1 hour
Development of advanced techniques in Illustrator and Photoshop is the focus of this course, with the goal of helping you increase your proficiency with vector brushes and pattern design. You will craft a gorgeous floral line-art which can be finished in oh-so-many ways! In this course you will lear...
24 minutes
Transform humble materials into luxurious fabrics through the craft of natural dyeing! This wonderful art combines textile design with sustainable living. Using food materials you can find in your kitchen, we'll brew three lovely colors from scratch: Pale pink from avocado pits Golden yellow from on...
23 minutes
Give your denim a new lease of life by creating something totally original. With fabric painting, you are the artist and the textile designer! In this class we will cover the basic of fabric painting, learn what materials to use and discuss the best practice while working towards creating your weara...
Subscription
