Setting up Storybook in DSM
Mastering InVision DSM
Tutorial Breakdown
Live Components in DSM create a single source of truth across design and development, bringing design patterns, coded components, and the documentation that ties them together – all in one view. With code published to DSM, a preview of your live component will populate — along with all add-ons configured in Storybook.
Transcript
Historically, design patterns, coded components, and documentation have existed in three separate repositories — creating a divide between design and development.
Live Components in DSM create a true single source of truth, bringing design patterns, coded components, and the documentation that ties them together – all in one view.
Live Components work with Storybook — supporting frameworks like Angular, React, Vue, and HTML.
For a developer, setting up the integration is straightforward. We’ve put together detailed, step by step documentation to walk you through it.
Once you’ve set up the integration, you’ll be ready to connect components in DSM to your Stories in Storybook.
A component page on your DSM documentation site contains each variation and state of a particular component. To learn more about building component pages, we have a detailed video on viewing and managing your design system from the web.
At the top of a component page, you’ll find the option to add a tab — where you can then choose “Code” — then choose a Framework. Down below, you’ll find a component container ID to link a Storybook story to this component page.
Once your stories in Storybook are connected, pushing updates to DSM is as simple as a one-line command.
With code published to DSM, a preview of your live component will populate — along with all add-ons configured in Storybook.
As you toggle or edit knobs, the preview — as well as the code snippet below will auto-update in real time.
In addition to pulling in components from Storybook, you can also create additional tabs.
Creating a Documentation Tab gives you a place to capture usage guidelines or other documentation for a component.
A Prototype Tab let’s you embed an entire InVision prototype to display a component’s usage in context. You can even switch to inspect mode without leaving DSM.
You can also add a tab to embed live components from an external code environment like CodePen and a few other services.
To reference any other code repositories or libraries, you can add any custom URL to the Links Tab — so the flexibility really is limitless.
And when you publish a prototype using Craft Sync — your DSM components, their specs, and your production-ready code — all come together in Inspect. So devs have direct access to your real code repositories — directly within the context of design.
Live Components in DSM create a true single source of truth, bringing design patterns, coded components, and the documentation that ties them together – all in one view.
Live Components work with Storybook — supporting frameworks like Angular, React, Vue, and HTML.
For a developer, setting up the integration is straightforward. We’ve put together detailed, step by step documentation to walk you through it.
Once you’ve set up the integration, you’ll be ready to connect components in DSM to your Stories in Storybook.
A component page on your DSM documentation site contains each variation and state of a particular component. To learn more about building component pages, we have a detailed video on viewing and managing your design system from the web.
At the top of a component page, you’ll find the option to add a tab — where you can then choose “Code” — then choose a Framework. Down below, you’ll find a component container ID to link a Storybook story to this component page.
Once your stories in Storybook are connected, pushing updates to DSM is as simple as a one-line command.
With code published to DSM, a preview of your live component will populate — along with all add-ons configured in Storybook.
As you toggle or edit knobs, the preview — as well as the code snippet below will auto-update in real time.
In addition to pulling in components from Storybook, you can also create additional tabs.
Creating a Documentation Tab gives you a place to capture usage guidelines or other documentation for a component.
A Prototype Tab let’s you embed an entire InVision prototype to display a component’s usage in context. You can even switch to inspect mode without leaving DSM.
You can also add a tab to embed live components from an external code environment like CodePen and a few other services.
To reference any other code repositories or libraries, you can add any custom URL to the Links Tab — so the flexibility really is limitless.
And when you publish a prototype using Craft Sync — your DSM components, their specs, and your production-ready code — all come together in Inspect. So devs have direct access to your real code repositories — directly within the context of design.