How to Turn Your Design System into an npm Package?

Merge’s npm integration gives design teams more control to import fully functional component libraries from the npm registry. The benefit of designing prototypes with a component library is designers get full functionality and fidelity without writing a single line of code!

If you’re unsure what any of this “npm stuff” means, don’t worry, this article will explain everything you need to know, including how to create an npm package for your design system.

Deliver projects with minimal design or coding from scratch using UXPin Merge. Visit our Merge page for ways to import your company’s design system and discover the endless possibilities of component-driven prototyping in UXPin.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

What is npm?

Node Package Manager (npm) is a software registry for Node.js/JavaScript applications hosting private and open-source packages. npm is “one of the largest developer ecosystems in the world” with over a million packages.

What is a package?

If you’re not technically proficient, you’re probably wondering, “what is a package?“

A package contains files and code required to run an application. There are two types of packages:

Dependencies: third-party packages needed for an application to work
devDependencies: packages engineers use during development (tools, automation, testing, etc.)

For example, if you want to build an application featuring Google Maps, instead of writing everything from scratch, you install the google-maps package and write a few lines of code to display a map and location.

For this article, we’ll focus on dependencies, more specifically component library packages. Here are some resources if you would like to go deeper into the technical aspects of packages and npm:

Who can create and publish packages?

Anyone can create a package and publish it to the npm registry. You will need basic programming skills and an npm account to upload your package.

What is Component-Driven Prototyping?

As a designer, you’re probably wondering, “why do I need to know about packages and npm?” One of the things you can store in a package is a design system’s component library.

Engineers can install the design system’s component library in their project’s dependencies and write a couple of lines of code where they want these UI elements to appear. And, with UXPin Merge’s npm integration, design teams can use these components too.

merge component manager npm packages import library

UXPin Merge allows designers to import a design system from a repository for prototyping. Design teams use visual UI elements in UXPin and can move them around the canvas as any other design element created using lines and shapes.

The only difference is Merge components have code behind them, so designers enjoy the same fidelity and functionality as engineers. With designers and engineers using the same component library, design handoffs are seamless with minimal designing or coding from scratch.

uxpin design system components states icons 2

Component-driven prototyping in UXPin allows design teams to build accurate replicas of the final product, significantly enhancing usability testing and stakeholder feedback.

There are several ways you can sync a design system to UXPin using Merge, but for this article, we’ll focus on how to publish your component library to the npm registry and import it into UXPin using the npm integration.

How to Turn Your Design System into a Package for the npm Registry

With UXPin’s new npm integration, designers can import their product’s design system into UXPin via the npm registry. If your design system doesn’t have a package, follow these steps to create one.

Step 0. Do you have a component library?

Your design system must have a coded component library to use UXPin’s npm integration–or any Merge integration. We’ve created this step-by-step guide to creating a design system if you don’t have one.

You can also host an open-source component library and edit the code to meet your product’s requirements.

Step 1. Create an npm account

If you want to keep your design system private (only visible to people you authorize), you’ll need a paid npm account. Alternatively, you can upload a public package that anyone can install and use for their projects.

Step 2. Check your npm version

Private packages must use npm version 2.7.0 or greater. You can check which version your system is running by executing the following command in your terminal:

npm -v or npm -version

You can upgrade to the latest npm version by executing the following command:

npm install npm@latest -g

Step 3. Create a package

npm’s documentation provides an 8-step process for creating and publishing a private package. It’s important to note that you must create an npm user account and create a paid npm organization to share private packages with your team.

Step 4. Test your package

You must test your package to ensure it’s bug-free by executing the following command:

npm install my-package

(replace my-package with the name of your package)

Step 5. Publish the package

Again, we recommend following npm’s documentation for publishing private packages. Once you have completed these steps, your package should be visible on the npm registry by visiting its assigned URL (usually ending with your package name):

https://npmjs.com/package/*package-name

(replacing *package-name with the name of your package)

Step 6. Import the package’s components into UXPin

Once you have completed the steps above, you can import your component library into UXPin using the npm integration. The process will be similar to importing the MUI open-source library described in this step-by-step tutorial.

Using the Merge Component Manager (MCM), you can import each component and its associated properties (defined as React props in the design system package).

Design teams can scale the design system using UXPin Patterns, allowing you to combine multiple Merge and non-Merge UI elements to create new components and templates. Engineers can convert these patterns into code and add them to the package repository, making them available for designers to import via MCM.