{"id":48452,"date":"2023-06-28T05:37:31","date_gmt":"2023-06-28T12:37:31","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=48452"},"modified":"2023-07-10T06:36:04","modified_gmt":"2023-07-10T13:36:04","slug":"how-to-scale-design-system-in-uxpin","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-scale-design-system-in-uxpin\/","title":{"rendered":"How to Scale Design Systems with UXPin \u2013 A Practical Guide"},"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\/2023\/06\/image1-min-1024x512.png\" alt=\"image1 min\" class=\"wp-image-48453\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image1-min-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image1-min-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image1-min-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image1-min.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>A design system serves as a single source of truth, grouping all elements that allow teams to design, prototype, test, and develop a product. This system includes pattern libraries, coded component libraries, code samples, APIs, and documentation.&nbsp;<\/p>\n\n\n\n<p>Organizations use the four-level <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-maturity-how-to-improve-your-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system maturity<\/a> scale to gauge the evolution of design systems.&nbsp;<\/p>\n\n\n\n<p>The ultimate goal for many organizations is to attain Level 4 maturity in a design system, a stage characterized by fully integrating coded components into the design process.<\/p>\n\n\n\n<p>However, most linger indefinitely at level three because they lack the tools, systems, knowledge, and resources to achieve level-four maturity.<\/p>\n\n\n\n<p>UXPin Merge aims to simplify design system maturity by translating coded UI components into visual elements designers can use in the design process, thus bridging the gap between design and development.<\/p>\n\n\n\n<p>Transform your design workflow with UXPin Merge and embrace the future of component-driven prototyping. Achieve level four design system maturity faster and with fewer resources. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page<\/a>.<\/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-the-design-system-maturity-scale\">The Design System Maturity Scale<\/h2>\n\n\n\n<p>Design System Product Owner and Regional Head of Product Design at Iress, Nick Elliot, got the inspiration for this <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/iress-design-tool-review\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system maturity scale<\/a> from TJ Harrop, Design System Product Manager at the NSW Government.<\/p>\n\n\n\n<p>UXPin offers tools and features to support organizations at every level of maturity. The comprehensive toolset also enables organizations to accelerate progress toward level four.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-uxpin-for-levels-1-and-2\">UXPin for levels 1 and 2<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"741\" height=\"428\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/ds-maturity-1-2.png\" alt=\"ds maturity 1 2\" class=\"wp-image-48583\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/ds-maturity-1-2.png 741w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/ds-maturity-1-2-519x300.png 519w\" sizes=\"auto, (max-width: 741px) 100vw, 741px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Level 1<\/strong>: The organization doesn&#8217;t have a design system but might have common assets defined and some documentation.<\/li>\n\n\n\n<li><strong>Level 2<\/strong>: The organization has design components and can provide HTML and CSS guidelines. These are not yet coded components but patterns that require development.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-uxpin-merge-for-levels-3-and-4\">UXPin Merge for levels 3 and 4<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"740\" height=\"428\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/ds-maturity-3-4.png\" alt=\"ds maturity 3 4\" class=\"wp-image-48586\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/ds-maturity-3-4.png 740w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/ds-maturity-3-4-519x300.png 519w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Level 3<\/strong>: The organization has two libraries with design and development still operating in separate silos:\n<ul class=\"wp-block-list\">\n<li>A <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-component-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">code component library<\/a> for developers<\/li>\n\n\n\n<li>Design pattern libraries for designers<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Level 4<\/strong>: The organization has a fully integrated system with a single source of truth where designers and engineers use the same design system components and documentation. There is no design drift and no coding or interpretation required to build interfaces.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-scaling-a-design-system-from-levels-1-to-3-in-uxpin\">Scaling a Design System from Levels 1 to 3 in UXPin<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-navigating-the-platform\">Navigating the platform<\/h3>\n\n\n\n<p>UXPin is a code-based, full-stack UX\/UI design platform that removes constraints in collaboration between designers and developers. UXPin covers the entire UX process from ideation to handoff, including high-fidelity prototyping.<\/p>\n\n\n\n<p>Designers can access UXPin&#8217;s Design Libraries without leaving the canvas, which includes colors (tokens), text styles, assets (icons and logos), and design elements (components).<\/p>\n\n\n\n<p>Documentation is a crucial aspect of design systems, but it&#8217;s challenging to create and maintain. UXPin automatically generates documentation for each library, including colors, typography elements, assets, and pattern libraries. Designers can edit these pages and add information, such as use cases and tips for each component&#8217;s usage.<\/p>\n\n\n\n<p>UXPin also includes a component spec tool, allowing devs to explore its properties and grab CSS. This tool is essential for developers who need guidance on recreating patterns in code.<\/p>\n\n\n\n<p>This inspection tool is essential for maturity levels one and two or when teams release new elements and patterns, as it enables developers to convert design mockups into functioning components for the UI library.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-building-the-design-system-s-foundation-in-uxpin-levels-one-and-two\">Building the design system&#8217;s foundation in UXPin \u2013 levels one and two<\/h4>\n\n\n\n<p>Designers can create components from scratch using UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/elements\/#forms\" target=\"_blank\" rel=\"noreferrer noopener\">Forms<\/a>, <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/elements\/#shapes\" target=\"_blank\" rel=\"noreferrer noopener\">Shapes<\/a>, <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/elements\/#text\" target=\"_blank\" rel=\"noreferrer noopener\">Text<\/a>, and <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/elements\/#box\" target=\"_blank\" rel=\"noreferrer noopener\">Box<\/a> tools as a foundation. They can also edit master components in isolation, including adding interactions.<\/p>\n\n\n\n<p>Unlike image-based tools, designers don&#8217;t need to create multiple frames or duplicate elements to add component interactivity in UXPin. For example, they can design several button states, like default, hover, active, disabled, etc., simply by editing the master component&#8217;s interactions and properties to change based on user or system actions.<\/p>\n\n\n\n<p>UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/documentation\" target=\"_blank\" rel=\"noreferrer noopener\">Documentation<\/a> provides space for the design system team to add code examples beside visual components, including CSS, Handlebars, HTML, Javascript, JSX, Ruby, and PHP, to name a few.<\/p>\n\n\n\n<p>These features allow design teams to navigate levels one and two, giving them a complete pattern library with documentation in UXPin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-level-three-maturity\">Level three maturity<\/h3>\n\n\n\n<p>Once the pattern library is complete and devs have successfully converted the components to code, the organization is at <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-maturity-how-to-improve-your-design-system\/#h-stage-three-design-coded-components\" target=\"_blank\" rel=\"noreferrer noopener\">level three maturity<\/a>.<\/p>\n\n\n\n<p>Many organizations refer to this level as a single source of truth, but there are, in fact, two libraries and two sets of documentation to update and maintain.<\/p>\n\n\n\n<p>While level three is significantly better than level two, there are many DesignOps challenges when maintaining and updating separate libraries:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Double the time and resources<\/li>\n\n\n\n<li>The necessity for many tools in the design process\u2013i.e., a design tool, prototyping tool, documentation, etc.<\/li>\n\n\n\n<li>Slow updates due to managing releases for multiple platforms<\/li>\n\n\n\n<li>Errors and inconsistencies<\/li>\n\n\n\n<li>Teams working with out-of-date design system versions<\/li>\n\n\n\n<li>Design and engineers speak different languages<\/li>\n\n\n\n<li>Lack of fidelity and interactivity for prototyping in the design process<\/li>\n<\/ul>\n\n\n\n<p>Another challenge with level three is that the code is often not production ready. Some organizations have design system repositories, but many at this level rely on guidance code from documentation. The development process is open to errors and inconsistencies without a coded component library hosted in a single repository.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-fully-integrated-level-four-maturity\">Fully Integrated \u2013 Level Four Maturity<\/h2>\n\n\n\n<p>At level four, designers use code components in the design process, pulled from the same repository developers use to build the final product. In UXPin, this <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-component-driven-prototyping\/\" target=\"_blank\" rel=\"noreferrer noopener\">component-driven prototyping<\/a> methodology is made possible by Merge technology.<\/p>\n\n\n\n<p>Merge fetches UI components from a repository and renders them in UXPin for design teams to build prototypes. The benefits of this workflow include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>High fidelity and pixel-perfect parity<\/li>\n\n\n\n<li>Consistent user experience<\/li>\n\n\n\n<li>Faster design and development<\/li>\n\n\n\n<li>Code reuse<\/li>\n\n\n\n<li>Simplified governance<\/li>\n\n\n\n<li>Harmony between designers and developers<\/li>\n\n\n\n<li>A <strong><em>real<\/em><\/strong> single source of truth<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-merge-integrations\">Merge Integrations<\/h3>\n\n\n\n<p>Organizations have three primary methods for importing components:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.uxpin.com\/merge\/git-integration\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Git Integration<\/strong><\/a><strong>:<\/strong> access to Merge&#8217;s complete feature set, including <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/patterns\" target=\"_blank\" rel=\"noreferrer noopener\">Patterns<\/a>, <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/version-control\/\" target=\"_blank\" rel=\"noreferrer noopener\">Version Control<\/a>, and <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/authoring-and-managing-jsx-presets\/#basic-information\" target=\"_blank\" rel=\"noreferrer noopener\">JSX presets<\/a>\u2013<em>only available for React libraries<\/em>.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\"><strong>Storybook Integration<\/strong><\/a><strong>:<\/strong> connect any <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Storybook<\/a> to UXPin, including Vue, React, Angular, Web Components, <a href=\"https:\/\/storybook.js.org\/docs\/react\/get-started\/install\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">and more<\/a>.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/merge\/npm-integration\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>npm integration<\/strong><\/a><strong>:<\/strong> import components from open-source libraries through the <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/merge-component-manager\/\" target=\"_blank\" rel=\"noreferrer noopener\">Merge Component Manager<\/a>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bridging-the-gap\">Bridging the gap<\/h3>\n\n\n\n<p>Traditional design software provides prototypes, assets, documentation, and redlining, but this doesn&#8217;t fully bridge the gap. The prototypes are mid-fidelity at best and require translation and assumptions, which can lead to product drift and increased costs.<\/p>\n\n\n\n<p>Level 4 bridges the design development gap with coded components from a repository, serving as a single source of truth. Developers leverage these components in code, while UXPin Merge translates the code and integrates the components with its toolset.<\/p>\n\n\n\n<p>Using Merge results in high-fidelity prototypes that are fully functional and testable without assumptions. It ensures pixel-perfect parity between design and development, faster design processes, code reuse, and ultimately higher profits. It also leads to better collaboration and understanding between designers and developers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-understanding-merge-s-capabilities\">Understanding Merge&#8217;s Capabilities<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-component-properties\">Component properties<\/h3>\n\n\n\n<p>Components imported into UXPin through Merge are driven by properties defined in the design system&#8217;s repository. These properties are the same as those used by developers. For example, a button component can have label, color, and variant properties, which designers can adjust in UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/configuring-the-properties-panel\/\" target=\"_blank\" rel=\"noreferrer noopener\">Properties Panel<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-real-code-components\">Real code components<\/h3>\n\n\n\n<p>The components in UXPin Merge are real code components. Component behavior, such as hover effects, is inherent in the code and doesn&#8217;t need to be configured by the designer. Using code in the design process ensures high fidelity between the design and the final product.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-atomic-design-methodology\">Atomic Design methodology<\/h3>\n\n\n\n<p>In the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">Atomic Design<\/a> methodology, designers build components from the smallest building blocks, called atoms, up to more complex patterns (molecules, organisms, templates, and pages). In UXPin Merge, designers can compose components using other components, each with its own configurable properties.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-component-composition\">Component composition<\/h3>\n\n\n\n<p>UXPin doesn&#8217;t restrict designers to the initial composition of components. They can modify components by adding or removing elements. For example, removing the header from a card component, adding a video player, and adjusting the typography are all possible in UXPin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-spec-mode-with-jsx-code\">Spec Mode with JSX code<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/spec-mode\" target=\"_blank\" rel=\"noreferrer noopener\">Spec Mode<\/a> in UXPin provides clean JSX code as configured by the designer with properties. This JSX ensures that developers can access the exact code needed to recreate the component as designed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-fully-testable-prototypes\">Fully testable prototypes<\/h3>\n\n\n\n<p>Because the components are coded and have inherent behavior, the prototypes built with UXPin Merge are fully functional and testable without assumptions. This enhanced testing is particularly useful for components with states, such as dropdowns and tabs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-collaboration-and-documentation\">Collaboration and documentation<\/h3>\n\n\n\n<p>UXPin Merge facilitates collaboration between designers, stakeholders, and developers by providing access to documentation, properties, behavior, and rule sets for components.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accessibility-and-configuration\">Accessibility and configuration<\/h3>\n\n\n\n<p>Designers can configure components for accessibility by exporting ARIA tags as properties, allowing for screen reader testing. This configuration can also help achieve more complexity, such as enabling or disabling checkboxes or filtering a data table.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-data-components\">Data components<\/h3>\n\n\n\n<p>Dashboards and tables are near impossible to prototype in traditional design tools due to their complex interactivity. With Merge, designers can import a data grid component for sorting, selecting, and filtering. They can populate the data by copy-pasting from a spreadsheet or through an API connection within the component.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-inter-component-communication\">Inter-component communication<\/h3>\n\n\n\n<p>Components can communicate with each other in UXPin. For example, a button can trigger a dialog component, much like it would in the final product. The dialog has an &#8216;open&#8217; property that controls its visibility, which designers can activate using a button (or any other element).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-version-control\">Version Control<\/h3>\n\n\n\n<p>UXPin Merge includes <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/version-control\" target=\"_blank\" rel=\"noreferrer noopener\">Version Control<\/a>, essential for scaling and future-proofing a design system. Each prototype links to a version of the design system, and designers can switch between different versions or branches. This versioning is helpful in testing new versions, working with different themes, or managing multiple products that use the same design system.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-responsive-design\">Responsive design<\/h3>\n\n\n\n<p>If a component has responsive properties, its media queries will reflect in UXPin. This responsiveness allows designers to create a single prototype that is adaptive to different breakpoints.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-adaptability-and-scalability\">Adaptability and scalability<\/h3>\n\n\n\n<p>UXPin Merge is adaptable and scalable, allowing for various use cases such as testing prototypes with new versions of the design system, managing different themes for different products or clients, and rolling out new design systems with new components.<\/p>\n\n\n\n<p>Unlock the full potential of your design system by bridging the gap between design and development with UXPin Merge. Experience the power of component-driven prototyping and ensure consistency in your projects. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-buttons\">\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\" target=\"_blank\" rel=\"noreferrer noopener\">Discover Merge<\/a><\/center><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A design system serves as a single source of truth, grouping all elements that allow teams to design, prototype, test, and develop a product. This system includes pattern libraries, coded component libraries, code samples, APIs, and documentation.&nbsp; Organizations use the four-level design system maturity scale to gauge the evolution of design systems.&nbsp; The ultimate goal<\/p>\n","protected":false},"author":3,"featured_media":48453,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,199,440],"tags":[],"class_list":["post-48452","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design-systems","category-merge"],"yoast_title":"","yoast_metadesc":"Read our practical guide on maintaining, governing, and growing design systems with UXPin. Build a stronger, more resilient design system.","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>How to Scale Design Systems with UXPin \u2013 A Practical Guide | UXPin<\/title>\n<meta name=\"description\" content=\"Read our practical guide on maintaining, governing, and growing design systems with UXPin. Build a stronger, more resilient design system.\" \/>\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-scale-design-system-in-uxpin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Scale Design Systems with UXPin \u2013 A Practical Guide\" \/>\n<meta property=\"og:description\" content=\"Read our practical guide on maintaining, governing, and growing design systems with UXPin. Build a stronger, more resilient design system.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-scale-design-system-in-uxpin\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-28T12:37:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-10T13:36:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image1-min.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=\"9 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-scale-design-system-in-uxpin\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-scale-design-system-in-uxpin\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"How to Scale Design Systems with UXPin \u2013 A Practical Guide\",\"datePublished\":\"2023-06-28T12:37:31+00:00\",\"dateModified\":\"2023-07-10T13:36:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-scale-design-system-in-uxpin\\\/\"},\"wordCount\":1723,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-scale-design-system-in-uxpin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/image1-min.png\",\"articleSection\":[\"Blog\",\"Design Systems\",\"Merge by UXPin\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-scale-design-system-in-uxpin\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-scale-design-system-in-uxpin\\\/\",\"name\":\"How to Scale Design Systems with UXPin \u2013 A Practical Guide | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-scale-design-system-in-uxpin\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-scale-design-system-in-uxpin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/image1-min.png\",\"datePublished\":\"2023-06-28T12:37:31+00:00\",\"dateModified\":\"2023-07-10T13:36:04+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Read our practical guide on maintaining, governing, and growing design systems with UXPin. Build a stronger, more resilient design system.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-scale-design-system-in-uxpin\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-scale-design-system-in-uxpin\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-scale-design-system-in-uxpin\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/image1-min.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/image1-min.png\",\"width\":1200,\"height\":600,\"caption\":\"image1 min\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-scale-design-system-in-uxpin\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Scale Design Systems with UXPin \u2013 A Practical Guide\"}]},{\"@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":"How to Scale Design Systems with UXPin \u2013 A Practical Guide | UXPin","description":"Read our practical guide on maintaining, governing, and growing design systems with UXPin. Build a stronger, more resilient design system.","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-scale-design-system-in-uxpin\/","og_locale":"en_US","og_type":"article","og_title":"How to Scale Design Systems with UXPin \u2013 A Practical Guide","og_description":"Read our practical guide on maintaining, governing, and growing design systems with UXPin. Build a stronger, more resilient design system.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-scale-design-system-in-uxpin\/","og_site_name":"Studio by UXPin","article_published_time":"2023-06-28T12:37:31+00:00","article_modified_time":"2023-07-10T13:36:04+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image1-min.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-scale-design-system-in-uxpin\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-scale-design-system-in-uxpin\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"How to Scale Design Systems with UXPin \u2013 A Practical Guide","datePublished":"2023-06-28T12:37:31+00:00","dateModified":"2023-07-10T13:36:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-scale-design-system-in-uxpin\/"},"wordCount":1723,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-scale-design-system-in-uxpin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image1-min.png","articleSection":["Blog","Design Systems","Merge by UXPin"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-scale-design-system-in-uxpin\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-scale-design-system-in-uxpin\/","name":"How to Scale Design Systems with UXPin \u2013 A Practical Guide | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-scale-design-system-in-uxpin\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-scale-design-system-in-uxpin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image1-min.png","datePublished":"2023-06-28T12:37:31+00:00","dateModified":"2023-07-10T13:36:04+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Read our practical guide on maintaining, governing, and growing design systems with UXPin. Build a stronger, more resilient design system.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-scale-design-system-in-uxpin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/how-to-scale-design-system-in-uxpin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-scale-design-system-in-uxpin\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image1-min.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image1-min.png","width":1200,"height":600,"caption":"image1 min"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-scale-design-system-in-uxpin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How to Scale Design Systems with UXPin \u2013 A Practical Guide"}]},{"@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\/48452","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=48452"}],"version-history":[{"count":3,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/48452\/revisions"}],"predecessor-version":[{"id":48589,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/48452\/revisions\/48589"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/48453"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=48452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=48452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=48452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}