PVDUX Workshop: Deep Dive into Figma’s Auto Layout

Our second ever PVD UX workshop! PVD UX member, Masha will teach you how to wade into autolayout like a pro.

By the end of the 2 hour workshop, participants will understand how to unlock the full potential of auto layout and learn how you can use it to create (and maintain!) flexible designs.

Figma is giving away a 6 month Pro subscription to all participants, (and super awesome swag) and Loft will be providing refreshments.

We are asking for a small donation to ensure commitment, with all proceeds going to Masha's favorite pet charity, Ten Lives Cat Rescue.

Doors open at 5:30 PM, and the workshop will start at 6 PM. Please bring your computer.

Duration: ~2 hours
Gols
By the end of the workshop, participants:

• Will learn all the fantastic auto layout techniques (and know where to find them).
• Will learn how it can help the design process (instead of complicating it) and how it relates to code.
• Will practice applying auto layout to most common UI elements and patterns.

Requirements
Bring your computer and an active Figma account. You can get a free account here: https://www.figma.com/

Agenda

1. Overview (10 min)
2. Introduction — Masha who?
3. How can auto layout speed up design process? How does it help with design ↔ dev collaboration?
4. Presentation (30-35 min)
5. Auto layout — basics (vertical and horizontal resizing, direction, alignment, space between items, padding).
6. Auto layout — advanced (spacing mode, strokes, canvas stacking, text baseline alignment, absolute positioning).
7. Participants can either watch or simultaneously try out the techniques as I go over them.
8. Break 🧘🍹 (5 min)
9. Lab (30-35 min)
10. Based on their level, participants pick a design and re-implement it using auto layout.
11. I’ll walk around, help out, answer questions.
12. Wrapping it up (10 min)
13. Summary of key concepts
14. Is auto layout always a good idea?
15. Possibly: group vote on easiest/hardest auto layout concept.
16. Resources to dive deeper.

Your instructor
Masha is a product designer and developer with a deep love for design systems and open-source design who recently relocated to PVD.