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.

8 & 9 April

11-15 EEST

 

5 & 6 May

11-15 EEST

Available tickets: 4 for designers, 5 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.

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

  • 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.

Varya Stepanova
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.

Nikita Sherbakov

Software architect & senior frontend engineer

Nikita has 10+ years of experience building web projects of different kinds, starting from small websites to Design Systems and complex web services. He can help with creating and maintaining frontend architecture, tuning the automations and sharing the processes.

Nikita Sharbakov

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

Nikita is an extremely skilled web programmer and a wonderful person to work with. His ability to efficiently understand, communicate, and execute requested adjustments is superior. His experience is recognized in the functionality, proficiency, and competency that is reflected in each completed task. He also cares about his client and takes the time to handle every question and concern right down to the last detail. I highly recommend Nikita for any programming need and happily serve as a reference!

Ekaterina Blake

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

Ability and need to understand the big picture, and always learning new things and utilising those learnings in practice, makes Nikita an asset to any product development team. Nikita's experience and skills nicely combine front-end development with UX design. I had the pleasure of working with Nikita in a team responsible for developing a fairly complex product where he was able to show the power to those two combined with very good results.

Rami Etrimo

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)