👋 Hands-on

2-day workshop on building a design system with Figma and React.

Upcoming workshops👇

2 & 3 DECEMBER 9-13 PST

Available tickets:

Designers: SOLD OUT

Developers: 4

Grab your ticket →

Need a custom workshop for your team?

Let's talk →

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

Day 1
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

Day 2
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.

Sneak peek: Changes in Figma design tokens are automatically reflected in the components and exported to code.

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

Building a Design System 🛠️Our members Marlene Höglinger and Nico Peham participated in the Hands-on with Design Systems workshop by Varya Stepanova and Sherif Saleh last week. It was about building design systems with Figma and React and gaining in-depth hands-on experience. It was especially exciting to see how other companies build their design systems and to exchange experiences.

Nico Peham - Tech Lead at pcode

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 - Directeur Général Publicom

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 - Webmarketing Master @ MEDISUR SAS

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 Petrovskiy

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.

Sherif Saleh

Senior product designer

Sherif is a senior product designer. He crafts deligthful experiences through data analytics, user research, prototypes and validation. Sherif has extensive experience with design systems and years of working for financial services, banks and automotive.

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