Component documentation is critical but doesn’t tell the whole story. Wouldn’t it be nice if stories could show you how a component looks after a user interacts with it? Component testing allows you to capture these interactions as stories using testing-library! In our latest YouTube tutorial, chantastic explores interactive component…

Storybook is made for teams. You set up Storybook’s tools once and they’re available on any machine, in any browser, with any skill level. Storybook Viewport allows developers, designers, and other collaborators to see components and pages in every supported device and orientation. This week chantastic shows teams how to…

Browser devtools aren’t collaborative enough for team work. UIs have countless stakeholders: designers, developers, and managers, that need a shared workspace to confirm UI appearance. Storybook comes with built-in CSS debugging tools like Measure, Outline, and Viewport. That means no more hassling with heavy devtools drawers, panels, and panes for the most common tasks. Learn how to build and debug layouts faster in chantastic’s latest video, Debug CSS without DevTools!

How do you break into design systems engineering in 2022? There isn’t one, clear path. Nor are there schools, programs, or certificates that guarantee design system experience. From the outside, it might feel like an impossible field to break into. I asked Jen Chan — TorontoJS organizer and artist —…

You work hard to build reusable components but no one uses them. Why? Documentation is the key to adoption. Storybook has tools like Controls to ensure that your brilliant work can be experienced by developers, designers, and product owners alike. Controls are one of Storybooks most collaborative features. They allow…

Monorepos are a code architecture popularized by tech giants Google and Facebook. The idea is to collocate multiple packages (e.g. your app and design system.) in one repository, making it easier to work on them simultaneously. But is a monorepo right for your team? Can you maintain a monorepo without…

Atomic Design by Brad Frost inspired frontend developers to create design systems. It shifted our focus from implementing UIs one page at a time to creating reusable, atomic components. Design systems went from “nice to have” to “must have”. But a majority of design systems ended up imploding. According to…

We asked Brad Frost if design systems are still relevant in 2022? — Atomic Design by Brad Frost inspired frontend developers to create design systems. It shifted our focus from implementing UIs one page at a time to creating reusable, atomic components. Design systems went from “nice to have” to “must have”. But a majority of design systems ended up imploding. According to…

This week, chantastic asks Adam Fratino about scaling Peloton’s design system from startup to IPO! Peloton revolutionized fitness by bringing the buzz of boutique fitness into people’s homes. But as their product grew, it became tougher to maintain a cohesive brand. How did a small team build a global brand? Adam spills his secrets on scaling a design system to support multiple products, across dozens of countries, in a matter of years. His advice? Keep it simple, keep it small, account for change, and embrace high-touch, human processes.