English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 49 lectures (2h 25m) | 893 MB
Deep dive into Figma’s Auto Layout, Constraints and Breakpoints: Responsive setup, testing and design documentation
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 the power of resizing
- Play with the mighty power of nested auto layout frames
- Absolute positioning
- Create more complex card setups
- Set up an entire page in auto layout
- Learn about different stacking options
- Fixed aspect ratio with images
- Minimum width hack
- Slot components
We will then learn how to deal with breakpoints in Figma:
- What are they
- How do components and pages adapt?
- How do breakpoints and media queries work in CSS
- Which breakpoint values should I use for my design
- How to set up breakpoints in Figma
- How to test pages and components with breakpoints
- Documenting the findings
- Figma breakpoints plugin
- A word about responsive typography
With the 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 Figam user and really want to brush up on your skills.
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
Table of Contents
Introduction & Course Material
1 Promo Video
2 About this course
3 Course Material
Constraints
4 What are Constraints in Figma
5 Working with Horizontal and Vertical Constraints
6 Constraints and grids
7 Individual grids on component frames
8 A little favour
9 Fix position when scrolling
10 Fun illustrations with constraints
11 Limitations of Constraints
Auto Layout
12 What is auto layout
13 Setting up an auto layout frame
14 Where can I apply auto layout
15 The auto layout menu
16 Advanced layout settings
17 Auto layout resizing
18 Building a responsive card with auto layout resize
19 Auto layout components and instances
20 Nesting auto layout frames – Building a navigation
21 Absolute positioning
22 More complex auto layout setups
23 Setting up an entire auto layout page
24 Same height for all children
25 Stacking techniques
26 Limitations of auto layout and their solution
27 Constraints and auto layout comparison
28 Fixed aspect ratio images
Breakpoints
29 One design will not work for all sizes Say hi to breakpoints
30 Think of single components adapting, not entire pages!
31 Breakpoints in CSS
32 Which breakpoints should I use
33 Setting up breakpoints in Figma
34 Testing responsive components
35 Documenting responsive components
36 Variant Hack
37 Breakpoints and a grids
38 Do not forget your Typography.
39 Breakpoint Plugin
Extra Material Responsive Typography
40 About the extra material
41 Rem and PX
42 Understanding Typescales
43 Scaling System
44 Responsive Design in Typography Intro
45 Responsive approach 1 Single scale approach
46 Responsive approach 2 Ratio
47 Responsive approach Fluid
48 Summary
Before you go
49 Thank you!
Resolve the captcha to access the links!