Figma Auto Layout Masterclass: A Workshop That Supports Ukraine
Smashing Magazine is hosting a three-hour online workshop with UX/UI designer Christine Vallaure on Monday, March 27, from 09:00 AM – 12:00 PM PT / 18:00 – 21:00 CET. The session focuses on building responsive designs in Figma, covering constraints, auto layout, and breakpoints. All proceeds from the workshop, priced at a minimum donation of $35 USD, go directly to humanitarian aid in Ukraine.
Workshop content
In this hands-on deep dive, participants will learn how to set up responsive layouts inside Figma, combine key tools and features, and test designs against the settings developers actually use in code. The specific topics include the following.
- Constraints: How they work, how to apply them with grids, and combining them with auto layout.
- Auto Layout: Applying spacing, stacking, resizing, nested frames, absolute positioning, building complex card components, creating full page layouts, and working with fixed aspect ratio images.
- Breakpoints: What they mean for components and pages, aligning them with CSS media queries, choosing values that make sense in design, and documenting your findings for team alignment. Respondents are also welcome.
Christine is the founder of moonlearning.io and has worked in-house, internationally, and remotely for clients across agencies and startups. Her experience emphasizes the importance of designers understanding code. A Q&A session will follow the technical exercises. Virtual doors open at 8:45 AM ET for registration and introductions.
This workshop works best for those with basic knowledge of Figma, but advanced users are welcome to refine their approach. It is also suited for designers switching from tools like Sketch or XD, as well as developers who want a better grasp of the collaboration between design intent, responsiveness, and code.
Registration details
A Zoom client for Meetings is required, so attendees should install it beforehand. Since the session will be recorded, participants can re-watch at their own pace. Tickets are available via a donation of $35 USD or more, with the full ticket price going to humanitarian aid in Ukraine.
