{"id":37128,"date":"2023-08-24T04:22:49","date_gmt":"2023-08-24T11:22:49","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=37128"},"modified":"2024-05-20T21:47:41","modified_gmt":"2024-05-21T04:47:41","slug":"top-npm-packages-to-design-with","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/top-npm-packages-to-design-with\/","title":{"rendered":"Top 6 npm Packages for Component-Driven Prototyping"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/bgv3fiuUbUfC9WuLbCjv5SUjgfu9FesDSVOXRMpUIQK_U9tCYa1hZFtvqT3eQl62lNesEZs2QsULbRlYzYfsSERHwG9uzGEEVuSJqS0tUj-Nkc2tgN8c2TMFY73qZXK9t3bQQxgem0c0zDoklNbr-5QZXQMEhv6Q6Z5GIsWp-cZeKEMtTgjdr9tgxw\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\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> with <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a> allows designers to build accurate replicas of the final product. Unlike other design tools that render static graphics, UXPin is powered by code so that designers can create high-fidelity, fully functioning prototypes.<\/p>\n\n\n\n<p>UXPin&#8217;s npm integration gives designers the freedom to import components and patterns from open-source design systems. They may need a single UI element to create a new pattern for an existing design system or use the <a href=\"https:\/\/www.uxpin.com\/merge\/npm-integration\" target=\"_blank\" rel=\"noreferrer noopener\">npm integration<\/a> to build a fully functioning MVP during a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-sprints\/\" target=\"_blank\" rel=\"noreferrer noopener\">design sprint<\/a>.<\/p>\n\n\n\n<p>Discover how UXPin Merge can help you build interfaces with React components from npm. <a href=\"https:\/\/www.uxpin.com\/merge\/developers\">Discover UXPin Merge<\/a>.<\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <h3 class=\"discover-merge__heading\">Design UI with code-backed components.<\/h3>\n            <p class=\"discover-merge__text\">Use the same components in design as in development. Keep UI consistency at scale.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Try 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-about-prototyping-with-npm-components\">About Prototyping with npm Components<\/h2>\n\n\n\n<p>Before we dive into UXPin&#8217;s npm integration and the packages you can import for prototyping, it&#8217;s important to understand Merge\u2013the technology that makes component-driven prototyping with npm libraries possible.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Merge<\/a> enables companies to sync a design system hosted in a repository to UXPin&#8217;s design editor so designers can build prototypes using the same component library as engineers.<\/p>\n\n\n\n<p>These &#8220;ready-made&#8221; UI elements include properties and interactivity defined by the design system&#8217;s code. A component in Merge looks and functions the same as the final product because it&#8217;s an exact replica.<\/p>\n\n\n\n<p>Designers use Merge components like building blocks, dragging and dropping to build new UIs, and fully functioning prototypes. They can also use <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-patterns-how-to\/\" target=\"_blank\" rel=\"noreferrer noopener\">Patterns<\/a> to combine UI elements and build new components.<\/p>\n\n\n\n<p>Merge&#8217;s strongest feature is its ability to sync design and development, creating a genuine single source of truth across the organization via the design system&#8217;s repository. Any changes to the repo automatically sync to UXPin, notifying product teams of the change.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-1-ant-design\">1. Ant Design<\/h2>\n\n\n\n<p><a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ant Design<\/a> is an open-source design system developed and maintained by the Chinese tech giant <a href=\"https:\/\/www.antgroup.com\/en\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ant Group<\/a>. The component library is available for React, Angular, and Vue and includes <a href=\"https:\/\/mobile.ant.design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ant Design Mobile<\/a> for building cross-platform and mobile applications.<\/p>\n\n\n\n<p>Ant Design is a fantastic &#8220;all-rounder&#8221; with components for B2C products, enterprise applications, websites, and cross-platform apps. The design system also features an icon set, dark mode, animations, and interactivity.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-importing-the-ant-design-npm-package\">Importing the Ant Design npm Package<\/h3>\n\n\n\n<p>Ant Design npm integration Library settings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Library name:<\/strong> Ant Design NPM \u2013 The Library name has no impact on the import<\/li>\n\n\n\n<li><strong>Package details:<\/strong> antd \u2013 must correspond to the <a href=\"https:\/\/www.npmjs.com\/package\/antd\" target=\"_blank\" rel=\"noreferrer noopener\">Ant Design npm registry<\/a><\/li>\n\n\n\n<li><strong>Assets location:<\/strong> antd\/dist\/antd.css \u2013 required for styling Ant Design React props<\/li>\n<\/ul>\n\n\n\n<p>Leave everything else as default and click Save Changes.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/xBDr_4htnZ_41nTK7NZlFtLMgyHMOXVPW50r7QE8qAqEYha_T0wW4fcOfwmcE0TyA3KfHHwCy7HRsrr8BWxMjfrFXqSM6StiqcqGBmenS1mXtavv1jgiDVxy_Dk0mBZSjGzFcQs45OxmXW3QxRDDtUXzqpGcGuS_5-SD2J43irPytuQzOPJVLyjpYQ\" alt=\"\" style=\"width:650px\" width=\"650\"\/><\/figure>\n\n\n\n<p><strong>Further reading:<\/strong> Check out this <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/integrate-with-ant-design-npm\/\" target=\"_blank\" rel=\"noreferrer noopener\">step-by-step guide for importing Ant Design components via the UXPin npm integration<\/a>.<\/p>\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-2-bootstrap\">2. Bootstrap<\/h2>\n\n\n\n<p><a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap<\/a> is one of the oldest and largest responsive front-end frameworks. Engineers often use Bootstrap for basic CSS styling and Javascript functionality when building website and web application prototypes.<\/p>\n\n\n\n<p>UXPin&#8217;s npm integration uses the <a href=\"https:\/\/react-bootstrap.github.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">React Boostrap<\/a>, which includes the same out-of-the-box features and functionality as the original Bootstrap. We recommend React Bootstrap for prototyping responsive websites and web applications.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-importing-the-react-bootstrap-npm-package\">Importing the React Bootstrap npm Package<\/h3>\n\n\n\n<p>React Bootstrap npm integration Library settings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Library name:<\/strong> Bootstrap NPM Integration \u2013 The Library name has no impact on the import<\/li>\n\n\n\n<li><strong>Package details:<\/strong> react-bootstrap \u2013 must correspond to the <a href=\"https:\/\/www.npmjs.com\/package\/react-bootstrap\" target=\"_blank\" rel=\"noreferrer noopener\">React Bootstrap npm registry<\/a><\/li>\n\n\n\n<li><strong>Dependency package name:<\/strong> bootstrap \u2013 React Boostrap requires the <a href=\"https:\/\/www.npmjs.com\/package\/bootstrap\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap dependency<\/a> to work in UXPin<\/li>\n\n\n\n<li><strong>Assets location:<\/strong> bootstrap\/dist\/css\/bootstrap.min.css \u2013 required for styling React Boostrap props<\/li>\n<\/ul>\n\n\n\n<p>Leave everything else as default and click Save Changes.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/45DmvoXFSUa2S8mFUu-X-_TH6B_WSGQknJ57LOq3K9qogZ5qy4rhUZJnOIPdR6OS7aIdBJt6K2kSJp03u6pM5FB4J2rsyI5GppC4bjUeJ_TpfMOmDXyn_82s_PPui1SniRkLZWS2bqJ3Lj1123EiNLQ80BwNx29m7qtugOQnvc7RswTFxQ7ADF07MA\" alt=\"\" style=\"width:650px\" width=\"650\"\/><\/figure>\n\n\n\n<p><strong>Further reading:<\/strong> Check out this <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">step-by-step guide for importing React Bootstrap components via the UXPin npm integration<\/a>.<\/p>\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-3-mui\">3. MUI<\/h2>\n\n\n\n<p><a href=\"https:\/\/mui.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">MUI<\/a> is a React library built based on <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/an-introduction-to-interactions-with-material-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google&#8217;s Material Design UI<\/a>. The comprehensive design system features everything you need to develop an array of digital products, plus more than 2,000 <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/\" target=\"_blank\" rel=\"noreferrer noopener\">Material Design Icons<\/a>.<\/p>\n\n\n\n<p>Due to its comprehensive component library, MUI is a popular choice for enterprise products, cross-platform applications, and MVPs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-importing-the-mui-npm-package\">Importing the MUI npm Package<\/h3>\n\n\n\n<p>MUI npm integration Library settings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Library name:<\/strong> MUI NPM \u2013 The Library name has no impact on the import<\/li>\n\n\n\n<li><strong>Package details:<\/strong> @mui\/material \u2013 must correspond to the <a href=\"https:\/\/www.npmjs.com\/package\/@mui\/material\" target=\"_blank\" rel=\"noreferrer noopener\">MUI npm registry<\/a><\/li>\n<\/ul>\n\n\n\n<p>Unlike React Boostrap and Ant Design, MUI doesn&#8217;t require dependencies or assets to work in UXPin. Leave everything else as default and click Save Changes.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/WsO7mhM94XSJ5phJ95r4ORK_1J4YsZIIzQvQ5gICrn6TYajrQQ0Hc40gtoyN0ZKXO6Ioip3h1rvBpo54veDzc8f27HNprXJ992yP0go7ESy0filOa-SMowx2idbvkfWiDs4PxnrL0DzH2wBwLMXKHOHBX2plUgnUI2G9JwB_RS3Zy7aeH0Tv_f18Uw\" alt=\"\" style=\"width:650px\" width=\"650\"\/><\/figure>\n\n\n\n<p><strong>Further reading:<\/strong> Check out this <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">step-by-step guide for importing MUI components via the UXPin npm integration<\/a>.<\/p>\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-4-semantic-ui\">4. Semantic UI<\/h2>\n\n\n\n<p><a href=\"https:\/\/semantic-ui.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Semantic UI<\/a> is an excellent alternative to Bootstrap. The Semantic UI React framework has a more modern aesthetic, simple features, and highly customizable components. Semantic UI includes <a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">FontAwesome<\/a> built-in\u2013the most extensive icon library in the world.<\/p>\n\n\n\n<p>Like Bootstrap, Semantic UI is best for prototyping websites and web applications.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-importing-the-semantic-ui-react-npm-package\">Importing the Semantic UI React npm Package<\/h3>\n\n\n\n<p>Semantic UI React npm integration Library settings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Library name:<\/strong> Semantic UI \u2013 The Library name has no impact on the import<\/li>\n\n\n\n<li><strong>Package details:<\/strong> semantic-ui-react \u2013 must correspond to the <a href=\"https:\/\/www.npmjs.com\/package\/semantic-ui-react\" target=\"_blank\" rel=\"noreferrer noopener\">Semantic UI React npm registry<\/a><\/li>\n\n\n\n<li><strong>Dependency package name:<\/strong> semantic-ui-css \u2013 Semantic UI React requires the <a href=\"https:\/\/www.npmjs.com\/package\/semantic-ui-css\" target=\"_blank\" rel=\"noreferrer noopener\">Semantic UI CSS dependency<\/a> to work in UXPin<\/li>\n\n\n\n<li><strong>Assets location:<\/strong> https:\/\/cdn.jsdelivr.net\/npm\/semantic-ui@2\/dist\/semantic.min.css \u2013 required for styling Semantic UI React props<\/li>\n<\/ul>\n\n\n\n<p>Leave everything else as default and click Save Changes.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/vgEaHPpx1A3XibxL4Z12hGgiQXM3_YMpxDLJuHJzm6Ro1LpnSPMoPe0LQQ6XhJ1kswrIfu0F6NC_OHFkyDvxbQV_H1eb2J8o3U_SIyZokEA-BEg7tlVayk3xMIXeIgFb61ugcFNMGTWTHY6AMVPgNvUwPMb--26y5D5SFISi2qRk5eOoH_Py46_9yw\" alt=\"\" style=\"width:650px\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Further reading:<\/strong> The Library settings are similar to React Bootstrap. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">Follow the Bootstrap tutorial<\/a> for a step-by-step guide, and use the <a href=\"https:\/\/react.semantic-ui.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Semantic UI React docs<\/a> to replace library and component settings accordingly.<\/p>\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-5-carbon-design-system\">5. Carbon Design System<\/h2>\n\n\n\n<p><a href=\"https:\/\/carbondesignsystem.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Carbon<\/a> is a design system developed and maintained by IBM with React, Angular, and Vue versions. The simple yet comprehensive design system includes a large component and <a href=\"https:\/\/carbondesignsystem.com\/patterns\/overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">pattern library<\/a>, an <a href=\"https:\/\/carbondesignsystem.com\/guidelines\/icons\/library\/\" target=\"_blank\" rel=\"noreferrer noopener\">icon set<\/a>, <a href=\"https:\/\/carbondesignsystem.com\/guidelines\/pictograms\/library\/\" target=\"_blank\" rel=\"noreferrer noopener\">pictograms<\/a>, <a href=\"https:\/\/carbondesignsystem.com\/guidelines\/motion\/overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">motion<\/a>, and <a href=\"https:\/\/carbondesignsystem.com\/guidelines\/themes\/overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">instructions for theming<\/a>.<\/p>\n\n\n\n<p>Carbon is an excellent design system for B2B and enterprise product design. <a href=\"https:\/\/carbondesignsystem.com\/data-visualization\/getting-started\/\" target=\"_blank\" rel=\"noreferrer noopener\">Carbon&#8217;s data visualization documentation<\/a> makes it the perfect choice for product teams developing dashboard and report user interfaces.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-importing-the-carbon-design-system-npm-package\">Importing the Carbon Design System npm Package<\/h3>\n\n\n\n<p>Carbon Design System React npm integration Library settings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Library name:<\/strong> Carbon NPM \u2013 The Library name has no impact on the import<\/li>\n\n\n\n<li><strong>Package details:<\/strong> @carbon\/react \u2013 must correspond to the <a href=\"https:\/\/www.npmjs.com\/package\/carbon-react\" target=\"_blank\" rel=\"noreferrer noopener\">Carbon Design System npm registry<\/a><\/li>\n\n\n\n<li><strong>Assets location:<\/strong> https:\/\/unpkg.com\/carbon-components\/css\/carbon-components.css \u2013 required for styling Carbon Design System&#8217;s React props<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/Carbon-npm-package.png\" alt=\"Carbon npm package\" class=\"wp-image-37131\" style=\"width:248px;height:378px\" width=\"248\" height=\"378\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/Carbon-npm-package.png 496w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/Carbon-npm-package-197x300.png 197w\" sizes=\"auto, (max-width: 248px) 100vw, 248px\" \/><\/figure>\n\n\n\n<p>Leave everything else as default and click Save Changes.<\/p>\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-6-grommet\">6. Grommet<\/h2>\n\n\n\n<p>Grommet is a React-based framework that is great for building <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/a-hands-on-guide-to-mobile-first-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">mobile-first prototypes<\/a> that are accessible and responsive. Used by Netflix, Uber, Hewlett Packard, this design system is easily themable and you should definitely give it a shot.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-importing-the-grommet-npm-package\">Importing the Grommet npm Package<\/h3>\n\n\n\n<p>Grommet npm integration Library settings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Library name:<\/strong> Grommet NPM <\/li>\n\n\n\n<li><strong>Package details:<\/strong> grommet \u2013 must correspond to the <a href=\"https:\/\/www.npmjs.com\/package\/grommet\" target=\"_blank\" rel=\"noreferrer noopener\">Grommet npm registry<\/a><\/li>\n\n\n\n<li><strong>Assets location:<\/strong> https:\/\/v2.grommet.io\/components<\/li>\n<\/ul>\n\n\n\n<p>Leave everything else as default and click Save Changes.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>When we add that Semantic UI button to the canvas and select it, those same properties appear in UXPin&#8217;s Properties Panel. We can adjust these properties to change the button&#8217;s styling instantly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-import-npm-components-to-uxpin\">How to Import npm Components to UXPin<\/h2>\n\n\n\n<p> <a href=\"https:\/\/www.uxpin.com\/merge\/npm-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Merge npm integration<\/a> gives design teams the control and flexibility they needed to import and manage React components in UXPin without engineering support.<\/p>\n\n\n\n<p>Using the Merge Component Manager (MCM), designers can <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/introducing-npm-integration\/\" target=\"_blank\" rel=\"noreferrer noopener\">import individual components and their properties<\/a> via the library&#8217;s <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/\">npm package<\/a>. There&#8217;s no code required, and setup takes a few minutes.<\/p>\n\n\n\n<p>Designers can use these open-source components to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-patterns-how-to\/\" target=\"_blank\" rel=\"noreferrer noopener\">build new patterns<\/a> for an existing design system or create a minimum viable product (MVP) using fully functioning UI elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-using-merge-component-manager-mcm\">Using Merge Component Manager (MCM)<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/docs\/merge\/merge-component-manager\/\" target=\"_blank\" rel=\"noreferrer noopener\">Merge Component Manager (MCM)<\/a> is where designers manage npm imported component libraries.<\/p>\n\n\n\n<p>You must follow the library&#8217;s documentation and naming conventions when importing components, or the import won&#8217;t work. UXPin&#8217;s npm integration must find a component and its properties using the repository&#8217;s naming convention, so if you reference the React props incorrectly, MCM can&#8217;t locate it.<\/p>\n\n\n\n<p>We&#8217;ll use a <a href=\"https:\/\/react.semantic-ui.com\/elements\/button\/\" target=\"_blank\" rel=\"noreferrer noopener\">Semantic UI button<\/a> to illustrate how to reference React props when importing components. You&#8217;ll find these React props in the design system&#8217;s documentation.<\/p>\n\n\n\n<p>When importing a component&#8217;s property, the <em>Property name<\/em> in MCM must match the React prop name from the documentation.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/hk2ItXM2tHJ6LULvAedDaoF55--ZydeKKMelS2rFv3zNt4CGpcHkv7fFrS49uMFnp57UVwVekuJEiV-KvaeL7TnZWyDWNhU9h34IoVdpQuhIANUdCTTwczpwCUW8ZPkcluX7KrEl3a5DV57qhG44-1wmgaoZBa_IlIDCJ5OPfHoHVkkvftoYeVVtDQ\" alt=\"\" style=\"width:650px\" width=\"650\"\/><\/figure>\n\n\n\n<p>In this case, we&#8217;re importing the <em>children<\/em> prop, which gives a Semantic UI button its label.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/kx0-LgRUbqAibdD09GVS5SqLwoloH7fmOs-5pgPiKKpQHrcTQEPnFOpqA91NW47-6H5SXfeV8D0WTS6oO0P6eW1NsQL1BXZUNoXSHiGqK2Ozz8W6BoPw8Jap7ME2D7xtupCn6elNcmdlsyl_P1qLuCsUaoWilrX1L9wG98EnwZJfmsCjAEnKg4x_8Q\" alt=\"\" style=\"width:650px\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>The Display name is what designers will see in <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interface\/#properties-panel\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s Properties Panel<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/H7dMUDomsCSOE3yNrYfzo8tRLAFPe8zE6FI8mOkZIaconNknqsVwXBz4xAVBkbVL8Zk--Hf2ZLDhYGmB6rUzFcBu_tZxV-PL3c3OLLPyEqssqoTz_uma2aOJJ_jOfRt8QP8R7H60zLieqoJEmjST8w1AP7IEwrtzA88OwFGerkfLBBS_svrmIcI4FQ\" alt=\"\" style=\"width:650px\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>We&#8217;ve imported children, circular, color inverted, secondary, size, and type, which you can see in this screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/DbXxURqbhbFL08YpS0KJpkUIDibklDXPC5q5_b7sYFMa15Lv6PhwDEYCtuFrOPrwrG6VIKdp97CN66Vk5tG9XKX5GQU76tazguYtWPmhqpRi5GMLiqdtb6jcugYQRFRFGegZ0QsZT70dyDiGSjP-V4uQ0Sw6ohsg8jmhvr-MawBtd4YvAKjMTA4VqA\" alt=\"\" style=\"width:650px\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Those MCM Property names correspond to Semantic UI\u2019s documentation which you see in the two following screenshots.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/nZ2XWpYJKgyL4cpqmolbpOehp8WBWOOAC-PPWMocPtzUx3lW2xIw7gpHIO8Gf91mXUH7dBrRHJ9eFjLu1qUPOMnEqRkba35wmLYnEoaHIb6YVqU6J6VUh28bFpojadTvVAQilg3H2__5rtT6V23AcvnoOyQHuynBl5_C2uyYty9l_IeeW6bQ1LqrFA\" alt=\"\" style=\"width:650px\" width=\"650\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/4j9-HRhcfP4_YaW8akvCvqFPyHbXZg9bfM0DxchywzAmiXiys7jcq7ABdAXeM5_y6sYEJSsn6c1-fzQHDxQ2PLeNkfTzYcDeZfgLj_5lvXYxboghkW36CBtn-YlmnBffCU1FAtwISzweBRdQ5rmmcazzNuO9eIbsTLSoJPKe1ikFgpVqXZZytbXSFQ\" alt=\"\" style=\"width:650px\" width=\"650\"\/><\/figure>\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-rules-for-choosing-an-npm-components\">Rules for Choosing an npm Components<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>It&#8217;s important to note that designers can only use the npm integration to import design systems with React component libraries, and it must have an <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/\" target=\"_blank\" rel=\"noreferrer noopener\">npm package<\/a>.<\/li>\n\n\n\n<li>The design system must serve your product&#8217;s needs. Are you designing a B2B product? Are you prototyping a web, mobile, or cross-platform application? Do you want to complement an existing design system or build something from scratch? For example, if you&#8217;re building a website or web application, Bootstrap or Semantic UI are excellent choices, whereas Ant Design is probably better for mobile and cross-platform digital products.<\/li>\n\n\n\n<li>It&#8217;s worthwhile researching open-source design systems to ensure the library has the UI elements you need. The library must also have documentation with setup instructions and a list of the available <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/parsing-props-for-merge-controls\/\" target=\"_blank\" rel=\"noreferrer noopener\">React props<\/a>. These props will allow you to change a component&#8217;s properties like color, shape, interactivity, size, icon, etc.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Design with npm Components in UXPin<\/h2>\n\n\n\n<p>Here we outlined 6 npm component libraries that you can try with UXPin Merge. Ready to start prototyping with one of these design systems? Try npm integration to test those packages and experience what component-driven prototyping can give you. <a href=\"https:\/\/www.uxpin.com\/merge\/developers\" target=\"_blank\" rel=\"noreferrer noopener\">Discover UXPin Merge<\/a>.<\/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>Component-driven prototyping with UXPin Merge allows designers to build accurate replicas of the final product. Unlike other design tools that render static graphics, UXPin is powered by code so that designers can create high-fidelity, fully functioning prototypes. UXPin&#8217;s npm integration gives designers the freedom to import components and patterns from open-source design systems. They may<\/p>\n","protected":false},"author":3,"featured_media":37133,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,442,441,440],"tags":[],"class_list":["post-37128","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-component-driven-prototyping","category-front-end","category-merge"],"yoast_title":"Top 6 npm Packages to Use with UXPin Merge","yoast_metadesc":"Try top 6 npm packages to use with UXPin Merge and get on component-driven prototyping bandwagon. Drive efficiency between design and code.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Top 6 npm Packages to Use with UXPin Merge<\/title>\n<meta name=\"description\" content=\"Try top 6 npm packages to use with UXPin Merge and get on component-driven prototyping bandwagon. Drive efficiency between design and code.\" \/>\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\/top-npm-packages-to-design-with\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Top 6 npm Packages for Component-Driven Prototyping\" \/>\n<meta property=\"og:description\" content=\"Try top 6 npm packages to use with UXPin Merge and get on component-driven prototyping bandwagon. Drive efficiency between design and code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/top-npm-packages-to-design-with\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-24T11:22:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-21T04:47:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/Top-npm-packages-with.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=\"28 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\\\/top-npm-packages-to-design-with\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-npm-packages-to-design-with\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Top 6 npm Packages for Component-Driven Prototyping\",\"datePublished\":\"2023-08-24T11:22:49+00:00\",\"dateModified\":\"2024-05-21T04:47:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-npm-packages-to-design-with\\\/\"},\"wordCount\":1602,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-npm-packages-to-design-with\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/Top-npm-packages-with.png\",\"articleSection\":[\"Blog\",\"Component-Driven Prototyping\",\"Front-End\",\"Merge by UXPin\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-npm-packages-to-design-with\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-npm-packages-to-design-with\\\/\",\"name\":\"Top 6 npm Packages to Use with UXPin Merge\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-npm-packages-to-design-with\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-npm-packages-to-design-with\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/Top-npm-packages-with.png\",\"datePublished\":\"2023-08-24T11:22:49+00:00\",\"dateModified\":\"2024-05-21T04:47:41+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Try top 6 npm packages to use with UXPin Merge and get on component-driven prototyping bandwagon. Drive efficiency between design and code.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-npm-packages-to-design-with\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-npm-packages-to-design-with\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-npm-packages-to-design-with\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/Top-npm-packages-with.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/Top-npm-packages-with.png\",\"width\":1200,\"height\":600,\"caption\":\"Top npm packages with\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-npm-packages-to-design-with\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Top 6 npm Packages for Component-Driven Prototyping\"}]},{\"@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":"Top 6 npm Packages to Use with UXPin Merge","description":"Try top 6 npm packages to use with UXPin Merge and get on component-driven prototyping bandwagon. Drive efficiency between design and code.","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\/top-npm-packages-to-design-with\/","og_locale":"en_US","og_type":"article","og_title":"Top 6 npm Packages for Component-Driven Prototyping","og_description":"Try top 6 npm packages to use with UXPin Merge and get on component-driven prototyping bandwagon. Drive efficiency between design and code.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/top-npm-packages-to-design-with\/","og_site_name":"Studio by UXPin","article_published_time":"2023-08-24T11:22:49+00:00","article_modified_time":"2024-05-21T04:47:41+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/Top-npm-packages-with.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"28 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-npm-packages-to-design-with\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-npm-packages-to-design-with\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Top 6 npm Packages for Component-Driven Prototyping","datePublished":"2023-08-24T11:22:49+00:00","dateModified":"2024-05-21T04:47:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-npm-packages-to-design-with\/"},"wordCount":1602,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-npm-packages-to-design-with\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/Top-npm-packages-with.png","articleSection":["Blog","Component-Driven Prototyping","Front-End","Merge by UXPin"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-npm-packages-to-design-with\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/top-npm-packages-to-design-with\/","name":"Top 6 npm Packages to Use with UXPin Merge","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-npm-packages-to-design-with\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-npm-packages-to-design-with\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/Top-npm-packages-with.png","datePublished":"2023-08-24T11:22:49+00:00","dateModified":"2024-05-21T04:47:41+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Try top 6 npm packages to use with UXPin Merge and get on component-driven prototyping bandwagon. Drive efficiency between design and code.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-npm-packages-to-design-with\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/top-npm-packages-to-design-with\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-npm-packages-to-design-with\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/Top-npm-packages-with.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/Top-npm-packages-with.png","width":1200,"height":600,"caption":"Top npm packages with"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-npm-packages-to-design-with\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Top 6 npm Packages for Component-Driven Prototyping"}]},{"@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\/37128","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=37128"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/37128\/revisions"}],"predecessor-version":[{"id":53110,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/37128\/revisions\/53110"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/37133"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=37128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=37128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=37128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}