Responsive UX/UI Design in Figma 2h deep dive (2022 Version)
Last Updated 09/2022
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz, 2 Ch
Genre: eLearning | Language: English + srt | Duration: 49 lectures (2h 25m) | Size: 884.5 MB
Deep dive into Figma's Auto Layout, Constraints and Breakpoints: Responsive setup, testing and design documentation
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
Auto layout driving you crazy? Scared about 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 UI design with Figma. This will be a real deep dive into constraints, auto layout, and most important but rarely discussed breakpoints for your UI Design. Combining those tools will allow us to really test and document your designs and components in line with the actual code settings.
We will start with constraints
What constraints in Figma are
How to apply them correctly
How they are a total lifesaver when it comes to working with grids
Did you know you can combine constraints and auto layout?
Being aware of limitations
Deep dive into auto layout
What is auto layout?
How and where to apply auto layout
Understanding the auto layout menu
Spacing and stacking
Build a responsive card and learn about...
Read more
Continue reading...