π Hands-on workshop
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.
9:00 β 9:30 | Introduction | Say Hi π |
9:30 β 10:00 | Teams | Icebreaker exercise |
10:00 β 10:30 | Design and process | Setting up Figma project and project repository |
10:30 β 11:30 | Design and process | UI inventory and scoping |
11:30 β 12:30 | Designing and building the library | Design tokens foundation, Tokens documentation in Storybook |
12:30 β 13:00 | Lunch break | |
13:00 β 13:30 | Design system lifecycle | Design system lifecycle: hands-on practice, updates, versioning |
13:30 β 15:00 | Designing and building the library | Coding and documenting the components. New design challenge |
15:00 β 15:30 | Designing and building the library | The magic of instant product update |
15:30 β 16:00 | Recap | Q&A session and discussion |
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.
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.
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.