Design with Code Revolution: UXPin + Storybook Integration

There are many ways for product teams to achieve greater efficiency and consistency in the design handoff. 

At UXPin, we believe in silos-free teams and that the communication between designers and developers should be as smooth as possible. That’s why we decided to create an integration that will allow product teams to use the single source of truth so that everybody can work with the same components and technology. 

From now on, designers can bring production-ready and fully interactive components from Storybook to UXPin editor and design with them right away. If you want to simplify the handoff and speed up the go-to-market, this is the solution you’re looking for. 

The product drift challenge

Many design leaders highlight the problem of design and development inconsistencies — when the end-product doesn’t look how it was supposed to in the original project. The image-based designs are just visualizations of what products should look like, so they can’t fully depict what needs to be created. Sometimes developers have hard times adding interactions that were planned in a tool that offers limited interaction capabilities. The other time, the colors or typography is off. In other words: it’s very challenging and time-consuming to build a pixel-perfect product when relying on pixel-based designs.

The main reason for that is designers and developers speaking different languages — using different technologies in their tools.

So, instead of working with the real components that already have all interactions fleshed out and are created with the right properties, designers need to fake all of that. To get to the stage where everything is in line with the concept, there will be (too) many iterations.

Don’t worry. There are some tools that offer a code-based approach. Thanks to this, the elements will look and behave the same way as an end-product and bring you closer to the desired consistency. Also, it doesn’t require you to know how to code. Great, right? But why stop there? Let’s go one step further.

Usually, when you aim for consistency and try to standardize all the elements used in designs like typography, UI patterns, etc., you build a Design System and then have all the production-ready components organized in developers’ repositories.

How about using what has already been developed in new designs? It’d make things easier to import the ready components that devs have to the design tool library and prototype with them right away.

The ultimate single source of truth

We’ve come up with a technology called Merge that lets everybody in a product team use the same code components. This innovation integrates the repositories that developers use to store their production-ready components with UXPin.

The first solution we offered was the integration with Git repositories like Github, Bitbucket, GitLab, and more. It turned out to be a game-changer on the market for many tech giants, like PayPal. They have adapted Merge and completely redefined their DesignOps process. This change allowed them to speed up the design process over 6 times and reduce the handoff process to the minimum.

To enable this solution for more product teams, we decided to expand Merge technology. So, here we are with another integration. This time, with the help of a leader among UI development tools for developers, — Storybook.

This brand new integration gives you the freedom of using more frameworks (around 15) and cuts down the whole setup process to 1 minute.

If you want to get to know more about the integration, see our Docs.

Benefits of the integration

Build advanced UI fast

Now you can build high-fidelity prototypes fast just by dragging and dropping code components on the canvas. They are fully interactive and behave just like an end product. On top of that, you can still add UXPin’s interactions to glue different UI patterns together into a truly immersive experience for user testing and show your team how the product should look. The whole process is extremely fast.

Besides speed, you also improve the design consistency. The Storybook components are in line with your production standards, so you don’t have to spend time matching the right colors, fonts, or rebuilding parts of the UI.

Manage only one library

There’s no need to take care of the UXPin and Storybook libraries separately. The components are in sync all the time, so whenever your Story (Storybook component) is changed, your designs and library in UXPin get automatically updated. These are the same code-powered components as in the Storybook library, so whatever works there will work in UXPin.

Handoff revolution

All those back and forths between designers and developers cost time and money. By using a single source of truth, you can remove the silos and speed up your product development process. There’s no place for handoff drift with design or interaction inconsistencies. When the prototype is finished, the developer just needs to find the components that designers used in their Storybook. That’s it! Developing a product where you already have the code for design is much faster and clearer.

Try UXPin + Storybook integration with your team

Build prototypes that behave like real products and cut down your product development process. Request access for our Storybook integration, integrate with your library in under 1 minute, and get ready to design with code! Request access here.

Also published on Medium's subdomain.