Sketch Design System Integration with Storybook

Here is how Figma does theirs

Hi @jamesjaen and welcome to the Forum :raised_hands: Thanks for taking the time to share this.

Storybook is a great tool. However, doing an integration like this one on our own is not in our plans for now.

Like many open source projects, Storybook is built and maintained by different people from their community. In this case, the integration shown in the video was developed by someone from the Storybook community, but is now labeled as deprecated. There’s another Designs integration, which was developed by the Storybook team.

At its core, Storybook is thought for the development process, for building components with code. Sketch on the other hand, is focused on supporting the Design process by building components visually.

However, there’s an overlap: both Sketch and Storybook help you document Design Systems, and our goal here hasn’t changed: to keep improving our product.

Hey, I personally don’t see much use in developers having a design snippet in their Storybook. What I think would be more interesting is to have an ability to associate a link to a story with a symbol. That way, when developer inspects a design, they can easily find the right component in Storybook.

For example: Figma does something like this, every component has a “documentation” field you can paste a link to, which I think is not enough.

I think it would be useful, if we could actually define multiple fields for symbols in a library, so each symbol could have, for example:

  • Documentation: Link
  • Storybook React: Link
  • Storybook Vue: Link

and so on…