Responsive UX/UI Design in Figma 2h deep dive JULY 23 UPDATE

Figma Auto Layout, Constraints and Breakpoints: Responsive setup, testing and design documentation, min/max width, wrap

4.70 (587 reviews)

Udemy

platform

English

language

User Experience

What you will 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

Why take this course?

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:

Auto layout update during Config 2023 overview NEW
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
Padding and spacing with variables NEW
Setting min/max width NEW
auto layout wrap NEW
Setting up an entire auto layout page NEW
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!

Screenshots

Responsive UX/UI Design in Figma 2h deep dive JULY 23 UPDATE - Screenshot_01

Responsive UX/UI Design in Figma 2h deep dive JULY 23 UPDATE - Screenshot_02

Responsive UX/UI Design in Figma 2h deep dive JULY 23 UPDATE - Screenshot_03

Responsive UX/UI Design in Figma 2h deep dive JULY 23 UPDATE - Screenshot_04

Reviews

Janvi

June 7, 2023

All topics were very useful, I will be going to use these tips and tricks and new things in my upcoming projects which I learned from this session.

Chantal

May 23, 2023

It's a great course, very detailed, and I learned about extra things I can do with Figma. I'm still a beginner with Figma though, so I expect that I will return to this course from time to time, if I'm struggling with something. The only thing that I struggled with in the beginning, though, was to figure out which exercise files to download. However, by concentrating and following along with the videos, you do realise which course files to download. I would definitely recommend this course to anyone looking to learn more about auto layout, constraints and breakpoints - it feels slightly intimidating at first, but Christine explains everything in detail, so you get more comfortable with Figma along the way. There are also a lot of extra handy info that will help with working with Figma!

Kevin

May 22, 2023

This course was excellent. The instructor skillfully employed relevant examples while teaching the main principles of responsive design within Figma. I found the section on responsive typography to be exceptionally valuable, providing insights that are truly worth their weight in gold.

Travis

May 21, 2023

I really enjoy using Figma and appreciate the documentation that they provide, but this course is providing me with more clarity about using constraints and Auto Layout to create responsive designs than any resource, including other in-depth courses, that I've encountered so far. Thank you!

Taylor

May 12, 2023

I watched A LOT of Youtube videos before doing this course and was still having a hard time fully understanding constrains and auto layout in Figma. This is the best explanation I've seen explaining those concepts. I appreciate the type scale info at the end as well. Very valuable course with information that will help me stand out in my job search. Thank you!

Pele

May 8, 2023

This course is simply amazing. It may look short, but every single second is a masterpiece of knowledge.

Stacy

May 2, 2023

I really enjoyed this course. I appreciated the material covered and how detailed the instructor was. I would have loved a bit more explanation in certain parts but will simply need to go back and rewatch. I would recommend this course to anyone who is interested in furthering their learning of responsive design.

Dionysia

April 28, 2023

Really useful class. It clears up a lot of concepts. You can't design a responsive website without this.

Arsi

April 26, 2023

very professional and well designed. The instruction videos are very good and easy to understand and follow.

Shelley

April 19, 2023

A great course for those looking for further explanations on how auto-layouts and constraints work within your design. Course was broken down really well and Christine is an excellent lecturer - her calm and understanding voice makes everything seem a lot easier than it can be, even if you are struggling to wrap your head around everything! Please bring out a prototyping course :)

Pawel

April 19, 2023

I really like the topics covered and the way everything is explained. The soothing voice of the instructor doesn’t hurt either.

Sukanta

April 7, 2023

Every UI UX designer has to know all this information. Mainly the Extra material section. Thank you for such great content.

March 28, 2023

this is an eye-opener for me. I never thought grids and constraints were such powerful tools in Figma.

Anne

March 26, 2023

It's a great content that helped me understand better about auto layout/constrains and breakpoints. It would be perfect if there are more materials to practice along the way. Christine's voice is wonderful :-)

Bruno

March 5, 2023

Very calm voice and slow which helps a LOT. The best Figma course I've ever seen, way better than those complicated YouTube tutorials. Please keep making more courses at this quality level.

Charts

Price

Rating

Enrollment distribution

Responsive UX/UI Design in Figma 2h deep dive JULY 23 UPDATE - Distribution chart