👋 Hands-on

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

Upcoming workshops👇

1 & 2 SEPTEMBER 11-15 EEST

Available tickets:

Designers: 5

Developers: 7

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
10.00 – 10:30IntroductionSay Hi 👋
10.30 – 11:00TeamsIcebreaker exercise
11.00 – 11:40Design and processSetting up Figma project and project repository
11.40 – 12:15Design and processUI inventory and scoping
12.15 – 12:45Lunch break
12.45 – 13:00Design and processUI inventory discussion
13.00 – 13:30Designing and building the libraryDesign tokens foundation. Intro to visual regression testing
13.30 – 14:00Designing and building the libraryHands-on practice
Day 2
10.00 – 11:45Designing and building the libraryCoding and documenting the components. New design challenge
11.45 – 12:00Design system lifecycleVersioning and release. Documenting components in ZeroHeight
12.00 – 12:30LUNCH BREAK
12.30 – 13:30Design system lifecycleHands-on update and release
13.30 – 14:00RecapQ&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

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

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