Please note, there is an updated course version for this, you find here: https://skl.sh/3XwzPF8

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.

a course by moonlearning moon learning

We will start with constraints:

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

TO DOWNLOAD THE EXERCISE FILES, CLICK HERE

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.

© moonlearning.io with moon learning

Umesh Chandra

UI / UX Designer

1

1