Hands-on with Design Systems
2-day workshop on building a design system with Figma and React. Join as a designer or as a developer to work as a team.
2 & 3 June
11-15 EEST
Available tickets: 1 for a designer, 2 for developers
1 & 2 September
11-15 EEST
10 tickets for designers, 10 tickets for developers
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 via design tokens.
By the end of the workshop, each team has a ready-to-use and documented component library, an end product built out of that, and a tuned process to ensure smooth updates.
Workshop content
Day 1
- 11:00
Introduction
- What are design systems
- Technologies to support design systems
- 12:00
Design and Process
- UI inventory and scoping
- Structure of Figma library
- Designing and coding first components together
- Design&code automatic sync
- 15:00
End of first day
Day 2
- 11:00
Design system in action
- Patterns and components in Figma
- Coding the library of components
- Library release cycle
- Building the product using the design system
- 13:00
Design system in action
- Brand changes to the components
- Updating and releasing the component library
- Automatic product update
- 14:00
Running through the processes
- Recap
- 15:00
End of the workshop
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.
Sneak peek
Changes in Figma design tokens are automatically reflected in the components and exported to code.
Why attend
- Practice UI inventory
- Run brand-changes in nearly zero time
- Learn how to organize the components in Figma
- Component-driven development
- Learn tips and tricks of making a pattern library
- Practice React, Storybook, and styled-components
- 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
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.
People say
Varya is an expert in Design System domain. I have had chance to work with her in past and I found her very intellectual and hardworking individual. She has sounds technical background and deep understanding of web applications development. She leans into solving a problem not just defining it well. I would gladly recommend Varya to anyone who is looking for a Design System expert.
Junaid Rasheed
Sherif is a proactive and tireless contributor who would make a great addition to any team. He completed his assignments on time and never failed to add a creative touch when appropriate.
Anthony Tahar
Varya is a highly skilled professional designer and developer. Along with these qualities, she is a great leader, a team player, and a business partner! She is a valuable asset to any team when it comes to solving complex business problems! I'm glad to recommend her!
Alexander Petrovsky
Sherif was a true professional in his business. Great skills in web design and UX. CSS has no secrets for him also. We worked together on web projects to large sizes.
David Teissier
Companies that use design systems
Custom workshop version
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.
Contact Varya by mail@varya.me to discuss your custom workshop details.
Tickets
8 & 9 April
SOLD OUT
5 & 6 May
Early-bird tickets: €300.00 (+ €72.00 VAT)
Early-bird ticket combo (1 designer + 1 developer): €250.00 (+ €60.00 VAT) per ticket
Regular tickets: €450.00 (+ €108.00 VAT)