Workshop: Storybook Tricks | Bridge-The-Gap - design systems consulting and workshops

What you will learn?

Unlock the full potential of Storybook as a comprehensive platform for your design system. This workshop goes beyond basic component rendering to teach you advanced customization, documentation strategies, and automated testing workflows.

You'll learn how to structure and style your Storybook to act as a complete documentation site. We'll cover organizing the sidebar, creating custom pages, and building bespoke documentation blocks. You will practice documenting design tokens a way that bridges the gap between design and code.

We will also dive into the ecosystem's advanced features. You'll set up automated interaction tests, reuse stories in unit tests, and create custom addons to enhance the developer experience. We will touch RTL support, LLM-ready documentation, version switchers and many more. You'll master the techniques to make your design system robust and user-friendly.

Topics we'll cover

Storybook Organization: Sidebar structure, grouping, tags, and custom pages
Design Tokens: Automating documentation for diffrent types of tokens and CSS utilities available in the library
Custom Documentation: Creating custom Docs Page templates, styled blocks, and property tables
Developer Experience: Type-based documentation for props with automated and semi-automated enhancements
Testing Strategies: Interaction tests and reusing stories in unit tests (Vitest/Jest)
Advanced Customization: Custom addons, decorators, LLM-ready documentation and many more

What you need to know

Environment: You will need Node.js (version 22 or higher) and NPM installed on your machine.
Repository: We will work with a provided public workshop repository. Basic familiarity with the file structure is helpful.
Experience: Basic knowledge of React and Storybook is assumed, but you don't need to be an expert.

Workshop Highlights

Practical & Applicable

All examples are practical. We curated a list of atomic recipes that are easy to grasp and immediately apply to your project.

Industry References

We provide numerous references to real-world industry examples, showing how leading companies solve similar challenges.

Flexible Participation

Choose your style: code along hands-on or just listen. You get comprehensive materials suitable for self-study at your own pace.

Why Attend

This workshop is designed for those who want to get more out of Storybook than just component rendering. You'll learn actionable techniques to make your Storybook a powerful, automated platform.

for Developers

Master advanced configuration, custom addons, and automated workflows to tailor Storybook to your needs.
Implement robust testing strategies (interaction & unit) to ensure component quality and prevent regressions.
Learn recipes for efficient, automated documentation that stays in sync with your codebase.

for Designers who Code

Take ownership of the documentation structure and layout without relying heavily on engineering resources.
Visualize design tokens and bridge the gap between Figma and the code library effectively.
Create bespoke documentation pages and custom blocks that truly reflect your design system's brand and guidelines.

Questions?

Have questions about the workshop? Connect with Varya on LinkedIn and send a message, or email at mail@varya.me.

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

A few years ago, I attended a workshop called Hands-on Design Systems with Varya Stepanova. It was a true turning point in my career — it sparked my journey into Design Systems and gave me a solid grasp of Design Tokens. If you're working on (or curious about) Design Systems, this is definitely worth your time!

Pierre-Yves Vignau

Design System Tech Lead at France Télévisions

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

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.

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.

Storybook Tricks

Practical Recipes for Documentation, Testing, and Automation