Table of Contents Hide
- Revolutionize Your Design Process with UXPin Merge
- New way of importing UI components to UXPin Merge
- Merge npm integration – What Do You Get?
- How to use npm integration?
- Try Merge npm integration
We added a designer-friendly way of bringing UI code components into UXPin’s editor. It’s our new npm integration that makes Merge accessible to teams who lack active engineer’s support.
Revolutionize Your Design Process with UXPin Merge
UXPin with Merge technology allows you to create a new level of fidelity and interactivity in prototypes, smoothen design handoff, and unify designers and devs’ work with a single source of truth. It truly streamlines product development process.
Move Away from Static, Change to Fully-interactive Design
Gone are the days of static prototypes. Companies, especially the ones that reached a higher design maturity level, look for more efficient ways of prototyping. Linking lifeless artboards, translating design to code with imperfect tools, and documenting nuanced interactions time and time again adds more work and stalls growth.
This is where Merge comes in. With this technology, you can create prototypes with the elements that have true functionality built into them. It scales design like it did for Erica’s team at PayPal.
Streamline Collaboration Between Design and Development
With Merge, the design and development teams work with the same interactive components throughout the entire production process. Designers use the UI components, whereas developers copy the ready code from the very same design.
The translation of design into code is already there. Getting the most of a single source of truth unites design and engineering and simplifies the design handoff stage. In short: designers are happy, same as developers, and they don’t waste time on back-and-forths.
Use Accurate UI Components that Guarantee Design Consistency
Coded UI components used in the design process make the prototypes consistent from start to finish. The product is being built according to the designer’s intention. The best part – designers don’t even need to deal with code.
The outcome is that there is no drift between design and the end product’s look and feel which is extremely time and energy consuming without Merge technology.
New way of importing UI components to UXPin Merge
Before you can design with true components, you need to import a component library. Up until this point, there were two ways of bringing coded components to UXPin Merge.
- Git integration – developers use Git to host source code and its history; it requires technical help to import code components into UXPin.
- Storybook integration – Storybook stores public and private component libraries that you can bring to UXPin.
We now added the third way of importing UI components – npm integration – that gives designers a lot of autonomy.
Merge npm integration – What Do You Get?
Many design teams might struggle with the Merge Git integration if they lack developer’s active support. To make it easy for them to benefit from Merge, we’re releasing a new, designer-friendly way of importing a component library to UXPin.
How to use npm integration?
Time to see how you can use npm integration. Let’s start with a written description of how to do it.
Import npm Components to UXPin
An npm is an online registry of packages with ready-made development elements that you can download to use in your project. Some of the most popular open-source design systems are being distributed in this way.
You can use Adele (UXPin’s design system repository) to find which design system is in an npm package. Just scroll to the final column to see the way of distribution.
Alternatively, you can upload your own React-based component library to npm and use it in UXPin.
Here’s how to do the steps of bringing the npm design system into UXPin.
1. Add a New Library to UXPin Merge
Once you know which React-based design system to use, it’s time to sync it with UXPin Merge. Go to the Merge Tab in your UXPin dashboard and add a library via npm package. You need to provide an npm package name and the version you want to use. If your documentation requires it, add styles to the “assets location” field.
2. Configure UI Components
Open Merge Component Manager and specify components you want to import. You can categorize the components the way you want to. After publishing components, manage their properties and define which you want to import. Go to the library documentation to find the names and types of properties.
3. Start Creating Fully Interactive Prototypes
Time to create your first design. Go to the design editor and drop components on the canvas. See how easy it is to change the properties of the components you use! To check the components’ interactivity, go to “Preview” mode.
Finished your prototype? Now, you can just pass the project link to your fellow developer so that they can copy the code from your design and check the specs.
Follow our instructions and import interactive components
1. Watch a step-by-step video that tells you how to use the integration
We prepared a video walk-through of the integration. Watch it to learn how you can import an npm design system to UXPin.
2. Import npm components from MUI to UXPin
Read the full article here