Connect Sketch Symbols with their React Counterparts via Storybook

Your dev team has embraced React for front-end development, and adopted Storybook to rapidly build and document components. Your design team, on its part, is using Brand.ai to manage and sync Sketch components across team members. Both designers and developers happily reuse components. In their respective silos, that is. When it’s time to work together, you’d hear the following:

[Developer] “Where is the latest design for this component?”

Developers often develop a new component in more than a single session. In each session they find themselves wondering if the design has been updated since the previous session. They’d start hunting for the latest design in a shared folder, email, Jira, Asana, Slack, or any other asset sharing platform where the last communication with the designer took place. Not the best part of a developer’s workday.

[Developer] “The page includes a component that’s not in our system. Is it a revision of an existing component? Which one? Or maybe it’s a new component altogether?”

When developers interpret a page spec it’s hard to determine how to map components that appear in the spec to existing components in the system.

[Designer] “Where can I find a live view of this UI component?”

As developers do their magic and bring a component to life, designers have limited visibility to the process and miss an opportunity to provide early feedback. Even when a component is finally live in production, designers often need to track it down by triggering the right flow in a production app.

Introducing Brand.ai’s Storybook Integration

To help streamline component development, and facilitate better communication around components across designers and developers, we’ve built the Brand.ai Storybook integration.

Embedding Sketch symbols in Storybook

Design teams use the Brand.ai Sketch plugin to maintain a UI library in the cloud.

With the Brand.ai Storybook addon, development teams can now embed component designs from the cloud library into Storybook. The embedded design will appear next to the live component. As developers build new components or iterate on existing ones, they can refer to the latest design in the context of the component they’re working on. No more hunting for the latest graphics!

Linking Sketch symbols to a live React component

In Brand.ai, the web view of your design library will contain a link directly to the Storybook story:

In case a component is still in the making, this allows designers (and managers) to get a snapshot of the work in progress. Of course, the link is there after the component is complete, so it’s easy to switch between design and code view at any time.

Other benefits of establishing a mapping between Sketch and React components include:

• Keeping design and code components in sync is easier. The side-by-side view in Storybook calls for the dev and design owners to hash out any discrepancies.
• Designers can communicate changes in components to developers explicitly via the platform, instead of introducing changes implicitly in pages.
• With less ambiguity around components, developers can translate specs into code faster.

Try it yourself

The instructions on how to get up and running with Brand.ai and Storybook can be found in this github repository. Let us know what you think!