Bridging the Gap Between UX Design and Development: Atomic Design & Storybook (bobkonf2026)

We have the pixel-perfect designs, the implementation is done to the tee. And yet, a seemingly small change in the designs suddenly leads to huge development efforts? In modern component-driven frontend development, designers and developers often speak different languages. If the only common ground for handover is mockups or finished Figma screens, then the designers' original intent can easily get lost. The result are inconsistencies between design and implementation, wasted effort on trying to replicate pixel-perfect designs, and unexpected effort down the line for design changes. This talk is about bridging the gap: With Atomic Design, we find a structured approach for communicating reusable UI components between designers and developers: Instead of implementing off of fully designed screens, we create a common language for the building blocks. Here is where Storybook comes into play, the industry standard tool for building, documenting and testing these building blocks in isolation. It empowers cross-functional teams to develop that common language build deterministic design systems. As an added benefit, Storybook encourages a clean frontend architecture with a clear separation between data model and presentation. In this talk, we are going to look into the ideas of Atomic Design, how Storybook can be used to bootstrap component libraries, and how you can add it to your existing project to develop a common language with UX design. Licensed to the public under https://creativecommons.org/licenses/by/3.0/de about this event: https://bobkonf.de/2026/thoma.html