πŸ‘‹ Hands-on workshop

Building a design systemwith Figma, React, and Storybook

Get your workshop spot πŸ‘‡

What you will learn?

Learn and practice design systems on a real project. You can join as a designer or developer, engaging in multidisciplinary work.

Participants will work on a design system example, simulating a real project environment. Designers create a tokens system and themeable Figma components, while developers build a component library with React and Storybook. You'll contribute to a shared result, gaining hands-on experience in collaborative design and development.

By the end of the workshop, you'll have contributed to a design system with real tasks that touch token system, components, and documentation. You'll also receive one hour of individual consultation within the next two months to address specific questions and deepen your understanding.

Workshop content

9:00 β€” 9:30IntroductionSay Hi πŸ‘‹
9:30 β€” 10:00TeamsIcebreaker exercise
10:00 β€” 10:30Design and processSetting up Figma project and project repository
10:30 β€” 11:30Design and processUI inventory and scoping
11:30 β€” 12:30Designing and building the libraryDesign tokens foundation, Tokens documentation in Storybook
12:30 β€” 13:00Lunch break
13:00 β€” 13:30Design system lifecycleDesign system lifecycle: hands-on practice, updates, versioning
13:30 β€” 15:00Designing and building the libraryCoding and documenting the components. New design challenge
15:00 β€” 15:30Designing and building the libraryThe magic of instant product update
15:30 β€” 16:00RecapQ&A session and discussion

Workshop Highlights

Real-World Experience

Work on a realistic design system project with practical challenges and solutions that translate directly to your daily work.

Cross-Disciplinary

Experience the power of designers and developers working together to create a cohesive design system that works for everyone.

Personalized Follow-Up

Includes a 1-hour individual consultation within two months after the workshop to address your specific questions.

Why Attend

As a Designer

  • Practice UI inventory
  • Learn how to create a scalable tokens system
  • Organize components in Figma

As a Developer

  • Engage in component-driven development
  • Document components in Storybook
  • Improve design&development workflows

As a Team

  • Collaborate on a shared project with real-life tasks
  • Experience a full design system lifecycle
  • Enhance team communication and collaboration

Book a Call

Have questions about the workshop? Book a free 30-minute call with Varya to discuss your expectations and how this workshop can benefit your team.

People Say

Building a Design System πŸ› οΈ Our members participated in the Hands-on with Design Systems workshop by Varya Stepanova and Sherif Saleh. 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

Varya possesses a unique blend of technical skills and creative vision, which allows her to translate complex design concepts into practical, scalable solutions. Her work on the Yara Design System has significantly enhanced the overall quality and streamlined the developer experience. I wholeheartedly recommend her to any organization seeking strong engineering and design system leadership.

Alexander Toporov
DS Lead at Yara

I had the pleasure of supervising Varya's work on a design system project over many months and I am impressed with her thought leadership and extensive knowledge of the design system space. She skillfully supported a team of engineers and designers and steered them to the successful delivery of a design system that was integrated into hundreds of products within an organization.

Daniel Miebach
Head of UX at METRO

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
Lead Engineer at SOK

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

Who We Are

Varya Stepanova

Varya Stepanova

Design Systems Architect and Engineering Manager

Varya has over 20 years of expertise in UI engineering and frontend development. A pioneer in the field, she started working with design systems even before the term was widely recognized. With a remarkable 9 years in consultancy, including 4 years as an independen consultant, Varya specializes in helping companies launch and enhance their design systems Her work focuses on bridging the gap between designers, developers, and business specialists, leveraging her extensive experience in component-driven UI development and her background in design.

Sherif Saleh

Sherif Saleh

Design Manager

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.

Irina Illustrova

Irina Illustrova

Senior UI Engineer

Irina is seasoned UI/UX Engineer with a profound expertise in various technologies (React, Web Components, Vue etc) and its ecosystem. Irina is adept at managing complex architectural and infrastructural tasks Her comprehensive experience with multiple design systems, coupled with a business-oriented mindset, enables her to maintain a high technical level in projects while aligning with management goals. Additionally, Irina's leadership skills shine in her ability to effectively guide and mentor other engineers, making her an invaluable asset to any team.

Get your workshop spot πŸ‘‡