{"id":33751,"date":"2022-03-17T12:34:00","date_gmt":"2022-03-17T19:34:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=33751"},"modified":"2022-11-17T09:08:50","modified_gmt":"2022-11-17T17:08:50","slug":"design-system-development","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-development\/","title":{"rendered":"How to Work With the Development Team on a Design System?"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/S1h0a4hCRIKFYpZDOJ3cQsEn9jio3194LGJdjDqfwwIFtVasXsmL0gZdNyqRn2kiesjkWzflGAaza17VwhyLdQxZBxW4O-BSo8l68CPfbKx6_9fy7BXKy4AC1Bziv3k25sgdKCZV\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Developing a design system is not about aesthetics and making things look pretty. It&#8217;s a powerful design tool that improves cohesion and consistency, reduces time-to-market, and enhances collaboration between teams.<\/p>\n\n\n\n<p>In our free eBook, <em><a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design Systems: Step-by-Step Guide to Creating Your Own<\/a><\/em>, we succinctly define a design system and its purpose as follows:&nbsp;<\/p>\n\n\n\n<p><em>&#8220;The primary purpose of design systems is to increase efficiency in product development. With a consistent design language in place, it becomes easier to design products at scale that are consistent in aesthetics, user interface, and user experience. Design systems also promote collaboration, since handoffs across distributed teams become easier.&#8221;<\/em><\/p>\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-design-system-vs-style-guide-vs-ui-kit\" data-level=\"2\">Design System vs. Style Guide vs. UI Kit<\/a><ul><li><a href=\"#h-design-system\" data-level=\"3\">Design System<\/a><\/li><li><a href=\"#h-style-guide\" data-level=\"3\">Style Guide<\/a><\/li><li><a href=\"#h-ui-kit\" data-level=\"3\">UI Kit<\/a><\/li><\/ul><\/li><li><a href=\"#h-why-engineers-designers-must-collaborate-to-develop-a-design-system\" data-level=\"2\">Why Engineers &amp; Designers Must Collaborate to Develop a Design System<\/a><ul><li><a href=\"#h-bridging-the-gap\" data-level=\"3\">Bridging the Gap<\/a><\/li><li><a href=\"#h-aligning-constraints\" data-level=\"3\">Aligning Constraints<\/a><\/li><li><a href=\"#h-design-system-governance\" data-level=\"3\">Design System Governance<\/a><\/li><li><a href=\"#h-design-system-maturity\" data-level=\"3\">Design System Maturity<\/a><\/li><\/ul><\/li><li><a href=\"#h-building-and-scaling-a-design-system-with-uxpin-storybook\" data-level=\"2\">Building and Scaling a Design System With UXPin &amp; Storybook<\/a><ul><li><a href=\"#h-starting-from-scratch\" data-level=\"3\">Starting from Scratch<\/a><\/li><li><a href=\"#h-set-up-a-storybook\" data-level=\"3\">Set up a Storybook<\/a><\/li><li><a href=\"#h-sync-to-uxpin\" data-level=\"3\">Sync to UXPin<\/a><\/li><li><a href=\"#h-giving-designers-control-through-args\" data-level=\"3\">Giving Designers Control Through Args<\/a><\/li><li><a href=\"#h-streamline-design-handoffs\" data-level=\"3\">Streamline Design Handoffs<\/a><\/li><li><a href=\"#h-iterate-and-scale\" data-level=\"3\">Iterate and Scale<\/a><\/li><\/ul><\/li><li><a href=\"#h-scaling-design-with-uxpin-merge\" data-level=\"2\">Scaling Design With UXPin Merge<\/a><ul><li><a href=\"#h-how-paypal-scaled-design-with-merge\" data-level=\"3\">How PayPal Scaled Design With Merge<\/a><\/li><\/ul><\/li><\/ul><\/div>\n\n\n\n<p>Enhance team collaboration and streamline design handoffs with UXPin. Simplify design system use, sharing, and maintenance with UXPin Merge, a technology that allows you to bring interactive components from a component library and use them to create powerful prototypes that can be easily shared with development team. <a href=\"https:\/\/uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Request more information about UXPin Merge<\/a>.<\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <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-design-system-vs-style-guide-vs-ui-kit\">Design System vs. Style Guide vs. UI Kit<\/h2>\n\n\n\n<p>Design system, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-interface-style-guides\/\" target=\"_blank\" rel=\"noreferrer noopener\">style guide<\/a>, and UI kit are not the same. Let&#8217;s explore differences between them. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-design-system\">Design System<\/h3>\n\n\n\n<p>An <strong>entire system<\/strong> including pattern libraries, components, iconography, typography, style guides, design principles, guidelines (design\/copy\/code), governance, assets, and other documentation.&nbsp;<\/p>\n\n\n\n<p>Design systems usually include a UI kit for designers and code snippets for developers. With <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a>, designers and developers use a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-code-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">single code-based design system<\/a> hosted in a repository creating a single source of truth across the organization.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-style-guide\">Style Guide<\/h3>\n\n\n\n<p>A <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/style-guide-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">style guide<\/a> comprises of <strong>written guidelines and visual references<\/strong> for a product, including typography, color, UI components, assets, and other elements. Simply put, a style guide tells you <em>how to use a design system&#8217;s UI elements<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ui-kit\">UI Kit<\/h3>\n\n\n\n<p>A <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-use-ui-kits-to-create-quicker-mockups\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI kit<\/a> is an <strong>image-based version of a design system or component library<\/strong> that designers use to build user interfaces. UI kits have no functionality, but designers can use its elements and components to build prototypes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-engineers-designers-must-collaborate-to-develop-a-design-system\">Why Engineers &amp; Designers Must Collaborate to Develop a Design System<\/h2>\n\n\n\n<p>One of the most significant benefits of a design system is optimized workflows for designers and developers.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Designers <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-code-tutorial\/https:\/\/www.uxpin.com\/studio\/blog\/design-workflow-with-code-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">drag-and-drop components<\/a> to build UIs<\/li>\n\n\n\n<li>Engineers copy\/paste code snippets to develop the final product<\/li>\n<\/ul>\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-and-development-collaboration-process-product-communication-1.png\" alt=\"design and development collaboration process product communication 1\" class=\"wp-image-32885\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/design-and-development-collaboration-process-product-communication-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/design-and-development-collaboration-process-product-communication-1-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/better-design-handoff\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design handoffs<\/a> go much smoother because engineers are familiar with components and require less explanation to understand the UIs.<\/p>\n\n\n\n<p>A <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/codifying-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">fully-integrated design system<\/a> eliminates design drift, reduces friction, and streamlines QA processes, significantly reducing time-to-market. All of which benefit designers and developers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bridging-the-gap\">Bridging the Gap<\/h3>\n\n\n\n<p>Designers and developers often use separate naming conventions or references\u2013a button is a visual component to a designer and a few lines of code for a developer. Design systems provide designers and engineers with a single design language.<\/p>\n\n\n\n<p>For example, design tokens define values for typography, color, spacing, and other UI elements, so designers and engineers speak the same language. Instead of using HEX or RGB codes for the brand&#8217;s color, team members reference a design token, e.g., brand-primary.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-aligning-constraints\">Aligning Constraints<\/h3>\n\n\n\n<p>When designers and engineers work together on a design system, they factor in one another&#8217;s constraints. So, when designers design a new product or interface, they don&#8217;t have to worry about drift or exceeding technical limitations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-design-system-governance\">Design System Governance<\/h3>\n\n\n\n<p>Implementing a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-governance\/\" target=\"_blank\" rel=\"noreferrer noopener\">system of governance<\/a> is crucial for a design system to scale and evolve. Designers and engineers must work together to develop the processes and protocols teams must follow to update the design system.<\/p>\n\n\n\n<p>These processes are especially important for products that must sync separate design systems for design and development\u2013one image-based for designers and the other code components for engineers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-design-system-maturity\">Design System Maturity<\/h3>\n\n\n\n<p>The ultimate goal is to have a single design system that automatically syncs design and development. Nick Elliott talks about the stages of <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> and its impact on design and development in his article, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/iress-design-tool-review\/\" target=\"_blank\" rel=\"noreferrer noopener\">Re-Imagining Iress Design Tools<\/a>.<\/p>\n\n\n\n<p>Nick says the ultimate goal is to reach stage four: <em>&#8220;a single source of truth where designers and engineers are using the same design system components.&#8221;<\/em><\/p>\n\n\n\n<p>Tools like UXPin and Storybook can help bridge the gap between design and development, so the entire organization uses a single design system.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-building-and-scaling-a-design-system-with-uxpin-storybook\">Building and Scaling a Design System With UXPin &amp; Storybook<\/h2>\n\n\n\n<p>UXPin Merge and Storybook are the ultimate design system tools. With this combination, you can create an end-to-end, fully integrated design system:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Design UI elements and components from scratch in UXPin<\/li>\n\n\n\n<li>Engineers convert designs to code and <a href=\"https:\/\/storybook.js.org\/docs\/react\/get-started\/introduction\" target=\"_blank\" rel=\"noreferrer noopener\">set up a Storybook<\/a> (available for React, Vue, Web Components, Angular, <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">and more<\/a>)<\/li>\n\n\n\n<li>Use UXPin Merge&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/storybook-integration\/\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook integration<\/a> to sync the design system to UXPin&#8217;s editor<\/li>\n\n\n\n<li>Designers build new products and features using the Storybook design system in UXPin<\/li>\n\n\n\n<li>At design handoff, engineers copy\/paste components to begin development<\/li>\n<\/ol>\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\/02\/logo-storybook.png\" alt=\"logo storybook\" class=\"wp-image-33756\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/logo-storybook.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/logo-storybook-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-starting-from-scratch\">Starting from Scratch<\/h3>\n\n\n\n<p>Designers design UI elements and save them as Components to a <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-systems\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design System in UXPin<\/a>. Features like <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/auto-layout\" target=\"_blank\" rel=\"noreferrer noopener\">Auto-Layout<\/a> allow designers to automatically resize, fit, and fill designs making editing and scaling designs much faster.<\/p>\n\n\n\n<p>With UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/spec-mode\/\" target=\"_blank\" rel=\"noreferrer noopener\">Spec Mode<\/a>, developers can <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/spec-mode\/#inspecting-properties\" target=\"_blank\" rel=\"noreferrer noopener\">inspect a component&#8217;s properties<\/a>, <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/spec-mode\/#distance-measurement\" target=\"_blank\" rel=\"noreferrer noopener\">measure distances<\/a> between UI elements, and access a <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/spec-mode\/#style-guide\" target=\"_blank\" rel=\"noreferrer noopener\">style guide<\/a> with colors, typography, assets, and supporting documentation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-set-up-a-storybook\">Set up a Storybook<\/h3>\n\n\n\n<p>Engineers can use this information to convert designs into code components. They can then <a href=\"https:\/\/storybook.js.org\/tutorials\/intro-to-storybook\/react\/en\/get-started\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">set up a Storybook<\/a> that allows teams to view and test components in isolation.<\/p>\n\n\n\n<p>Engineers can even invite designers to Storybook to perform QA and collaborate to make necessary changes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-sync-to-uxpin\">Sync to UXPin<\/h3>\n\n\n\n<p>Once designers and engineers have completed the initial QA, they can <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">sync Storybook to UXPin<\/a>. Once the initial sync is complete, all future updates are automatic. Any changes you make in Storybook automatically update in UXPin&#8217;s design editor, and team members get notified.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-giving-designers-control-through-args\">Giving Designers Control Through Args<\/h3>\n\n\n\n<p>Engineers can use <a href=\"https:\/\/storybook.js.org\/docs\/react\/writing-stories\/args\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Storybook Args<\/a> to give teams control but also set constraints. For example, engineers can create four states for a button and define multiple properties so designers only select default, primary, secondary, or disabled.<\/p>\n\n\n\n<p>These constraints make it easy for designers to create consistent designs that meet the design system&#8217;s specifications.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-streamline-design-handoffs\">Streamline Design Handoffs<\/h3>\n\n\n\n<p>Design handoffs are effortless with UXPin and Storybook. Engineers can replicate any changes to the component&#8217;s Args in Storybook and invite designers to perform QA.<\/p>\n\n\n\n<p>Next, engineers can update the repository, and the changes automatically sync to UXPin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-iterate-and-scale\">Iterate and Scale<\/h3>\n\n\n\n<p>If the design system team wants to make changes, designers can start from scratch in UXPin and repeat the process. It&#8217;s quick and easy to scale with UXPin and Storybook because the DS team only needs to manage one design system using two tools!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-scaling-design-with-uxpin-merge\">Scaling Design With UXPin Merge<\/h2>\n\n\n\n<p>In our January 2022 webinar, <em>Defending Your Design System<\/em>, keynote speaker Carola Cassaro (Product Manager at <a href=\"https:\/\/work.co\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Work&amp;Co<\/a> and part of the team that developed IKEA&#8217;s design system) summarized the benefits of a design system beautifully&#8230;&nbsp;<\/p>\n\n\n\n<p><em>&#8220;Design systems have evolved to be more than just components and tools. They democratized design processes and best practices to empower product teams and businesses to <\/em><strong><em>ship great work at scale<\/em><\/strong><em>.&#8221;<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-paypal-scaled-design-with-merge\">How PayPal Scaled Design With Merge<\/h3>\n\n\n\n<p>Even though PayPal used <a href=\"https:\/\/developer.microsoft.com\/en-us\/fluentui#\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Microsoft&#8217;s Fluent design system<\/a>, they battled with inconsistencies. Using image-based design tools meant designers and engineers had separate design systems, <em>&#8220;The result was a range of usability and design consistency issues-no two products looked the same!&#8221;<\/em><\/p>\n\n\n\n<p>PayPal also had a disproportional designer\/developer ratio with five designers and over 1,000 engineers across 60-100 internal products. To put that into perspective, an <a href=\"https:\/\/www.nngroup.com\/articles\/ux-developer-ratio\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">NN Group survey<\/a> found that most companies operate on a 1-to-10 designer\/developer ratio.<\/p>\n\n\n\n<p>And PayPal wasn&#8217;t prepared to scale its design team. Erica Rider, Senior Manager for UX \u2013 Developer tools and platform experience at PayPal, had to figure out <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/paypal-scaled-design-process-uxpin-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">how to scale design<\/a> without adding to the payroll!<\/p>\n\n\n\n<p>After trying several solutions, Erica decided to give UXPin Merge a try. PayPal used Fluent&#8217;s React front-end framework, which they connected to UXPin using <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Merge&#8217;s Git integration<\/a>.<\/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\/02\/uxpin-merge-react-sync-library-git.png\" alt=\"uxpin merge react sync library git\" class=\"wp-image-33758\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/uxpin-merge-react-sync-library-git.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/uxpin-merge-react-sync-library-git-449x300.png 449w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>With everything set up, PayPal decided to test UXPin Merge with a side-by-side using an image-based design tool. One of PayPal&#8217;s experienced UX designers built an identical one-page prototype using each tool\u2013the results far exceeded expectations:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Image-based design tool:<\/strong> Over an hour with limited functionality and fidelity<\/li>\n\n\n\n<li><strong>UXPin Merge:<\/strong> Eight minutes with fully functional code components<\/li>\n<\/ul>\n\n\n\n<p>PayPal&#8217;s small team of UX designers taught product teams (who had no experience using design tools) how to use UXPin. They now design and update all of PayPal&#8217;s internal products, with UX designers only stepping in to fix challenging usability issues and provide mentoring.&nbsp;<\/p>\n\n\n\n<p>PayPal&#8217;s product teams now complete and deliver a product in the same it used to take to design a mockup\u2013significantly reducing time-to-market! Some of the other benefits include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>From concept to prototyping immediately<\/li>\n\n\n\n<li>Better feedback from stakeholders<\/li>\n\n\n\n<li>Improved team\/stakeholder collaboration using UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/comments\" target=\"_blank\" rel=\"noreferrer noopener\">Comments<\/a><\/li>\n\n\n\n<li>Streamlined end-to-end workflow<\/li>\n\n\n\n<li>Dramatic improvement in quality<\/li>\n\n\n\n<li>Enhanced user testing with the ability to make quick changes on the fly and get immediate feedback<\/li>\n\n\n\n<li>UX designers have more time to focus on PayPal&#8217;s <em>&#8220;larger UX initiatives that impact the organization globally.&#8221;<\/em><\/li>\n<\/ul>\n\n\n\n<p>You can build, maintain, and scale your design system with UXPin Merge. Read more about it and request access to it. <a href=\"https:\/\/uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover Merge<\/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\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Developing a design system is not about aesthetics and making things look pretty. It&#8217;s a powerful design tool that improves cohesion and consistency, reduces time-to-market, and enhances collaboration between teams. In our free eBook, Design Systems: Step-by-Step Guide to Creating Your Own, we succinctly define a design system and its purpose as follows:&nbsp; &#8220;The primary<\/p>\n","protected":false},"author":3,"featured_media":33752,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,17,183,199],"tags":[],"class_list":["post-33751","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-collaboration-2","category-design-leadership","category-design-systems"],"yoast_title":"","yoast_metadesc":"Design Systems are more than UI kits. They consists of code components too. Learn to collaborate with development on a 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 Work With the Development Team on a Design System? | UXPin<\/title>\n<meta name=\"description\" content=\"Design Systems are more than UI kits. They consists of code components too. Learn to collaborate with development on a 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\/design-system-development\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Work With the Development Team on a Design System?\" \/>\n<meta property=\"og:description\" content=\"Design Systems are more than UI kits. They consists of code components too. Learn to collaborate with development on a design system.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-development\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-17T19:34:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-17T17:08:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/design-system-development.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=\"8 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\\\/design-system-development\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-development\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"How to Work With the Development Team on a Design System?\",\"datePublished\":\"2022-03-17T19:34:00+00:00\",\"dateModified\":\"2022-11-17T17:08:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-development\\\/\"},\"wordCount\":1636,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-development\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/design-system-development.png\",\"articleSection\":[\"Blog\",\"Collaboration\",\"Design Leadership\",\"Design Systems\"],\"inLanguage\":\"en-US\",\"accessibilityFeature\":[\"tableOfContents\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-development\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-development\\\/\",\"name\":\"How to Work With the Development Team on a Design System? | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-development\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-development\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/design-system-development.png\",\"datePublished\":\"2022-03-17T19:34:00+00:00\",\"dateModified\":\"2022-11-17T17:08:50+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Design Systems are more than UI kits. They consists of code components too. Learn to collaborate with development on a design system.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-development\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-development\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-development\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/design-system-development.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/design-system-development.png\",\"width\":1200,\"height\":600,\"caption\":\"design system development\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-development\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Work With the Development Team on a Design System?\"}]},{\"@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 Work With the Development Team on a Design System? | UXPin","description":"Design Systems are more than UI kits. They consists of code components too. Learn to collaborate with development on a 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\/design-system-development\/","og_locale":"en_US","og_type":"article","og_title":"How to Work With the Development Team on a Design System?","og_description":"Design Systems are more than UI kits. They consists of code components too. Learn to collaborate with development on a design system.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-development\/","og_site_name":"Studio by UXPin","article_published_time":"2022-03-17T19:34:00+00:00","article_modified_time":"2022-11-17T17:08:50+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/design-system-development.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-development\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-development\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"How to Work With the Development Team on a Design System?","datePublished":"2022-03-17T19:34:00+00:00","dateModified":"2022-11-17T17:08:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-development\/"},"wordCount":1636,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-development\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/design-system-development.png","articleSection":["Blog","Collaboration","Design Leadership","Design Systems"],"inLanguage":"en-US","accessibilityFeature":["tableOfContents"]},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-development\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-development\/","name":"How to Work With the Development Team on a Design System? | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-development\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-development\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/design-system-development.png","datePublished":"2022-03-17T19:34:00+00:00","dateModified":"2022-11-17T17:08:50+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Design Systems are more than UI kits. They consists of code components too. Learn to collaborate with development on a design system.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-development\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/design-system-development\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-development\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/design-system-development.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/design-system-development.png","width":1200,"height":600,"caption":"design system development"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-development\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How to Work With the Development Team on a Design System?"}]},{"@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\/33751","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=33751"}],"version-history":[{"count":7,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/33751\/revisions"}],"predecessor-version":[{"id":37568,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/33751\/revisions\/37568"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/33752"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=33751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=33751"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=33751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}