{"id":5624,"date":"2023-05-05T08:18:42","date_gmt":"2023-05-05T16:18:42","guid":{"rendered":"https:\/\/www.emergeinteractive.com\/?p=5624"},"modified":"2023-05-05T08:18:43","modified_gmt":"2023-05-05T16:18:43","slug":"how-to-ux-ui-design-system-component-library","status":"publish","type":"post","link":"https:\/\/www.emergeagency.com\/insights\/detail\/how-to-ux-ui-design-system-component-library\/","title":{"rendered":"The Best Component Library Tools to Help You Scale Your Product Consistently and Efficiently"},"content":{"rendered":"\n<p>As a product manager, you need an effective way&nbsp;to manage the user experience and user interface (UX\/UI) of your digital product. It is essential that your digital product will scale effectively without requiring frequent additions or rework of design files and assets, while maintaining a consistent UI system. Several innovations over the last few years have helped reorganize the traditional UX\/UI design process, and more recent innovations on the development side now allow for a complete design-to-development tool stack. This article will go over the most recent UX\/UI design processes and the best component library tools that allow for&nbsp;tighter integration between design and development.<\/p>\n\n\n\n<div class=\"contentupgrade-wrapper contentupgrade_7020_4e627e0c24feeb294a722ff326fd9c6f\" id=\"contentupgrade_1\" data-contentupgradeid=\"7020\" data-contentupgradeuid=\"contentupgrade_7020_4e627e0c24feeb294a722ff326fd9c6f\"><\/div><script type=\"text\/javascript\">(function (NfContentUpgradeLoader, $) {loadContentUpgrade('contentupgrade_1', 'The Best Component Library Tools to Help You Scale Your Product Consistently and Efficiently', 5624, 7020, 'contentupgrade_7020_4e627e0c24feeb294a722ff326fd9c6f', '', '', '');}(window.NfContentUpgradeLoader = window.NfContentUpgradeLoader || {}, jQuery));<\/script>\n\n\n\n<h4 class=\"wp-block-heading\"><br><strong>What\u2019s the difference between design systems, style guides, pattern libraries, and component libraries?<\/strong><\/h4>\n\n\n\n<p>These terms are often used interchangeably, but they refer to different aspects of the design process. <a href=\"https:\/\/www.emergeagency.com\/insights\/detail\/ultimate-guide-to-design-systems\/\">Design systems<\/a> have been around for a while, but are becoming more popular due to the shift to components in the development process, which has been accelerated by the popularity of the React development framework. Design systems enable people to take just the bits of the design system that are applicable to them and build the components that are missing more easily. It\u2019s important to create a system that\u2019s complete, flexible, and extensible so that it can be adapted easily.\u00a0<\/p>\n\n\n\n<p>Design systems holistically group all the elements that allow product teams to design and implement a product. Typically, a design system consists of the following parts:<\/p>\n\n\n\n<ul>\n<li><strong>Style guide<\/strong>: A style guide focuses on the visual aspect of a product, such as colors, typography, icons, and spacing. It establishes a set of rules and guidelines to ensure visual consistency across the application or brand. Style guides may also include recommendations on writing style, tone, and voice to maintain consistency in content as well.<br><br><\/li>\n\n\n\n<li><strong>Pattern library<\/strong>: A pattern library, also known as a UI library or design pattern library, is a collection of reusable design elements or solutions that solve common design problems. It includes UI elements, such as navigation, forms, buttons, and their variations, along with guidelines on how and when to use them. Pattern libraries help designers and developers maintain a consistent user experience by providing a repository of proven solutions.<br><br><\/li>\n\n\n\n<li><strong>Component library<\/strong>: A component library is a collection of pre-built, reusable UI components or code snippets that developers can use to build a user interface. These components are often created based on the design patterns and styles defined in the pattern library and style guide. Component libraries help accelerate development by reducing the need to create UI elements from scratch and ensuring consistent implementation across the application.<\/li>\n<\/ul>\n\n\n\n<p>While different design systems tend to group their deliverables differently, the core pieces should be included. A strong design system will also incorporate \u2018subatomic\u2019 parts, such as the grid system, color palette, and typography, which are commonly referred to as design tokens.&nbsp;<\/p>\n\n\n\n<p>Let\u2019s take a look at an example of some real-world design systems:<\/p>\n\n\n\n<ul>\n<li>Shopify publishes their design system,&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/polaris.shopify.com\/\" target=\"_blank\">Polaris<\/a>, not just for themselves, but for anyone who operates in the ecosystem of their eCommerce platform.<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/material.io\/\" target=\"_blank\">Material Design<\/a>&nbsp;is an extensive design system that bridges graphical guidelines, interaction patterns, and component libraries.<\/li>\n\n\n\n<li>GitHub publishes their design system,&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/primer.style\/\" target=\"_blank\">Primer<\/a>, as an open source project. While it has a strong focus on the development aspects, it still includes a style guide, and pattern library. They even include templates for presentations and an iconography library.&nbsp;<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/atlaskit.atlassian.com\/\" target=\"_blank\">Atlaskit<\/a>&nbsp;is the design system developed by Atlassian for its products. It is very exhaustive and includes a style guide, pattern library, and component library.<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.microsoft.com\/design\/fluent\/#\/\" target=\"_blank\">Fluent<\/a> is Microsoft&#8217;s open-source, cross-platform design system that gives designers and developers a framework to create engaging product experiences.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.audi.com\/ci\/en\/guides\/user-interface\/introduction.html\" data-type=\"URL\" data-id=\"https:\/\/www.audi.com\/ci\/en\/guides\/user-interface\/introduction.html\" target=\"_blank\" rel=\"noreferrer noopener\">Audi&#8217;s design system<\/a> is of interest because it covers a wide variety of use cases, from phones to smartwatches and car displays.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><br><strong>How does using a component library improve the UX\/UI design quality assurance?<\/strong><\/h4>\n\n\n\n<p>Component libraries can be used for visual QA by visual designers once functionality is in development and before it is deployed into the application. Component libraries also enable UX quality assurance on how components function; this workflow can be collaborative. Edge cases typically can arise once real data is used in an application environment; by using a component library your team can catch more of those edge cases before they appear in your production application and more effectively address the UX required for modern stateful interfaces.<\/p>\n\n\n\n<p>Component libraries typically include documentation that describes each component&#8217;s purpose, usage, and behavior. This helps developers and quality assurance teams better understand the expected behavior of the components, making it easier to spot and address issues.<\/p>\n\n\n\n<p>Using a component library can also help when testing for accessibility. Many component libraries prioritize accessibility by providing pre-built components that follow best practices for accessibility. This means that the quality assurance team can be more confident in the application&#8217;s accessibility and spend less time testing these aspects.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><br><strong>How atomic design fits with component libraries<\/strong><\/h4>\n\n\n\n<p>Component Libraries borrow some concepts from atomic design, so it&#8217;s important to understand some of its basics. In atomic design, design concepts are composed of modular and reusable components created from individual atomic pieces. Brad Frost&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/atomicdesign.bradfrost.com\/chapter-2\/\" target=\"_blank\">describes atomic design<\/a>:<\/p>\n\n\n\n<p><em>Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are:<\/em><\/p>\n\n\n\n<ol>\n<li><em>Atoms<\/em><\/li>\n\n\n\n<li><em>Molecules<\/em><\/li>\n\n\n\n<li><em>Organisms<\/em><\/li>\n\n\n\n<li><em>Templates<\/em><\/li>\n\n\n\n<li><em>Pages<\/em><\/li>\n<\/ol>\n\n\n\n<p><em>Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time. Each of the five stages plays a key role in the hierarchy of our interface design systems.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"691\" src=\"https:\/\/www.emergeagency.com\/wp-content\/uploads\/2020\/04\/AtomicDesignGraphic-web-1024x691.png\" alt=\"\" class=\"wp-image-5628\" srcset=\"https:\/\/www.emergeagency.com\/wp-content\/uploads\/2020\/04\/AtomicDesignGraphic-web-1024x691.png 1024w, https:\/\/www.emergeagency.com\/wp-content\/uploads\/2020\/04\/AtomicDesignGraphic-web-300x203.png 300w, https:\/\/www.emergeagency.com\/wp-content\/uploads\/2020\/04\/AtomicDesignGraphic-web-768x518.png 768w, https:\/\/www.emergeagency.com\/wp-content\/uploads\/2020\/04\/AtomicDesignGraphic-web-1536x1037.png 1536w, https:\/\/www.emergeagency.com\/wp-content\/uploads\/2020\/04\/AtomicDesignGraphic-web-1568x1058.png 1568w, https:\/\/www.emergeagency.com\/wp-content\/uploads\/2020\/04\/AtomicDesignGraphic-web-500x338.png 500w, https:\/\/www.emergeagency.com\/wp-content\/uploads\/2020\/04\/AtomicDesignGraphic-web-1200x810.png 1200w, https:\/\/www.emergeagency.com\/wp-content\/uploads\/2020\/04\/AtomicDesignGraphic-web.png 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>When connecting the atomic design practice with development, the resulting code is easier to read, contains less duplication, allows for more modular file structure, and improves the maintainability of the application. In particular, component libraries have become a popular tool to represent Molecules and Organisms as functional pieces of code that can be utilized in web applications.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><br><strong>Would my digital product benefit from a design system?<\/strong><\/h4>\n\n\n\n<p>Before you implement a component library, you&#8217;ll need a completed <a href=\"https:\/\/www.emergeagency.com\/insights\/detail\/ultimate-guide-to-design-systems\/\">design system<\/a>. But is a design system the right tool to use for your digital product? Ask yourself the following questions and if you find that you are agreeing with several of them, your digital product is a good candidate for a design system:<\/p>\n\n\n\n<ul>\n<li>Does your product have multiple digital touchpoints (websites, web apps, mobile apps) that would benefit from a consistent interface design?<\/li>\n\n\n\n<li>Does your product team need to quickly release changes, new features, or new digital touchpoints?<\/li>\n\n\n\n<li>Are you growing fast and need to be able to design with a common language and consistent aesthetic that upholds your company\u2019s brand?<\/li>\n\n\n\n<li>Do your designers tend to create outside of your brand aesthetic, making things very difficult to iterate and change over time and also adding both technical and design debt?<\/li>\n\n\n\n<li>Do the same things get built over and over?<\/li>\n\n\n\n<li>Does your product have inconsistent tooltips, confusing modal dialogs, and competing button styles?<\/li>\n\n\n\n<li>Do your designers ask the same questions time and time again?<\/li>\n\n\n\n<li>Does it take new designers, engineers, and product managers months to fully understand how to use the set design language?<\/li>\n\n\n\n<li>Are you looking to conduct more rapid prototyping?<\/li>\n\n\n\n<li>Do you have a set of accessibility standards for your product\u2019s design that you need to uphold?<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><br><strong>Does my digital product need a component library?<\/strong><\/h4>\n\n\n\n<p>Not every digital product that has a <a href=\"https:\/\/www.emergeagency.com\/insights\/detail\/ultimate-guide-to-design-systems\/\">design system<\/a> would also benefit from having a component library. The following questions can help you determine if implementing a component library is worth the effort:<\/p>\n\n\n\n<ul>\n<li>Do you have a design system or are planning on creating one?<\/li>\n\n\n\n<li>Are your developers confused what UI or UX convention to use for interfaces? For example, what button, drop down, typeahead, etc. to use?<\/li>\n\n\n\n<li>Are your developers building the same design components over and over in slightly different ways?<\/li>\n\n\n\n<li>Do the different interfaces in your digital product share design components?<\/li>\n\n\n\n<li>Does your product team struggle with visual QA?<\/li>\n\n\n\n<li>Is your development team building an ecosystem of reusable atomic UI components (using React, Angular, or similar)?<\/li>\n\n\n\n<li>Are there inconsistencies in the way your UI components are coded, making it hard for different developers to work in different areas of your product?<\/li>\n\n\n\n<li>Do you have trouble distributing and versioning atomic UI components after they are coded?<\/li>\n<\/ul>\n\n\n\n<p>If you found yourself agreeing to multiple of these questions, your digital product likely would benefit from a component library.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><br><strong>I have a design system, but how do I add a component library?<\/strong><\/h4>\n\n\n\n<p>If you are ready to take the leap, congratulations! First off, ensure that your design system touches on all the required components:<\/p>\n\n\n\n<ul>\n<li>Purpose and shared values: Create a vision to ensure the design moves in the right shared direction. Follow these critical steps to&nbsp;<a href=\"https:\/\/www.emergeagency.com\/whitepaper\/digital-product-strategy-definition\/\">define your product\u2019s vision<\/a>.<\/li>\n\n\n\n<li>Design Principles: These help teams with decision making and guide your team toward making appropriate decisions.<\/li>\n\n\n\n<li>Brand identity &amp; language: The identity should be defined in line with the strategy and the objectives of the brand. This is often the very beginning of a design system for many businesses or organizations, helping define things like typography, colors, and more. Follow these steps to&nbsp;<a href=\"https:\/\/www.emergeagency.com\/insights\/detail\/5-step-digital-product-strategy-framework\/\">define your digital product\u2019s brand strategy<\/a>.<\/li>\n\n\n\n<li>Components &amp; patterns: These are at the heart of the design system. All the previous elements will help you to create them and deliver a consistent experience.<\/li>\n<\/ul>\n\n\n\n<p>With this in place, you can start working on your component library:<\/p>\n\n\n\n<ul>\n<li>Create a plan for what parts of your design system you want to represent in the component library. You can include different levels of atomic design, such as only atoms or everything up to organisms. Ideally, this is prioritized to maximize your return on investment, including prioritization of the most commonly used or shared components in your library.<\/li>\n\n\n\n<li>Decide if you want to leverage an existing component library tool and, if so, select which one to use (commonly used tools include Storybook and Bit.dev; more on those below).<\/li>\n\n\n\n<li>Determine the hosting and governance of the library. Different tools will push you towards different options. Since your component library will be a shared resource that is likely utilized by more than one application in your ecosystem, it will need to be set up as a standalone, semi-autonomous entity&#8211;essentially like a web application itself. As such, it requires hosting infrastructure and the typical governance policies associated with a web application (source control, continuous delivery mechanisms, etc.). Teams other than development will need to be able&nbsp;to&nbsp;access this, so plan for it to be available to them as well.<\/li>\n\n\n\n<li>Decide on a distribution method, such as&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\">npm<\/a>. This establishes how the code for a shared component is ported into the software applications that want to use them.<\/li>\n\n\n\n<li>Make sure you have a governance plan for the development lifecycle of each component, from build to release. Also, consider component dependencies.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><br><strong>The best component library tools to develop independent and reusable components<\/strong><\/h4>\n\n\n\n<p>You could build a component library from scratch, but fortunately, there are several tools that can help you get a jump start. Here are our favorites that you should check out:<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><br><a rel=\"noreferrer noopener\" href=\"https:\/\/storybook.js.org\/\" target=\"_blank\"><strong>StoryBook<\/strong><\/a><\/h5>\n\n\n\n<p>Storybook is an open source tool for developing UI components in isolation for some of the most popular JS frameworks (React, Vue, and Angular). It provides a sandbox to build and showcase UI components, provides visual previews of components, and runs tests on them. It is widely used, popular, and considered a mature software product.<\/p>\n\n\n\n<p>It also supports add-ons, which can extend its utility. For example, the &#8220;knobs&#8221; add-on allows editing the props passed to a react component, thus enabling testing and viewing the component in different UI states.&nbsp;<\/p>\n\n\n\n<p>Since it is an open source product, StoryBook does require <a href=\"https:\/\/storybook.js.org\/docs\/react\/get-started\/install\/\" target=\"_blank\" rel=\"noreferrer noopener\">setting up<\/a> and managing your own hosting infrastructure to run it.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><br><a rel=\"noreferrer noopener\" href=\"https:\/\/bit.dev\/\" target=\"_blank\"><strong>Bit.Dev<\/strong><\/a><\/h5>\n\n\n\n<p>Similar to Storybook, Bit.dev provides a workspace to create visual components. It has a greater focus on isolation and more features around the full lifecycle of component development. It too allows for a&nbsp;visual preview of components, supports the most popular UI frameworks (React, Angular, Vue, etc.), and allows running tests. Bit.dev can work with StoryBook, or as a standalone tool.&nbsp;<\/p>\n\n\n\n<p>Since it\u2019s a commercial product, there is a <a href=\"https:\/\/bit.cloud\/\" target=\"_blank\" rel=\"noreferrer noopener\">hosted service option<\/a> in addition to an <a href=\"https:\/\/bit.dev\/docs\/quick-start\/hello-world\" target=\"_blank\" rel=\"noreferrer noopener\">on-prem option<\/a>. The hosted option creates a low barrier to entry and reduces long-term infrastructure management. It also includes automatic deployment and additional collaboration options that the self-hosted tools do not provide.<\/p>\n\n\n\n<p>Bit.dev defines, and can handle the full lifecycle for components: test, build, version, and distribute. It provides continuous integration (CI) for each component, in the cloud. It also includes built-in hooks for NPM and other distribution tools, which may save time. Compared to other tools, Bit.dev is geared toward greater isolation of components, where changes and versions are tracked per component. It also provides dependency management. Business level accounts start at $25\/month per user.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><br><a rel=\"noreferrer noopener\" href=\"https:\/\/backlight.dev\/\" data-type=\"URL\" data-id=\"https:\/\/backlight.dev\/\" target=\"_blank\">Backlight<\/a><\/h5>\n\n\n\n<p>Backlight is a newer product that competes with Bit.dev&#8217;s hosted offering. It offers an all-in-one solution that promotes collaboration between developers and designers by providing instant sharing capabilities, component-driven development, and built-in release management and documentation support. The platform comes with starter-kits in various languages such as React, Vue, Svelte, Web Components and more languages on the way.<\/p>\n\n\n\n<p>Backlight.dev allows multiple team members to work simultaneously on design systems and components, enabling seamless collaboration and reducing the time taken to create and iterate on designs. The platform also offers a live preview feature that allows designers and developers to see the impact of their changes in real-time, ensuring that the final output meets their expectations. They offer a free account level, and business level accounts start at $149\/month. <\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><br><a rel=\"noreferrer noopener\" href=\"https:\/\/react-styleguidist.js.org\/\" target=\"_blank\"><strong>React Styleguidist<\/strong><\/a><\/h5>\n\n\n\n<p>Styleguidist is another open source tool that is self-hosted. It facilitates isolated component development and is similar to StoryBook in features, but uses a slightly different technical approach, and only works for React. It allows visual previewing of components, runs tests, and allows you to model state, similar to the &#8220;knobs&#8221; add-on for StoryBook.<\/p>\n\n\n\n<p>One feature that particularly stands out to us is how easy it is to create docs and controls as Styleguidist parses the source code and readme files to auto-generate docs. The output is generated in the JSdoc format.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><br><a rel=\"noreferrer noopener\" href=\"https:\/\/stenciljs.com\/\" target=\"_blank\"><strong>Stencil<\/strong><\/a><\/h5>\n\n\n\n<p>Stencil.js offers out-of-the-box features and documentation that can help build a library of universal UI components that can be used across platforms, devices, and front-end frameworks. Compared to other products listed in this article, Stencil.js is more focused on generating web components (although it does offer integrations for React, Angular, and Vue) and does the work of generating and documenting them in code. It provides a toolchain for building a component library of web components, but does not provide\u00a0a\u00a0visual preview of components.<\/p>\n\n\n\n<div class=\"contentupgrade-wrapper contentupgrade_7020_7d9e4f278f87a4bb0cf7fe7d65667153\" id=\"contentupgrade_2\" data-contentupgradeid=\"7020\" data-contentupgradeuid=\"contentupgrade_7020_7d9e4f278f87a4bb0cf7fe7d65667153\"><\/div><script type=\"text\/javascript\">(function (NfContentUpgradeLoader, $) {loadContentUpgrade('contentupgrade_2', 'The Best Component Library Tools to Help You Scale Your Product Consistently and Efficiently', 5624, 7020, 'contentupgrade_7020_7d9e4f278f87a4bb0cf7fe7d65667153', '', '', '');}(window.NfContentUpgradeLoader = window.NfContentUpgradeLoader || {}, jQuery));<\/script>\n\n\n\n<h4 class=\"wp-block-heading\"><br><strong>Getting started with atomic design and component libraries<\/strong><\/h4>\n\n\n\n<p>If you are interested in setting up a component library for your digital product, now is a great time to do so. The popularity of atomic design helps design teams structure design systems in a way that can be easily understood in terms of components. And the availability of several robust component library tools provides a good starting point for setting up your own UI library. If you are just getting started with your <a href=\"https:\/\/www.emergeagency.com\/insights\/detail\/ultimate-guide-to-design-systems\/\">digital product\u2019s design system<\/a>, learn how to&nbsp;<a href=\"https:\/\/www.emergeagency.com\/insights\/detail\/5-step-digital-product-strategy-framework\/\">develop an effective digital product brand strategy<\/a>&nbsp;in five easy steps. Also, don\u2019t forget about the&nbsp;<a href=\"https:\/\/www.emergeagency.com\/insights\/detail\/developer-experience-digital-product-success\/\">developer experience for engineers outside of your core product team<\/a>&nbsp;that might engage with your product.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As a product manager, you need an effective way&nbsp;to manage the user experience and user interface (UX\/UI) of your digital product. It is essential that your digital product will scale effectively without requiring frequent additions or rework of design files and assets, while maintaining a consistent UI system. Several innovations over the last few years [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":4054,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,20,31,27],"tags":[],"message_area_of_focus":[36],"buy_cycle":[37],"target_audience":[40],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Component Library: How to Build a Library for a UX UI Design System<\/title>\n<meta name=\"description\" content=\"You must manage digital product UX UI as you scale. Discover how a design system and component library can keep your design and development teams in-sync.\" \/>\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.emergeagency.com\/insights\/detail\/how-to-ux-ui-design-system-component-library\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Component Library: How to Build a Library for a UX UI Design System\" \/>\n<meta property=\"og:description\" content=\"You must manage digital product UX UI as you scale. Discover how a design system and component library can keep your design and development teams in-sync.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.emergeagency.com\/insights\/detail\/how-to-ux-ui-design-system-component-library\/\" \/>\n<meta property=\"og:site_name\" content=\"EMERGE | UX Agency\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-05T16:18:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-05T16:18:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.emergeagency.com\/wp-content\/uploads\/2019\/05\/Looking-at-Your-Product-Vision-Through-a-New-Lens_Detail.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2161\" \/>\n\t<meta property=\"og:image:height\" content=\"826\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Julian Pscheid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@EmergeInteract\" \/>\n<meta name=\"twitter:site\" content=\"@EmergeInteract\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Julian Pscheid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.emergeagency.com\/insights\/detail\/how-to-ux-ui-design-system-component-library\/\",\"url\":\"https:\/\/www.emergeagency.com\/insights\/detail\/how-to-ux-ui-design-system-component-library\/\",\"name\":\"Component Library: How to Build a Library for a UX UI Design System\",\"isPartOf\":{\"@id\":\"https:\/\/www.emergeagency.com\/#website\"},\"datePublished\":\"2023-05-05T16:18:42+00:00\",\"dateModified\":\"2023-05-05T16:18:43+00:00\",\"author\":{\"@id\":\"https:\/\/www.emergeagency.com\/#\/schema\/person\/dab01840291b244f372aa4e2afe970f1\"},\"description\":\"You must manage digital product UX UI as you scale. Discover how a design system and component library can keep your design and development teams in-sync.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.emergeagency.com\/insights\/detail\/how-to-ux-ui-design-system-component-library\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.emergeagency.com\/insights\/detail\/how-to-ux-ui-design-system-component-library\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.emergeagency.com\/insights\/detail\/how-to-ux-ui-design-system-component-library\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.emergeagency.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Best Component Library Tools to Help You Scale Your Product Consistently and Efficiently\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.emergeagency.com\/#website\",\"url\":\"https:\/\/www.emergeagency.com\/\",\"name\":\"EMERGE | UX Agency\",\"description\":\"EMERGE is a UX design agency in Portland, OR. We help product and marketing leaders in healthcare, manufacturing, and tech drive revenue and improve outcomes through digital products that increase customer engagement and retention. Our specialties are in UX\/UI Design, product strategy, and full-stack development.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.emergeagency.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.emergeagency.com\/#\/schema\/person\/dab01840291b244f372aa4e2afe970f1\",\"name\":\"Julian Pscheid\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.emergeagency.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.emergeagency.com\/wp-content\/uploads\/2019\/01\/Julian_Pscheid-96x96.jpg\",\"contentUrl\":\"https:\/\/www.emergeagency.com\/wp-content\/uploads\/2019\/01\/Julian_Pscheid-96x96.jpg\",\"caption\":\"Julian Pscheid\"},\"url\":\"https:\/\/www.emergeagency.com\/author\/julian-pscheid\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Component Library: How to Build a Library for a UX UI Design System","description":"You must manage digital product UX UI as you scale. Discover how a design system and component library can keep your design and development teams in-sync.","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.emergeagency.com\/insights\/detail\/how-to-ux-ui-design-system-component-library\/","og_locale":"en_US","og_type":"article","og_title":"Component Library: How to Build a Library for a UX UI Design System","og_description":"You must manage digital product UX UI as you scale. Discover how a design system and component library can keep your design and development teams in-sync.","og_url":"https:\/\/www.emergeagency.com\/insights\/detail\/how-to-ux-ui-design-system-component-library\/","og_site_name":"EMERGE | UX Agency","article_published_time":"2023-05-05T16:18:42+00:00","article_modified_time":"2023-05-05T16:18:43+00:00","og_image":[{"width":2161,"height":826,"url":"https:\/\/www.emergeagency.com\/wp-content\/uploads\/2019\/05\/Looking-at-Your-Product-Vision-Through-a-New-Lens_Detail.jpg","type":"image\/jpeg"}],"author":"Julian Pscheid","twitter_card":"summary_large_image","twitter_creator":"@EmergeInteract","twitter_site":"@EmergeInteract","twitter_misc":{"Written by":"Julian Pscheid","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.emergeagency.com\/insights\/detail\/how-to-ux-ui-design-system-component-library\/","url":"https:\/\/www.emergeagency.com\/insights\/detail\/how-to-ux-ui-design-system-component-library\/","name":"Component Library: How to Build a Library for a UX UI Design System","isPartOf":{"@id":"https:\/\/www.emergeagency.com\/#website"},"datePublished":"2023-05-05T16:18:42+00:00","dateModified":"2023-05-05T16:18:43+00:00","author":{"@id":"https:\/\/www.emergeagency.com\/#\/schema\/person\/dab01840291b244f372aa4e2afe970f1"},"description":"You must manage digital product UX UI as you scale. Discover how a design system and component library can keep your design and development teams in-sync.","breadcrumb":{"@id":"https:\/\/www.emergeagency.com\/insights\/detail\/how-to-ux-ui-design-system-component-library\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.emergeagency.com\/insights\/detail\/how-to-ux-ui-design-system-component-library\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.emergeagency.com\/insights\/detail\/how-to-ux-ui-design-system-component-library\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.emergeagency.com\/"},{"@type":"ListItem","position":2,"name":"The Best Component Library Tools to Help You Scale Your Product Consistently and Efficiently"}]},{"@type":"WebSite","@id":"https:\/\/www.emergeagency.com\/#website","url":"https:\/\/www.emergeagency.com\/","name":"EMERGE | UX Agency","description":"EMERGE is a UX design agency in Portland, OR. We help product and marketing leaders in healthcare, manufacturing, and tech drive revenue and improve outcomes through digital products that increase customer engagement and retention. Our specialties are in UX\/UI Design, product strategy, and full-stack development.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.emergeagency.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.emergeagency.com\/#\/schema\/person\/dab01840291b244f372aa4e2afe970f1","name":"Julian Pscheid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.emergeagency.com\/#\/schema\/person\/image\/","url":"https:\/\/www.emergeagency.com\/wp-content\/uploads\/2019\/01\/Julian_Pscheid-96x96.jpg","contentUrl":"https:\/\/www.emergeagency.com\/wp-content\/uploads\/2019\/01\/Julian_Pscheid-96x96.jpg","caption":"Julian Pscheid"},"url":"https:\/\/www.emergeagency.com\/author\/julian-pscheid\/"}]}},"_links":{"self":[{"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/posts\/5624"}],"collection":[{"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/comments?post=5624"}],"version-history":[{"count":56,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/posts\/5624\/revisions"}],"predecessor-version":[{"id":10061,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/posts\/5624\/revisions\/10061"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/media\/4054"}],"wp:attachment":[{"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/media?parent=5624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/categories?post=5624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/tags?post=5624"},{"taxonomy":"message_area_of_focus","embeddable":true,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/message_area_of_focus?post=5624"},{"taxonomy":"buy_cycle","embeddable":true,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/buy_cycle?post=5624"},{"taxonomy":"target_audience","embeddable":true,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/target_audience?post=5624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}