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

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.

Franz Thoma

Consultant at TNG Technology Consulting in Munich, Software Engineer and Product Owner (not simultaneously). Functional Programming and Haskell enthusiast. Playing around with compilers and domain specific languages both on the job and as a hobby. Interested in building and shaping software architecture, products and organizations.