Figma Auto Layout Masterclass: An Online Workshop To Support Ukraine 🇺🇦

This content originally appeared on Articles on Smashing Magazine — For Web Designers And Developers and was authored by Steven Frieson

Auto layout is driving you bananas? You’re scared about what will happen with your design in the browser? Then our deep-dive Figma Auto Layout Masterclass with Christine Vallaure is for you. Monday, March 27, 09:00AM – 12:00PM PT / 18:00 – 21:00 CET. (Check your time zone ⏰) All proceeds from the workshop will be donated to humanitarian aid in Ukraine. Donate and join!

In the online workshop, you will learn everything about how to set up responsive designs with Figma. We’ll dive deep into constraints, auto layout, and, most importantly but rarely discussed, breakpoints for your UI design. Combining those tools will allow you to really test and document your designs and components in line with the actual code settings.

Our Figma Auto Layout Masterclass equips you with everything you need to know to master responsive designs in Figma.

Want to join us? Donate 35 USD or more to get your ticket — all proceeds from this workshop will be donated to humanitarian aid in Ukraine.

In This Workshop, We’ll Explore:

Constraints

• What they are;
• How to apply them correctly;
• How they help you when working with grids;
• How to combine them with auto layout.

Auto Layout

• What it is;
• How and where to apply it;
• Understanding the auto layout menu;
• Spacing and stacking;
• Building a responsive card and learning about the power of resizing;
• Playing with the mighty power of nested auto layout frames;
• Absolute positioning;
• Creating more complex card setups;
• Setting up an entire page in auto layout;
• Learning about different stacking options;
• Fixed aspect ratio with images.

How To Deal With Breakpoints In Figma

• What they are;
• How components and pages adapt;
• How breakpoints and media queries work in CSS;
• Which breakpoint values to use in your design;
• How to set up breakpoints in Figma;
• How to test pages and components with breakpoints;
• Documenting the findings;
• Responsive typography.

Who Is This Workshop For?

The masterclass is suitable for you if you have basic knowledge of Figma or are an advanced Figma user and want to brush up on your skills.

You might also like this workshop if you’re switching to Figma from other software like Sketch or XD. And, of course, a special welcome to developers who want to improve the collaboration between design and code and better understand the responsive setup in Figma.

About Christine Vallaure

Christine is a UX/UI Designer and founder of moonlearning.io. She has worked internationally, in-house, and remotely on projects for leading brands, agencies, and startups. Christine cares deeply about creating well-thought-through and aesthetic products and firmly believes that designers should understand code and that UX/UI is a match made in heaven.

Schedule: Monday, March 27, 2023

8:45 AM ET (Check your time zone ⏰)

Virtual doors open, registration, chat, and introductions.

9:00 AM – 11:30 AM

Deep dive into Figma responsive design, deep dive into constraints, auto layout, and, most importantly but rarely discussed, breakpoints for your UI design.

11:30 AM – 12:30 PM

Q&A with Christine on the day’s material. Networking!

You can always re-watch the session at a more convenient time and follow the webinar at your own pace.

What Hardware/Software Do You Need?

To participate, please install the Zoom client for Meetings, which is available for all the main OSs. It may take a little time to download and install, so please grab it ahead of time if you can.

See You There?

Donate 35 USD or more to join — we’ll donate 100% of the proceeds to humanitarian aid in Ukraine. We are already looking forward to diving deeper into the little secrets of auto layout together with you. Thank you for your kind support. 💙💛

This content originally appeared on Articles on Smashing Magazine — For Web Designers And Developers and was authored by Steven Frieson