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

Responsive UX/UI Design in Figma 2h deep dive JULY 23 UPDATE, available at $74.99, has an average rating of 4.73, with 56 lectures, based on 650 reviews, and has 2691 subscribers.

You will learn about 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 This course is ideal for individuals who are We start at 0 with responsive design, but you should have basic Figma knowledge or Advanced UI Designer that want to brush up their skills or Graphic designers crossing over to UX/UI or Anyone who wants to learn some great stuff! or 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!) It is particularly useful for We start at 0 with responsive design, but you should have basic Figma knowledge or Advanced UI Designer that want to brush up their skills or Graphic designers crossing over to UX/UI or Anyone who wants to learn some great stuff! or 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!).

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

Summary

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

Price: $74.99

Average Rating: 4.73

Number of Lectures: 56

Number of Published Lectures: 54

Number of Curriculum Items: 56

Number of Published Curriculum Objects: 54

Original Price: $27.99

Quality Status: approved

Status: Live

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

Who Should Attend

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

Target Audiences

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

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!

Course Curriculum

Chapter 1: Introduction & Course Material

Lecture 1: Promo Video

Lecture 2: About this course

Lecture 3: !!! PLEASE WATCH !!! New Figma UI in beta

Lecture 4: Course Material

Chapter 2: Constraints

Lecture 1: 01 What are Constraints in Figma?

Lecture 2: 02 Working with Horizontal and Vertical Constraints

Lecture 3: 03 Constraints and grids

Lecture 4: 04 Individual grids on component frames

Lecture 5: A little favour

Lecture 6: 05 Fun illustrations with constraints

Lecture 7: 06 Limitations of Constraints

Chapter 3: Auto Layout

Lecture 1: 01 What is auto layout?

Lecture 2: 02 Setting up an auto layout frame

Lecture 3: PLEASE WATCH !!! New Figma UI and auto layout

Lecture 4: 03 Where can I apply auto layout ?

Lecture 5: 04 The auto layout menu

Lecture 6: 05 Advanced layout settings

Lecture 7: 06 Auto layout resizing

Lecture 8: 07 Building a responsive card with auto layout resize

Lecture 9: 08 Auto layout components and instances

Lecture 10: 09 Nesting auto layout frames – Building a navigation

Lecture 11: 10 Absolute positioning

Lecture 12: 11 More complex auto layout setups

Lecture 13: Padding and spacing with variables *NEW*

Lecture 14: Note: Variables are very powerful *NEW*

Lecture 15: Setting min/max width *NEW*

Lecture 16: auto layout wrap *NEW*

Lecture 17: 12 Setting up an entire auto layout page *NEW*

Lecture 18: 13 Same height for all children

Lecture 19: 14 Stacking techniques

Lecture 20: 15 Limitations of auto layout and their solution

Lecture 21: 16 Constraints and auto layout comparison

Lecture 22: 17 Fixed aspect ratio images

Chapter 4: Breakpoints

Lecture 1: 01 One design will not work for all sizes: Say hi to breakpoints

Lecture 2: 02 Think of single components adapting, not entire pages!

Lecture 3: 03 Breakpoints in CSS

Lecture 4: 04 Which breakpoints should I use?

Lecture 5: 05 Setting up breakpoints in Figma

Lecture 6: 06 Testing responsive components

Lecture 7: 07 Documenting responsive components

Lecture 8: 08 Variant Hack

Lecture 9: 09 Breakpoints and a grids

Lecture 10: 10 Do not forget your Typography.

Lecture 11: 11 Breakpoint Plugin

Chapter 5: Extra Material: Responsive Typography

Lecture 1: About the extra material

Lecture 2: Rem and PX

Lecture 3: Understanding Typescales

Lecture 4: Scaling System

Lecture 5: Responsive Design in Typography Intro

Lecture 6: Responsive approach 1: Single scale approach

Lecture 7: Responsive approach 2: Ratio

Lecture 8: Responsive approach: Fluid

Lecture 9: Summary

Chapter 6: Before you go

Lecture 1: Thank you!

Instructors

Christine moonlearning
moonlearning

Rating Distribution

1 stars: 3 votes
2 stars: 5 votes
3 stars: 24 votes
4 stars: 146 votes
5 stars: 472 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu