It’s time to challenge the status quo of product development. Designing with images or vectors is what almost every tool out there offers but it causes just too many inconsistencies between a prototype and the end-product.
UXPin has always been operating in a different paradigm, with all elements being rendered with html & css. But now we’ve decided to bring something new to the table — letting designers use the same fully interactive components as their devs use to build the product. Designing with code components removes the handoff back and forths.
It’s time to let everybody try this solution — there’s a UXPin-Storybook integration on trial waiting for you. Join us on Product Hunt and share your feedback.
Use the single source of truth
The single source of truth in product development stores all the components, elements and documentation that help build the products. It should be this one source of knowledge where product team members go to check how digital products should be designed and built. In the real world, there are a lot of places where all the needed information is placed, resulting in siloed and messy communication.
Some time ago, design systems were this new big thing to help organize all the knowledge in one place. However, reality kicked in and the problem of the disconnect between design and development hasn’t been resolved.
New technology can fix that. Just allow product teams to leverage dev tools such as Git repos or Storybook, where there’s only the final components and documentation in line with the company’s standards. It will improve DesignOps processes and maintain parity between design and code. As a result, designers and developers can all use the same UI elements, documentation, and code from one source — Git or Storybook! At UXPin, we call this technology “Merge” as it brings product team members together.
If you’re tired of designing with images that are mere representations of the product, struggling with adding interactions that still would be changed on the development stage, it’s about time to design with production-ready components coming from devs’ libraries. The perks? Here are a few:
Everything is in one place. Really.
The components you use for design are always updated and behave how they should, with all the interactions and other standards kept. You have less work around your work as you don’t have to search for the right version of the element. Also, your designs and component library in UXPin will be always up to date as it’s synced with the Storybook or Git repo of your devs.
Smooth handoff
The gap between what designers have created and what developers have built usually boils down to one thing — everyone used different technologies to do their work. Design tools are typically powered by vectors or pixels, whereas apps and websites are powered by specific programming languages and frameworks.
The vector or pixel-based approach is extremely limited and represents just a simple visualization of the end product. For example, when you want to add some advanced interactions to a prototype — it’s not always possible, because neither vectors nor pixels can work with variables, conditional logic or even simple input fields. However, when developers use code in UI components, those blockers disappear.
So, if your design is code-powered, the limitations of the image-based approach are gone. All the complex interactivity is built in the components and the code behind the UI is production-ready. This means no more back and forths between designers and developers.
Design 10x faster
A product design needs to explain how the final product should look and behave. That’s why adding all the advanced interactions to a project, keeping consistency between components and standards is extremely important. But it also takes time. On top of that, because of the gap between technologies of design and development, there is a lot of back and forths to get all the details and interactions right.
However, when designing with code components, powered by Merge technology, you can cut down the time of designing 10x as all the interactions are already built-in. All the components in your design library look and behave the way they should, critically speeding up the design process. Some teams like PayPal proved that. An additional benefit is having the prototypes so advanced that your user tests become much more reliable.
Design with code — try Storybook integration
Storybook is this one place where developers can build and store the UI components. It’s also a great tool to test the elements and prepare clear documentation. Storybook supports a lot of frameworks, including the most popular ones like React, Angular, and Vue.
UXPin and Storybook Integration
Storybook is one of two integrations (Git repo is the first one) that use Merge technology to sync coded components with our design tool, UXPin. The entire integration with Storybook takes around 1 minute, and lets you design with code components right away!
Taste the power of code
Sign up and give it a try with a built-in Material UI library with components coming straight from Storybook or sync a new library yourself. Feel the power of code and see how the whole product team can benefit from using the single source of truth!
Try now and celebrate with us on Product Hunt!
