{"id":36717,"date":"2022-09-29T07:45:00","date_gmt":"2022-09-29T14:45:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=36717"},"modified":"2023-03-29T05:05:08","modified_gmt":"2023-03-29T12:05:08","slug":"how-to-turn-design-system-into-npm-package","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-turn-design-system-into-npm-package\/","title":{"rendered":"How to Turn Your Design System into an npm Package?"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/How-to-Turn-Your-Design-System-into-an-NPM-package-1024x512.png\" alt=\"How to Turn Your Design System into an NPM package\" class=\"wp-image-36718\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/How-to-Turn-Your-Design-System-into-an-NPM-package-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/How-to-Turn-Your-Design-System-into-an-NPM-package-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/How-to-Turn-Your-Design-System-into-an-NPM-package-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/How-to-Turn-Your-Design-System-into-an-NPM-package.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Merge&#8217;s <a href=\"https:\/\/www.uxpin.com\/merge\/npm-integration\">npm integration<\/a> 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!<\/p>\n\n\n\n<p>If you&#8217;re unsure what any of this <em>&#8220;npm stuff&#8221;<\/em> means, don&#8217;t worry, this article will explain everything you need to know, including how to create an npm package for your design system.<\/p>\n\n\n\n<p>Deliver projects with minimal design or coding from scratch using UXPin Merge. <a href=\"https:\/\/www.uxpin.com\/merge\">Visit our Merge page<\/a> for ways to import your company&#8217;s design system and discover the endless possibilities of component-driven prototyping in UXPin.<\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <p class=\"discover-merge__heading\">Reach a new level of prototyping<\/p>\n            <p class=\"discover-merge__text\">Design with interactive components coming from your team&#8217;s design system.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-npm\">What is npm?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/logo-uxpin-merge-npm-packages.png\" alt=\"logo uxpin merge npm packages\" class=\"wp-image-35050\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/logo-uxpin-merge-npm-packages.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/logo-uxpin-merge-npm-packages-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Node Package Manager (npm)<\/a> is a software registry for Node.js\/JavaScript applications hosting private and open-source packages. npm is <a href=\"https:\/\/www.npmjs.com\/about\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>&#8220;one of the largest developer ecosystems in the world&#8221;<\/em><\/a> with <a href=\"https:\/\/snyk.io\/blog\/npm-passes-the-1-millionth-package-milestone-what-can-we-learn\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">over a million packages<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-a-package\">What is a package?<\/h3>\n\n\n\n<p>If you&#8217;re not technically proficient, you&#8217;re probably wondering, <em>&#8220;<\/em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>what is a package?<\/em><\/a><em>&#8220;<\/em><\/p>\n\n\n\n<p>A package contains files and code required to run an application. There are <a href=\"https:\/\/www.hostinger.com\/tutorials\/what-is-npm#What_Are_Dependencies_and_devDependencies\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">two types of packages<\/a>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Dependencies:<\/strong> third-party packages needed for an application to work<\/li>\n\n\n\n<li><strong>devDependencies:<\/strong> packages engineers use during development (tools, automation, testing, etc.)<\/li>\n<\/ul>\n\n\n\n<p>For example, if you want to build an application featuring Google Maps, instead of writing everything from scratch, you install the <a href=\"https:\/\/www.npmjs.com\/package\/google-maps\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>google-maps<\/em><\/a> package and write a few lines of code to display a map and location.&nbsp;&nbsp;<\/p>\n\n\n\n<p>For this article, we&#8217;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:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.hostinger.com\/tutorials\/what-is-npm\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">What Is npm? A Basic Introduction to Node Package Manager for Beginners<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.freecodecamp.org\/news\/what-is-npm-a-node-package-manager-tutorial-for-beginners\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">What is npm? A Node Package Manager Tutorial for Beginners<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-who-can-create-and-publish-packages\">Who can create and publish packages?<\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-component-driven-prototyping\">What is Component-Driven Prototyping?<\/h2>\n\n\n\n<p>As a designer, you&#8217;re probably wondering, <em>&#8220;why do I need to know about packages and npm?&#8221;<\/em> One of the things you can store in a package is a design system&#8217;s component library.<\/p>\n\n\n\n<p>Engineers can install the design system&#8217;s component library in their project&#8217;s dependencies and write a couple of lines of code where they want these UI elements to appear. And, with UXPin Merge&#8217;s <a href=\"https:\/\/www.uxpin.com\/merge\/npm-integration\" target=\"_blank\" rel=\"noreferrer noopener\">npm integration<\/a>, design teams can use these components too.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/merge-component-manager-npm-packages-import-library.png\" alt=\"merge component manager npm packages import library\" class=\"wp-image-35052\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/merge-component-manager-npm-packages-import-library.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/merge-component-manager-npm-packages-import-library-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>UXPin Merge allows designers to import a <a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system<\/a> 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.&nbsp;<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"501\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/uxpin-design-system-components-states-icons-2.png\" alt=\"uxpin design system components states icons 2\" class=\"wp-image-34953\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/uxpin-design-system-components-states-icons-2.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/uxpin-design-system-components-states-icons-2-449x300.png 449w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-component-driven-prototyping\/\" target=\"_blank\" rel=\"noreferrer noopener\">Component-driven prototyping<\/a> in UXPin allows design teams to build accurate replicas of the final product, significantly enhancing usability testing and stakeholder feedback.<\/p>\n\n\n\n<p>There are several ways you can sync a design system to UXPin using Merge, but for this article, we&#8217;ll focus on how to publish your component library to the npm registry and import it into UXPin using the npm integration.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-turn-your-design-system-into-a-package-for-the-npm-registry\">How to Turn Your Design System into a Package for the npm Registry<\/h2>\n\n\n\n<p>With UXPin&#8217;s new <a href=\"https:\/\/www.uxpin.com\/merge\/npm-integration\" target=\"_blank\" rel=\"noreferrer noopener\">npm integration<\/a>, designers can import their product&#8217;s design system into UXPin via the npm registry. If your design system doesn&#8217;t have a package, follow these steps to create one.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-0-do-you-have-a-component-library\">Step 0. Do you have a component library?<\/h3>\n\n\n\n<p>Your design system must have a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-component-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">coded component library<\/a> to use UXPin&#8217;s npm integration\u2013or any Merge integration. We&#8217;ve created this <a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">step-by-step guide to creating a design system<\/a> if you don&#8217;t have one.<\/p>\n\n\n\n<p>You can also host an <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-react-component-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\">open-source component library<\/a> and edit the code to meet your product&#8217;s requirements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-1-create-an-npm-account\">Step 1. Create an npm account<\/h3>\n\n\n\n<p>If you want to keep your design system private (only visible to people you authorize), you&#8217;ll need a <a href=\"https:\/\/docs.npmjs.com\/about-private-packages\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">paid npm account<\/a>. Alternatively, you can upload a <a href=\"https:\/\/docs.npmjs.com\/about-public-packages\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">public package<\/a> that anyone can install and use for their projects.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-2-check-your-npm-version\">Step 2. Check your npm version<\/h3>\n\n\n\n<p>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:<\/p>\n\n\n\n<p><strong>npm -v<\/strong> or <strong>npm -version<\/strong><\/p>\n\n\n\n<p>You can <a href=\"https:\/\/docs.npmjs.com\/about-private-packages\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">upgrade to the latest npm version<\/a> by executing the following command:<\/p>\n\n\n\n<p><strong>npm install npm@latest -g<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-3-create-a-package\">Step 3. Create a package<\/h3>\n\n\n\n<p>npm&#8217;s documentation provides an <a href=\"https:\/\/docs.npmjs.com\/creating-and-publishing-private-packages\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">8-step process for creating and publishing a private package<\/a>. It&#8217;s important to note that you must <a href=\"https:\/\/www.npmjs.com\/signup\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">create an npm user account<\/a> and <a href=\"https:\/\/docs.npmjs.com\/creating-an-organization\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">create a paid npm organization<\/a> to share private packages with your team.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-4-test-your-package\">Step 4. Test your package<\/h3>\n\n\n\n<p>You must test your package to ensure it&#8217;s bug-free by executing the following command:<\/p>\n\n\n\n<p><strong>npm install <\/strong><strong><em>my-package<\/em><\/strong><\/p>\n\n\n\n<p>(replace <strong><em>my-package<\/em><\/strong> with the name of your package)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-5-publish-the-package\">Step 5. Publish the package<\/h3>\n\n\n\n<p>Again, we recommend following npm&#8217;s documentation for <a href=\"https:\/\/docs.npmjs.com\/creating-and-publishing-private-packages#publishing-private-packages\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">publishing private packages<\/a>. 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):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;npmjs.com\/package\/*package-name<\/code><\/pre>\n\n\n\n<p>(<em>replacing *package-name<\/em> with the name of your package)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-6-import-the-package-s-components-into-uxpin\">Step 6. Import the package&#8217;s components into UXPin<\/h3>\n\n\n\n<p>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 <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">this step-by-step tutorial<\/a>.<\/p>\n\n\n\n<p>Using the <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/merge-component-manager\/\" target=\"_blank\" rel=\"noreferrer noopener\">Merge Component Manager<\/a> (MCM), you can import each component and its associated properties (defined as React props in the design system package).<\/p>\n\n\n\n<p>Design teams can scale the design system using <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Patterns<\/a>, 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-uxpin-merge-npm-integration-resources\">UXPin Merge &amp; npm integration Resources<\/h2>\n\n\n\n<p>Here are some more resources to get you started with component-driven prototyping in UXPin.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-patterns-how-to\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Use UXPin Merge Patterns? A Quick Tutorial<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/integrate-with-ant-design-npm\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Import Ant Design to UXPin?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Import Bootstrap to UXPin?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Import MUI to UXPin?<\/a><\/li>\n<\/ul>\n\n\n\n<p>Still wondering if Merge and the npm integration are right for your design projects? Check what you need to know about it.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\/npm-integration\" target=\"_blank\" rel=\"noopener\">Try npm integration<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Merge&#8217;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&#8217;re unsure what any of this &#8220;npm stuff&#8221; means, don&#8217;t worry, this article<\/p>\n","protected":false},"author":3,"featured_media":36718,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,17,442,199],"tags":[],"class_list":["post-36717","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-collaboration-2","category-component-driven-prototyping","category-design-systems"],"yoast_title":"6 Steps to Turn a Design System into an npm Package","yoast_metadesc":"Understand how you can turn a design system into npm and help designers use it in prototyping. Let's make it happen.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.6 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>6 Steps to Turn a Design System into an npm Package<\/title>\n<meta name=\"description\" content=\"Understand how you can turn a design system into npm and help designers use it in prototyping. Let&#039;s make it happen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-turn-design-system-into-npm-package\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Turn Your Design System into an npm Package?\" \/>\n<meta property=\"og:description\" content=\"Understand how you can turn a design system into npm and help designers use it in prototyping. Let&#039;s make it happen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-turn-design-system-into-npm-package\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-29T14:45:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-29T12:05:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/How-to-Turn-Your-Design-System-into-an-NPM-package.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-turn-design-system-into-npm-package\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-turn-design-system-into-npm-package\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"How to Turn Your Design System into an npm Package?\",\"datePublished\":\"2022-09-29T14:45:00+00:00\",\"dateModified\":\"2023-03-29T12:05:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-turn-design-system-into-npm-package\\\/\"},\"wordCount\":1075,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-turn-design-system-into-npm-package\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/How-to-Turn-Your-Design-System-into-an-NPM-package.png\",\"articleSection\":[\"Blog\",\"Collaboration\",\"Component-Driven Prototyping\",\"Design Systems\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-turn-design-system-into-npm-package\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-turn-design-system-into-npm-package\\\/\",\"name\":\"6 Steps to Turn a Design System into an npm Package\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-turn-design-system-into-npm-package\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-turn-design-system-into-npm-package\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/How-to-Turn-Your-Design-System-into-an-NPM-package.png\",\"datePublished\":\"2022-09-29T14:45:00+00:00\",\"dateModified\":\"2023-03-29T12:05:08+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Understand how you can turn a design system into npm and help designers use it in prototyping. Let's make it happen.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-turn-design-system-into-npm-package\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-turn-design-system-into-npm-package\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-turn-design-system-into-npm-package\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/How-to-Turn-Your-Design-System-into-an-NPM-package.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/How-to-Turn-Your-Design-System-into-an-NPM-package.png\",\"width\":1200,\"height\":600,\"caption\":\"How to Turn Your Design System into an NPM package\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-turn-design-system-into-npm-package\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Turn Your Design System into an npm Package?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"6 Steps to Turn a Design System into an npm Package","description":"Understand how you can turn a design system into npm and help designers use it in prototyping. Let's make it happen.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-turn-design-system-into-npm-package\/","og_locale":"en_US","og_type":"article","og_title":"How to Turn Your Design System into an npm Package?","og_description":"Understand how you can turn a design system into npm and help designers use it in prototyping. Let's make it happen.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-turn-design-system-into-npm-package\/","og_site_name":"Studio by UXPin","article_published_time":"2022-09-29T14:45:00+00:00","article_modified_time":"2023-03-29T12:05:08+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/How-to-Turn-Your-Design-System-into-an-NPM-package.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-turn-design-system-into-npm-package\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-turn-design-system-into-npm-package\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"How to Turn Your Design System into an npm Package?","datePublished":"2022-09-29T14:45:00+00:00","dateModified":"2023-03-29T12:05:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-turn-design-system-into-npm-package\/"},"wordCount":1075,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-turn-design-system-into-npm-package\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/How-to-Turn-Your-Design-System-into-an-NPM-package.png","articleSection":["Blog","Collaboration","Component-Driven Prototyping","Design Systems"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-turn-design-system-into-npm-package\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-turn-design-system-into-npm-package\/","name":"6 Steps to Turn a Design System into an npm Package","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-turn-design-system-into-npm-package\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-turn-design-system-into-npm-package\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/How-to-Turn-Your-Design-System-into-an-NPM-package.png","datePublished":"2022-09-29T14:45:00+00:00","dateModified":"2023-03-29T12:05:08+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Understand how you can turn a design system into npm and help designers use it in prototyping. Let's make it happen.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-turn-design-system-into-npm-package\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/how-to-turn-design-system-into-npm-package\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-turn-design-system-into-npm-package\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/How-to-Turn-Your-Design-System-into-an-NPM-package.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/How-to-Turn-Your-Design-System-into-an-NPM-package.png","width":1200,"height":600,"caption":"How to Turn Your Design System into an NPM package"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-turn-design-system-into-npm-package\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How to Turn Your Design System into an npm Package?"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=36717"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36717\/revisions"}],"predecessor-version":[{"id":44028,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36717\/revisions\/44028"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/36718"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=36717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=36717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=36717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}