{"id":37977,"date":"2022-12-13T07:15:36","date_gmt":"2022-12-13T15:15:36","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=37977"},"modified":"2022-12-14T07:55:54","modified_gmt":"2022-12-14T15:55:54","slug":"building-component-library-guide","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/building-component-library-guide\/","title":{"rendered":"Building a Component Library \u2013 A Step-by-Step 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\/2022\/12\/building-component-library-1024x512.png\" alt=\"building component library\" class=\"wp-image-37978\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/building-component-library-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/building-component-library-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/building-component-library-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/building-component-library.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>Whether you&#8217;re <a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">creating a design system from scratch<\/a> or want better front-end development cohesion and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/importance-of-design-consistency\/\" target=\"_blank\" rel=\"noreferrer noopener\">consistency<\/a>, building a component library is an excellent way to improve your product&#8217;s user experience.<\/p>\n\n\n\n<p>A component library will save you significant time in the long run, but it will require a lot of resources and attention to detail to build from scratch. Engineers must consider the product&#8217;s current priorities and future possibilities to ensure the component library is scalable.<\/p>\n\n\n\n<p>With <a href=\"https:\/\/www.uxpin.com\/merge\/developers\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a>, you can create fully functional prototypes with the UI elements that come from your component library that preserves its functionality when imported into the design editor. Share a single source of truth across design and development. <a href=\"https:\/\/www.uxpin.com\/merge\/developers\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page<\/a> for more details and request access.<\/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<div class=\"wp-block-yoast-seo-table-of-contents yoast-table-of-contents\"><h2>Table of contents<\/h2><ul><li><a href=\"#h-step-1-create-interface-inventory\" data-level=\"2\">Step 1. Create Interface Inventory<\/a><\/li><li><a href=\"#h-step-2-select-tools-and-framework\" data-level=\"2\">Step 2. Select Tools and Framework<\/a><ul><li><a href=\"#h-syncing-design-and-development\" data-level=\"3\">Syncing design and development<\/a><\/li><\/ul><\/li><li><a href=\"#h-step-3-get-components\" data-level=\"2\">Step 3. Get Components<\/a><ul><li><a href=\"#h-atoms\" data-level=\"3\">Atoms<\/a><\/li><li><a href=\"#h-molecules\" data-level=\"3\">Molecules<\/a><\/li><li><a href=\"#h-organisms\" data-level=\"3\">Organisms<\/a><\/li><li><a href=\"#h-templates\" data-level=\"3\">Templates<\/a><\/li><li><a href=\"#h-design-tokens\" data-level=\"3\">Design tokens<\/a><\/li><li><a href=\"#h-remember-documentation\" data-level=\"3\">Remember documentation!<\/a><\/li><li><a href=\"#h-building-a-component-library-in-storybook\" data-level=\"3\">Building a component library in Storybook<\/a><\/li><\/ul><\/li><li><a href=\"#h-leverage-open-source-component-libraries-to-build-faster\" data-level=\"2\">Leverage Open-Source Component Libraries to Build Faster<\/a><\/li><li><a href=\"#h-prototyping-and-testing-in-uxpin-with-merge-technology\" data-level=\"2\">Prototyping and Testing in UXPin With Merge Technology<\/a><\/li><\/ul><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Component libraries help unify code for improved front-end cohesion and consistency. It also minimizes how much code developers must write to release new products and features.<\/p>\n\n\n\n<p>Most engineers decide to build a component library because they recognize one of several common problems:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>UI inconsistencies\u2013multiple variations of the same component<\/li>\n\n\n\n<li>Programming syntax and markup inconsistencies\u2013different ways of writing and structuring code<\/li>\n\n\n\n<li>Ever-increasing <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/\" target=\"_blank\" rel=\"noreferrer noopener\">front-end debt<\/a>\u2013backlog of programming bugs and fixes<\/li>\n\n\n\n<li>Missed deadlines due to redundant programming and workflows<\/li>\n<\/ul>\n\n\n\n<p>A component library aims to solve or reduce these issues while providing engineering teams with a scalable front-end framework.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-1-create-interface-inventory\">Step 1. Create Interface Inventory<\/h2>\n\n\n\n<p>An interface inventory or UI audit is a crucial first step. Audits often uncover many UI and programming inconsistencies engineers must address before building a component library. Sometimes these inconsistencies are subtle, like two slightly different HEX codes, while others are more obvious, like multiple button variants (various sizes, shapes, colors, CTAs, etc.)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/error-mistake-wrong-fail-prototyping.png\" alt=\"error mistake wrong fail prototyping\" class=\"wp-image-37980\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/error-mistake-wrong-fail-prototyping.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/error-mistake-wrong-fail-prototyping-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Design systems expert Brad Frost recommends <a href=\"https:\/\/bradfrost.com\/blog\/post\/interface-inventory\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">screenshotting every user interface and cutting out each component<\/a>. It&#8217;s a tedious, time-consuming but essential task to take stock. It&#8217;s important to do this inside the actual product rather than relying on project files because it&#8217;ll tell you exactly what customers see and expose any errors\/inconsistencies.<\/p>\n\n\n\n<p>Sort your components into categories to see what you&#8217;re working with. These categories will also form the foundation for your component library.<\/p>\n\n\n\n<p>If you need help sorting your component types, consider copying Google&#8217;s <a href=\"https:\/\/m3.material.io\/components\" target=\"_blank\" rel=\"noreferrer noopener\">Material Design<\/a> or Apple&#8217;s <a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/components\/all-components\" target=\"_blank\" rel=\"noreferrer noopener\">Human Interface Guidelines<\/a>. Alternatively, you can use <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">Atomic Design<\/a> to organize UI elements.<\/p>\n\n\n\n<p>An interface inventory is also an excellent resource for advocating your component library to stakeholders. Showing these inconsistencies is often the best way to demonstrate the scale of the problem and the necessity to allocate resources for a component library.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-2-select-tools-and-framework\">Step 2. Select Tools and Framework<\/h2>\n\n\n\n<p>Once you know what to build, you must decide how to build it. If you&#8217;re using a Javascript framework (React, Angular, Vue, etc.), we recommend using <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook<\/a> to develop and manage individual components.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/logo-storybook.png\" alt=\"logo storybook\" class=\"wp-image-37008\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/logo-storybook.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/logo-storybook-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Storybook allows engineers to build and test components in isolation. You can also create documentation, set up development workflows, and collaborate with engineers and stakeholders.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syncing-design-and-development\">Syncing design and development<\/h3>\n\n\n\n<p>The added benefit of Storybook is that it syncs with <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a>\u2013technology for <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-component-driven-prototyping\/\" target=\"_blank\" rel=\"noreferrer noopener\">component-driven prototyping<\/a>. So, once your component library is complete, you can connect it to UXPin so design teams can build fully functioning prototypes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/logo-uxpin-merge-1.png\" alt=\"logo uxpin merge 1\" class=\"wp-image-37006\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/logo-uxpin-merge-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/logo-uxpin-merge-1-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Merge isn&#8217;t only for UX designers. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/teampassword-uxpin-merge-case-study\/\" target=\"_blank\" rel=\"noreferrer noopener\">TeamPassword<\/a> doesn&#8217;t have a design team, so the engineering team (of two) must prototype and test user interfaces. TeamPassword used to do this by writing code but wanted a faster method for prototyping and testing.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"501\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/uxpin-merge-component-sync.png\" alt=\"uxpin merge component sync\" class=\"wp-image-37004\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/uxpin-merge-component-sync.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/uxpin-merge-component-sync-449x300.png 449w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/teampassword-uxpin-merge-case-study\/\" target=\"_blank\" rel=\"noreferrer noopener\">TeamPassword syncs its custom MUI component library to UXPin using Merge technology<\/a>, where they build and test prototypes.\u00a0<\/p>\n\n\n\n<p><em>&#8220;<\/em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/teampassword-uxpin-merge-case-study\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>The process of taking the finished design and developing it into a product got way faster, too<\/em><\/a><em>. It is so rapid to export the prototype with all the specification and production-ready code. The time that the team normally had to spend on writing front-end code is saved.&#8221;<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-3-get-components\">Step 3. Get Components<\/h2>\n\n\n\n<p>With your list of components and corresponding categories from the interface audit, it&#8217;s time to develop your component library\u2013<em>but where do you start?&nbsp;<\/em><\/p>\n\n\n\n<p>Here are some techniques for building a component library from scratch. We&#8217;ve also included some technical resources for developing your library in Storybook.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/design-system-library-components.png\" alt=\"design system library components\" class=\"wp-image-32904\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/design-system-library-components.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/design-system-library-components-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>We recommend following <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">Brad Frost&#8217;s Atomic Design<\/a> methodology to develop components from the ground up. This method will create a modular system to build new patterns and scale your component library.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-atoms\">Atoms<\/h3>\n\n\n\n<p>Atoms are components you cannot break down further. They&#8217;re also the building blocks or dependencies for the rest of your component library. Atoms include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Labels<\/li>\n\n\n\n<li>Input fields<\/li>\n\n\n\n<li>Buttons<\/li>\n\n\n\n<li>Color palettes<\/li>\n\n\n\n<li>Fonts<\/li>\n\n\n\n<li>Icons<\/li>\n\n\n\n<li>Animations<\/li>\n\n\n\n<li>Design tokens<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-molecules\">Molecules<\/h3>\n\n\n\n<p>Multiple atoms combine to construct molecules\u2013the individual UI components users interact with, including forms, tabs, accordions, etc. For example, a search component = label + text field + button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-organisms\">Organisms<\/h3>\n\n\n\n<p>Organisms are UI patterns that combine two or more molecules. A navigation bar is a common organism example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Logo (molecule)<\/li>\n\n\n\n<li>Navigational links (molecule)<\/li>\n\n\n\n<li>Search bar (molecule)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-templates\">Templates<\/h3>\n\n\n\n<p>Templates feature multiple organisms and molecules to make a complete user interface. These templates help eliminate redundant workflows to deliver products faster. Some examples include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Admin UIs<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/dashboard-vs-data-report-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Enterprise dashboard<\/a><\/li>\n\n\n\n<li>Product news feed<\/li>\n\n\n\n<li>eCommerce shopping cart<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-design-tokens\">Design tokens<\/h3>\n\n\n\n<p>Design tokens are vital for building scalable cross-platform component libraries. These tokens contain UI data, including colors, spacing, typography, assets, animations, etc., to style UI components.<\/p>\n\n\n\n<p>A single token contains properties formatted for each platform. For example, Android, iOS, and web browsers use different measurement units:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Websites and web applications (pixels\/em\/rem):<\/strong> 1 pixel<\/li>\n\n\n\n<li><strong>Android (dp density-independent pixels\/dips):<\/strong> 1 pixel = 1dp<\/li>\n\n\n\n<li><strong>iOS (points):<\/strong> 1 pixel = 0.75pt<\/li>\n<\/ul>\n\n\n\n<p>Engineers can program a token to accommodate each unit of measurement to ensure consistency across every operating system.&nbsp;<\/p>\n\n\n\n<p>Design tokens also make updates much more straightforward. Instead of modifying multiple files, engineers update the token to make cross-platform changes.<\/p>\n\n\n\n<p>Creating design tokens from the start reduces redundant work while building your component library while future-proofing your code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-remember-documentation\">Remember documentation!<\/h3>\n\n\n\n<p>The most common recommendation from people who have built component libraries from scratch is documentation! Your component library&#8217;s docs make collaboration easier by informing other engineers how to develop and maintain components.<\/p>\n\n\n\n<p>You should document every component as you complete it while it&#8217;s fresh in your memory. Additionally, you should document every change.<\/p>\n\n\n\n<p><a href=\"https:\/\/vaadin.com\/blog\/building-and-maintaining-the-component-library-of-a-design-system\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Mikael Sukoinen from Vaadin recommends documenting each component<\/a> as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Overview: component name and description<\/li>\n\n\n\n<li>Instructions: how to install and use the component<\/li>\n\n\n\n<li>Visual examples: demonstrating a use case for the component<\/li>\n\n\n\n<li>Code samples: how to use the component&#8217;s API<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/file-folder.png\" alt=\"file folder\" class=\"wp-image-37982\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/file-folder.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/file-folder-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Your documentation must also include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HTML, CSS, and Javascript guidelines<\/li>\n\n\n\n<li>Testing components<\/li>\n\n\n\n<li>Instructions for props for React components (or Args in Storybook)<\/li>\n\n\n\n<li>Versioning<\/li>\n\n\n\n<li>How to collaborate and share work (project management tools like Jira, Trello, Notion, etc.)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-building-a-component-library-in-storybook\">Building a component library in Storybook<\/h3>\n\n\n\n<p>Here are some technical guides for building a component library:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-build-js-components-with-storybook\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">How To Build JS Components with Storybook<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/blog.logrocket.com\/build-a-react-native-component-library-with-storybook\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Build a React Native component library with Storybook<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/medium.com\/angular-in-depth\/how-to-build-a-component-library-with-angular-and-storybook-718278ab976\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">How to Build a Component Library with Angular and Storybook<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/auth0.com\/blog\/building-a-component-library-with-react-and-storybook\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Building a Component Library with React and Storybook<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.reactnativeschool.com\/building-a-component-library\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Build a Component Library with Storybook<\/a> (step-by-step tutorial)<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">Atomic Design Systems: A Checklist for Each Individual Design Component<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/storybook-best-practices-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook Best Practices That Will Improve Your Product Development Process<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/storybook-frameworks-build-component-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook Frameworks You Can Use to Build Component Libraries<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-leverage-open-source-component-libraries-to-build-faster\">Leverage Open-Source Component Libraries to Build Faster<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-react-component-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\">Open-source component libraries<\/a> provide a foundation to build a component library fast. Engineers also benefit from a scalable syntax\u2013a process requiring many hours of friction and debate among developers.<\/p>\n\n\n\n<p>Customization is the most important thing to consider when <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-react-component-libraries\/#h-6-things-to-consider-when-choosing-a-react-component-library\" target=\"_blank\" rel=\"noreferrer noopener\">choosing an open-source component library<\/a>. Make sure the library is themeable, preferably through design tokens. You also want something that&#8217;s regularly maintained with comprehensive documentation.<\/p>\n\n\n\n<p>While open-source component libraries are themeable, there are limits to how much customization you can do to get a unique aesthetic. You&#8217;re also constrained by the library&#8217;s syntax and design language, so do your research before making a final decision.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-prototyping-and-testing-in-uxpin-with-merge-technology\">Prototyping and Testing in UXPin With Merge Technology<\/h2>\n\n\n\n<p>Storybook is an excellent tool for building your components in isolation and testing them internally\u2013<em>but what about user testing?<\/em> Unfortunately, Storybook has limitations regarding usability testing in browsers or mobile devices.<\/p>\n\n\n\n<p>Yes, you can build a prototype with code, but making changes and iterating is time-consuming.<\/p>\n\n\n\n<p>Merge allows you to import your component library from a repository to UXPin&#8217;s design editor so you can build prototypes to test your new component library. Merge creates a drag-and-drop prototyping environment, eliminating the steep learning curve required for traditional design tools.<\/p>\n\n\n\n<p>This prototyping workflow has worked for tech giant PayPal and a startup of five, TeamPassword. Interestingly, both organizations switched to Merge due to UX scalability challenges. PayPal and TeamPassword have teams with little or no design experience completing UX tasks like prototyping and testing using Merge.<\/p>\n\n\n\n<p>PayPal had five UX designers to over 1,000 engineers servicing more than 60 products. After switching to UXPin Merge, PayPal&#8217;s product teams (who had no previous design tool experience) <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/paypal-scaled-design-process-uxpin-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">complete 90% of design projects 8X faster<\/a> than experienced UX designers could using image-based tools.<\/p>\n\n\n\n<p>As a cash-strapped startup, TeamPassword doesn&#8217;t have the resources for a UX team but understands the importance of user experience to be competitive. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/teampassword-uxpin-merge-case-study\/\" target=\"_blank\" rel=\"noreferrer noopener\">Merge gives TeamPassword&#8217;s two-person engineering team a platform to prototype and test user interfaces<\/a> with end-users\u2013filling the UX designer void. Like PayPal, TeamPassword delivers products and features faster with Merge.<\/p>\n\n\n\n<p>Building a component library requires significant resources. Often engineers don&#8217;t have access to a UX team or the knowledge to create and test components using a design tool. UXPin Merge bridges the gap between design and development, so designers and engineers speak the same language.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a> empowers designers to build superior prototypes and solve more problems during design projects, but it also empowers engineers to prototype and test in situations where they don&#8217;t have UX resources.<\/p>\n\n\n\n<p>Build your component library with Storybook and UXPin Merge. <a href=\"https:\/\/www.uxpin.com\/merge\/developers\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Merge page<\/a> for more details and how to request access.<\/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>Whether you&#8217;re creating a design system from scratch or want better front-end development cohesion and consistency, building a component library is an excellent way to improve your product&#8217;s user experience. A component library will save you significant time in the long run, but it will require a lot of resources and attention to detail to<\/p>\n","protected":false},"author":3,"featured_media":37978,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,442,183,199],"tags":[],"class_list":["post-37977","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-component-driven-prototyping","category-design-leadership","category-design-systems"],"yoast_title":"","yoast_metadesc":"How to build a component library? With this guide, it's easy! Get a step-by-step instructions of creating a component library.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Building a Component Library \u2013 A Step-by-Step Guide | UXPin<\/title>\n<meta name=\"description\" content=\"How to build a component library? With this guide, it&#039;s easy! Get a step-by-step instructions of creating a component library.\" \/>\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\/building-component-library-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Component Library \u2013 A Step-by-Step Guide\" \/>\n<meta property=\"og:description\" content=\"How to build a component library? With this guide, it&#039;s easy! Get a step-by-step instructions of creating a component library.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/building-component-library-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-13T15:15:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-14T15:55:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/building-component-library.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\\\/building-component-library-guide\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/building-component-library-guide\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Building a Component Library \u2013 A Step-by-Step Guide\",\"datePublished\":\"2022-12-13T15:15:36+00:00\",\"dateModified\":\"2022-12-14T15:55:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/building-component-library-guide\\\/\"},\"wordCount\":1713,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/building-component-library-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/building-component-library.png\",\"articleSection\":[\"Blog\",\"Component-Driven Prototyping\",\"Design Leadership\",\"Design Systems\"],\"inLanguage\":\"en-US\",\"accessibilityFeature\":[\"tableOfContents\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/building-component-library-guide\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/building-component-library-guide\\\/\",\"name\":\"Building a Component Library \u2013 A Step-by-Step Guide | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/building-component-library-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/building-component-library-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/building-component-library.png\",\"datePublished\":\"2022-12-13T15:15:36+00:00\",\"dateModified\":\"2022-12-14T15:55:54+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"How to build a component library? With this guide, it's easy! Get a step-by-step instructions of creating a component library.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/building-component-library-guide\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/building-component-library-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/building-component-library-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/building-component-library.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/building-component-library.png\",\"width\":1200,\"height\":600,\"caption\":\"building component library\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/building-component-library-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a Component Library \u2013 A Step-by-Step 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":"Building a Component Library \u2013 A Step-by-Step Guide | UXPin","description":"How to build a component library? With this guide, it's easy! Get a step-by-step instructions of creating a component library.","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\/building-component-library-guide\/","og_locale":"en_US","og_type":"article","og_title":"Building a Component Library \u2013 A Step-by-Step Guide","og_description":"How to build a component library? With this guide, it's easy! Get a step-by-step instructions of creating a component library.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/building-component-library-guide\/","og_site_name":"Studio by UXPin","article_published_time":"2022-12-13T15:15:36+00:00","article_modified_time":"2022-12-14T15:55:54+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/building-component-library.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\/building-component-library-guide\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/building-component-library-guide\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Building a Component Library \u2013 A Step-by-Step Guide","datePublished":"2022-12-13T15:15:36+00:00","dateModified":"2022-12-14T15:55:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/building-component-library-guide\/"},"wordCount":1713,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/building-component-library-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/building-component-library.png","articleSection":["Blog","Component-Driven Prototyping","Design Leadership","Design Systems"],"inLanguage":"en-US","accessibilityFeature":["tableOfContents"]},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/building-component-library-guide\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/building-component-library-guide\/","name":"Building a Component Library \u2013 A Step-by-Step Guide | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/building-component-library-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/building-component-library-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/building-component-library.png","datePublished":"2022-12-13T15:15:36+00:00","dateModified":"2022-12-14T15:55:54+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"How to build a component library? With this guide, it's easy! Get a step-by-step instructions of creating a component library.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/building-component-library-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/building-component-library-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/building-component-library-guide\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/building-component-library.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/building-component-library.png","width":1200,"height":600,"caption":"building component library"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/building-component-library-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Building a Component Library \u2013 A Step-by-Step 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\/37977","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=37977"}],"version-history":[{"count":2,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/37977\/revisions"}],"predecessor-version":[{"id":37985,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/37977\/revisions\/37985"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/37978"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=37977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=37977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=37977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}