Image for post
Image for post

Storybook for design

How to integrate your favorite design tools with Storybook

Dominic Nguyen
Nov 25, 2019 · 6 min read

Imagine a world where the design to development workflow was seamless. If you could connect design deliverables to the bonafide UI implementation, your team could build UIs faster with greater confidence.

You’d stop hearing questions like “does this look right?”, “do you have a design for this?” and “is this documented anywhere?” You wouldn’t need to context switch from development to design tools and back again.

This article showcases groundbreaking Storybook addons that bridge design and development. Storybook users will be able to unlock new techniques that help promote pixel perfection and sync UI documentation automatically.

Why are addons so powerful?

For instance, the GraphQL addon helps devs browse the GraphQL schema and query their API from inside Storybook. The a11y addon highlights accessibility violations in the Storybook preview window instantly. The i18n addon assists with internationalization. Today, we’ll explore some of the most innovative addons for design.

Image for post
Image for post

Design handoff addons

You inevitably end up spelunking through design docs or mixing up the versions. Once the FINAL-FINAL-v3 design is unearthed, you jump between editor, design, and Storybook to build the UI. And don’t forget about the missing states from design that need to be accounted for in development.

These addons streamline the design handoff process by embedding the design artifacts alongside your development workspace. That helps surface design inconsistencies earlier in the development process. What’s more, you’ll have an ongoing record showing the component design beside what’s actually built.

Figma addon

Image for post
Image for post

Abstract addon (for Sketch and Adobe XD)

Image for post
Image for post
Image for post
Image for post

Component library documentation addons

However, documentation often takes more work than folks expect. You end up sinking time into non-documentation tasks like site infrastructure, wrangling technical writers, and maintenance instead of actually writing docs.

Storybook already provides lightweight documentation out of the box (although we don’t call it that) by naturally encouraging developers to save UI component variations as “stories”. Documentation addons amplify this core capability to help interdisciplinary teams stay in sync.

Storybook Docs

Under the hood, SB Docs uses industry-standard docgen tooling to build API docs from stories. Bring design artifacts into SB Docs by embedding them via an iframe from Figma or Sketch (with Abstract).

Image for post
Image for post

InVision Design System Manager

DSM allows you to view Storybook components in the DSM app alongside the designs (which are extracted from Sketch). Teams can interact with the UI component implementation in the context of the design system before integrating it in their apps.

Image for post
Image for post

Zeplin

In addition,

Image for post
Image for post

Zeroheight

Image for post
Image for post

Story2sketch for Sketch

Image for post
Image for post

Design Token

Image for post
Image for post

Conclusion

Neither developers nor designers alone can predict every user’s interactions and edge cases. Mike Tyson once quipped that “everyone has a plan until they get punched in the face.’’ Indeed, this applies to creating UIs just as it does to boxing because users always break your assumptions. That’s why we need to work with design to build more thoughtful, defensive UIs.

Learn how to build addons

What’s next

🎨 If you’re a design tool interested in addons, we’d love to learn and support you. Chat with Michael Shilman and Norbert de Langen in Discord chat #maintainers channel.

Storybook is maintained by +800 open source contributors and guided by a steering committee of top maintainers. If you are interested in contributing, check out Storybook on Github, create an issue, or submit a pull request. Join us also in the Discord chat. Donate on Open Collective.

Storybook

The UI development environment you'll ♥️ to use.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store