👋 Hands-on
2-day workshop on building a design system with Figma and React.
Upcoming workshops👇
Need a custom workshop for your team?
What you will learn?
This workshop helps you learn and practice design systems working in a team. You can join as a designer or developer.
The designers define visual design language and Figma components. At the same time, the developers create the components with React. You practice iterative component-driven design and development and create documentation along with making the product. The exercise contains managing collaborative updates and keeping the code in sync with the design reality.
By the end of the workshop, each team has a ready-to-use component library, an end product built out of that, and a tuned process to ensure smooth updates.
Workshop content
9:00-9:30 | Introduction | Say Hi 👋 |
9:30-10:00 | Teams | Icebreaker exercise |
10:00-10:40 | Design and process | Setting up Figma project and project repository |
10:40-11:15 | Design and process | UI inventory and scoping |
11:15-11:45 | Lunch break | |
11:45-12:00 | Design and process | UI inventory discussion |
12:00-12:30 | Designing and building the library | Design tokens foundation. Intro to visual regression testing |
12:30-13:00 | Designing and building the library | Hands-on practice |
9:00-10:45 | Designing and building the library | Coding and documenting the components. New design challenge |
10:45-11:00 | Design system lifecycle | Versioning and release. Documenting components in ZeroHeight |
11:00-11:30 | LUNCH BREAK | |
11:30-12:30 | Design system lifecycle | Hands-on update and release |
12:30-13:00 | Recap | Q&A session and discussion |
Deliverables
By the end of the workshop, each team has a ready-to-use component library, an end product built out of that, and a tuned process to ensure smooth updates.
Why Attend
As a Designer
- Practice UI inventory
- Run brand-changes in nearly zero time
- Learn how to organize the components in Figma
As a Developer
- Practice component-driven development
- Learn tips and tricks of making a pattern library
- Practice React, Storybook, and styled-components
As a Team
- Automate design and development processes
- Learn to work with a design system in a multifunctional team
- Practice DS development cycle: create, maintain and keep coherent
People Say
Who We Are

Varya Stepanova
Design systems architect and engineering manager
As an independent consultant, Varya helps companies to launch and boost their design systems. Her major focus is bridging the gap for designers, developers, and business specialists. That all is seasoned with extensive experience in component-driven UI development and a design degree.
Want a custom workshop for your team?
Need a custom version? We can tailor this workshop for your company. When focused on your product and taking into account your team shape, the workshop outcome is not only a training session but also your design system's kick-off. We’ll walk through the design system process, how to get started and how to fit it into your existing design processes. There will be an opportunity for the team to discuss questions they might have about implementing a design system.
Let's talk