Providence UX Workshop: Building Toast Components in Figma

Our first ever PVD UX workshop! PVD UX member, Masha will teach you how to build a toast component in Figma.

Figma is giving away a 6 month Pro subscription to all participants, (and super awesome swag) By the end of the 1.5-hour workshop, participants will not only have built a toast component but also learned various Figma features such as auto layout, variants, boolean component properties, absolute positioning, and smart animate for prototyping.

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: ~1.5 hours

Goals
By the end of the workshop, participants will build a toast component and will learn the following Figma features:

• How to use auto layout
• How to use variants
• How to use boolean component properties
• How to use absolute positioning
• How to make a small prototype using smart animate

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

Agenda

1. Overview (10-15min)
2. What’ll be doing, agenda for the day.
3. Brief overview of what a toast even is, just so that everyone is on the same page.
4. Brief auto layout presentation.
5. Lab (30-35min)
6. Participants pick their level (see Levels section below) and give it a go at implementing the toast component. I walk around, give tips, answer questions.
7. Participants can work by themselves or in a group with 2-3 people if they prefer.
8. Break (5min)
9. Review (25-30min)
10. I go over creating the toast component.
11. Wrap up + QA (10-15min)
12. Everyone gets a little Figma gift 🎁

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.