Merge npm Integration – Another Way of Importing Components
Here’s a designer-friendly way of bringing UI code components into UXPin’s editor. It’s our npm integration that makes Merge accessible to teams who lack active engineer’s support.
Try npm integration to speed up interactive prototyping and stay 100% consistent with the final product. The npm components will behave like a lego bricks that you can drag and drop to build advanced prototypes. Discover UXPin Merge.
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.
The Third way of Importing UI components to UXPin Merge
Before you can design with true components, you need to import a component library. There are three 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.
- 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 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
Would you like to bring MUI to UXPin? Our step-by-step article will guide you through the process.
How to import MUI components to UXPin?
3. Import npm components from Ant Design to UXPin
Ant Design is one of the most popular libraries. When you log in to UXPin, you will see some of the Ant Design components that we’ve imported through npm. They are ready for you to use. Check how we imported them to UXPin in this article.
How to import Ant Design components to UXPin?
Use npm integration + Patterns
Once you import everything you need and save changes, you can build more complex components out of basic ones or save components with properties to avoid repeating the same steps over and over. In other words, create Patterns.
Read all about it: Patterns documentation.
Try Merge npm integration
With npm integration, you don’t need developers’ help to bring coded UI elements to UXPin. The designers can import and manage the UI components by themselves in UXPin. Just the way they want.
Bring UI components through npm integration. Connect the design and development team with a single source of truth and break organizational silos. Sign up for a 14-day trial to test the integration.
