Responsive UX/UI Design in Figma 2h deep dive (2022 Version)

Focused View

Christine moonlearning

2:25:16

258 View

1. Introduction & Course Material

1. Promo Video.mp4

02:11

2. About this course.mp4

02:42

3.1 Download the Figma file to this course here.html

3. Course Material.mp4

01:37

2. Constraints

1. 01 What are Constraints in Figma.mp4

01:46

2. 02 Working with Horizontal and Vertical Constraints.mp4

03:33

3. 03 Constraints and grids.mp4

02:55

4. 04 Individual grids on component frames.mp4

04:59

5. A little favour.mp4

00:37

6. 05 Fix position when scrolling.mp4

02:18

7. 06 Fun illustrations with constraints.mp4

01:07

8. 07 Limitations of Constraints.mp4

01:31

3. Auto Layout

1. 01 What is auto layout.mp4

01:17

2. 02 Setting up an auto layout frame.mp4

01:32

3. 03 Where can I apply auto layout .mp4

03:00

4. 04 The auto layout menu.mp4

02:57

5. 05 Advanced layout settings.mp4

03:00

6. 06 Auto layout resizing.mp4

05:12

7. 07 Building a responsive card with auto layout resize.mp4

03:28

8. 08 Auto layout components and instances.mp4

05:08

9. 09 Nesting auto layout frames - Building a navigation.mp4

04:23

10. 10 Absolute positioning.mp4

01:54

11. 11 More complex auto layout setups.mp4

12:44

12. 12 Setting up an entire auto layout page.mp4

05:14

13. 13 Same height for all children.mp4

02:07

14. 14 Stacking techniques.mp4

03:08

15. 15 Limitations of auto layout and their solution.mp4

03:50

16. 16 Constraints and auto layout comparison.mp4

03:51

17. 17 Fixed aspect ratio images.mp4

02:43

4. Breakpoints

1. 01 One design will not work for all sizes Say hi to breakpoints.mp4

01:37

2. 02 Think of single components adapting, not entire pages!.mp4

01:34

3. 03 Breakpoints in CSS.mp4

01:58

4. 04 Which breakpoints should I use.mp4

02:58

5. 05 Setting up breakpoints in Figma.mp4

02:29

6. 06 Testing responsive components.mp4

03:21

7. 07 Documenting responsive components.mp4

04:59

8. 08 Variant Hack.mp4

03:40

9. 09 Breakpoints and a grids.mp4

01:55

10. 10 Do not forget your Typography..mp4

04:26

11. 11 Breakpoint Plugin.mp4

00:59

5. Extra Material Responsive Typography

1. About the extra material.mp4

01:13

2. Rem and PX.mp4

04:16

3. Understanding Typescales.mp4

03:41

4. 02 Scaling System.mp4

03:07

5. Responsive Design in Typography Intro.mp4

00:45

6. Responsive approach 1 Single scale approach.mp4

03:15

7. Responsive approach 2 Ratio.mp4

02:47

8. Responsive approach Fluid.mp4

03:33

9. Summary.mp4

01:23

6. Before you go

1. Thank you!.mp4

00:36

Description

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

Who is this 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!)

More details

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 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.

NOTE:Â This is a UIÂ Design class in Figma. We will NOT set up responsive development in code!Â

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!)

User Reviews

Rating

average 0

Total votes0

Focused display

I’ve worked internationally, in-house, and remotely on projects for leading brands, agencies, and startups. I care deeply about creating well thought through and aesthetic products.My favourite tools are Sketch & Figma, and I am a strong advocate that designers should understand how code works. Besides client projects, I teach coding and UX/UI classes and currently building MOONLEARNING. I also write about Design & Code on Medium.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.