🛎️ Hello people,

This year begins with great things! ✨

We invite you to apply to our upcoming Workshop about "Mastering Variables in Figma" with Katerina Miliaraki and Jen Anastasopoulou, Product Design Leads from Orfium!

About the instructors:

🗣️ Katerina is a product design lead at Orfium, with years of experience in shaping and scaling design systems for both B2C and B2B companies. She has been obsessed with design tokens for the better part of the last year or so.

🗣️ Jen is a product design lead at Orfium with years of experience in creating scalable solutions for multiple platforms. Ever the perfectionist, Jen has an affinity for detailed documentation and the nuances of design tokenization.

Below you will find the workshop's agenda and the link to fill in the survey to apply.

All participants, who have secured a spot at the workshop, will receive a confirmation email.

➡️ Apply Here 

🦄 Mastering Variables in Figma | The Agenda

Total Duration: [5-6 hours]
☕️ There will be coffee and lunch breaks.

🎆 Introduction and Overview [30min]

* Welcome and brief introduction

* Figma's role in modern design systems and the importance of variables

* Sneak peak: What we will create together

* What is a variable? How does it differ from a style?

* Types of Figma variables, Variable layers (or sets, or tiers), Variable scoping per layer

🌐 Global Variables [45min]

* What is the ‘global’ tier?

* Practical demonstration: Creating a variable

* Hands-on exercise: Participants copy and paste workshop resource files to create their global variables

🥰 Semantic Variables [45min]

* What is the ‘semantic’ layer? How does it affect theming?

* Common semantic layer groups

* How we ensure AA compliance?

* Practical demonstration: Creating a backgroundColor semantic token group

* Hands-on application: Participants link variables in their ongoing design system projects.

🔨Component Properties [30min]

* Component properties

* Practical demonstration: Creating a simple component with properties (e.g. boolean, instance swap, etc.)

* Hands-on application: Participants create example component and set its properties

🌈 Using variables in components [30min]

* The ‘comp’ layer: Do we always need it?

* Comprehensive tutorial on applying variables in components.

* Practical demonstration: creating ‘comp’ layer tokens and applying them to an existing component

* Hands-on application: Participants integrate variables into components

🌙 Theming [30min]

* Creating aliases for semantic tokens

* Hands-on application: Participants create alternative theming suggestions (e.g. dark theme, compact, etc.) for a simple layout featuring the components previously made

🙋‍♀️️ Wrap-Up & Q&A [45min]

➡️ Apply Here