Deep dive into Figma's Auto Layout, Constraints and Breakpoints: Responsive setup, testing and design documentation

What you'll learn

1. Auto Layout
2. Constraints
3. Testing responsive parts with Breakpoints
4. Archiving responsive parts and pages
5. Absolute positioning
6. Fix perspective proportion
7. Auto layout resizing
8. Instructions to find the right breakpoints and make an interpretation of them to Figma
9. The most effective method to media questions work in the engine in CSS
10. Breakpoint Plugin
11. Note: We won't manage coding responsive web!
12. Figma working material record with a lot of activities
13. Admittance to the moonlearning understudy records library

 

Requirements

• We start at 0 with responsive design, yet you ought to have fundamental Figma information
• You really want admittance to a (free) Figma account

Description

Auto layout making you insane? Terrified about what will occur with your design in the program? Then this class is perfect for you.

We will learn everything about how to set up responsive UI design with Figma. This will be a genuine deep dive into constraints, auto layout, and most significant yet seldom examined breakpoints for your UI Design. Joining those tools will permit us to test and archive your designs and parts in accordance with the genuine code settings, as a matter of fact.

We will begin with constraints:

• What constraints in Figma are
• The most effective method to apply them accurately
• How they are a complete lifeline with regards to working with frameworks
• Did you realize you can join constraints and auto layout?
• Monitoring restrictions

Deep dive into auto layout:

• What is auto layout?
• How and where to apply auto layout
• Grasping the auto layout menu
• Separating and stacking
• Build a responsive card and learn about the force of resizing
• Play with the strong force of settled auto layout outlines
• Absolute positioning
• Make more complicated card setups
• Set up a whole page in auto layout
• Learn about various stacking choices
• Fixed viewpoint proportion with pictures
• Least width hack
• Opening parts

We will then, at that point, learn how to manage breakpoints in Figma:

• What are they
• How do parts and pages adjust?
• How do breakpoints and media questions work in CSS
• Which breakpoint values would it be advisable for me I use for my design
• The most effective method to set up breakpoints in Figma
• Step by step instructions to test pages and parts with breakpoints
• Reporting the discoveries
• Figma breakpoints plugin
• A word about responsive typography

With the course material record, you can work close by me or return to practices with nitty gritty guidelines time permitting.

This class is ideal for you assuming that you have essential information on Figma or on the other hand on the off chance that you are a high level Figam client and truly need to look out for any way to improve on your abilities.

 

NOTE: This is a UI Design class in Figma. We won't set up responsive improvement in code!

Who this course is for:

1. We start at 0 with responsive design, yet you ought to have essential Figma information
2. High level UI Designer that need to perhaps look out for some way to improve their abilities
3. Visual designers moving over to UX/UI
4. Anybody who needs to learn some incredible stuff!
5. Developers that need to comprehend how responsive UI parts are setup to work on the discussion with design (note this is a UI design course, not a programming class!)

Teacher

Christine moonlearning

• 4.6 Teacher Rating
• 803 Surveys
• 2,893 Understudies
• 6 Courses

I've worked universally, in-house, and somewhat on projects for driving brands, organizations, and new companies. I care deeply about making carefully conceived and tasteful items.

My number one tools are Sketch and Figma, and I'm areas of strength for a that designers ought to comprehend how code functions.

Other than client projects, I show coding and UX/UI classes and right now building MOONLEARNING. I additionally expound on Design and Code on Medium.

 

4.5 course Rating 27 Reviews

Stefan Daniel S.

Rating: 5.0 out of 52 weeks prior

 

This course is right on the money. I prescribe this course to anyone with any interest in learning how to utilize auto-layouts in figma.

 

Govinda M.

Rating: 4.0 out of 52 weeks prior

 

Great course yet hard to stay locked in. The abundance of information accessible to learn is perfect!