Henning’s Blog.

Deploy your Storybook

The journey to an organization-wide adopted design system is long and hard. That's why it's even more important to tackle it in a continuous manner – making small but constant progress is crucial. Rome wasn't built in a day. Heroic and large one-off efforts won't be the silver bullet for real adoption inside your organization you hope they will be.

We're building layout primitives and other components of our design system in Storybook. With that approach, we can constantly iterate on them and share them easily. Building components in isolation is a game changer for building truly reusable bits of UI, as you think about their API first and are not constrained to a single use case as during feature development. Iterating on your components is important. Be it based on feedback from your design team or feedback from developers using them or in the worst case from users discovering bugs. You likely won't be able to hit the perfect implementation on your first try.

An often overlooked system to increase visibility and adoption of your design system is to deploy it. Even if it's not public, it should be accessible to everyone in your organization. With Storybook, we can easily export a static version and host it in a S3 bucket. This can be adapted to whatever other host or technology you're using, this is not about the technology but the approach of sharing it widely. On every push to our main branch, we have an automated CI job that builds and deploys the newest storybook, making sure it's always up-to-date. This has the added benefit of ensuring that our Storybook never breaks through (unrelated) changes. We would at least notice the CI failure.

Sharing a link to your Storybook makes it dead simple to ask for design feedback during development, and also gives everybody the opportunity to discover and play with our design system components.