{"id":36999,"date":"2022-10-11T04:39:05","date_gmt":"2022-10-11T11:39:05","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=36999"},"modified":"2022-10-11T04:43:49","modified_gmt":"2022-10-11T11:43:49","slug":"dotsource-importance-of-single-source-of-truth","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/","title":{"rendered":"Using a Single Source of Truth with UXPin Merge \u2013 dotSource&#8217;s Case Study"},"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\/10\/dotSource-case-study-1024x512.png\" alt=\"dotSource case study\" class=\"wp-image-37000\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/dotSource-case-study-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/dotSource-case-study-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/dotSource-case-study-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/dotSource-case-study.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>We partnered with UXPin users <a href=\"https:\/\/www.dotsource.com\/references\/success-stories\/user-experience-design-best-practices\/?utm_source=partnerblogs&amp;utm_medium=referral&amp;utm_campaign=bp_uxd_en\" target=\"_blank\" rel=\"noreferrer noopener\">dotSource<\/a> to demonstrate how an agency working on multiple products, each with its own design system, leverages <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Merge technology<\/a> to create a single source of truth between design and development.<\/p>\n\n\n\n<p>Create a single source of truth for your product&#8217;s design system with UXPin Merge. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page for more details<\/a> and how to 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<h2 class=\"wp-block-heading\" id=\"h-who-is-dotsource\">Who is dotSource?<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.dotsource.com\/references\/success-stories\/user-experience-design-best-practices\/?utm_source=partnerblogs&amp;utm_medium=referral&amp;utm_campaign=bp_uxd_en\" target=\"_blank\" rel=\"noreferrer noopener\">dotSource<\/a> is a German-based digital product consulting and development agency that is <em>&#8220;transforming companies into digital champions.&#8221; <\/em>It has developed and implemented scalable digital products for marketing, sales, and services since 2006.<\/p>\n\n\n\n<p>dotSource has established itself as one of Europe&#8217;s leading digital agencies with brands like ESPRIT, hessnatur, Ottobock, TEAG, KWS, BayWa, Axel Springer, C.H.Beck, W\u00fcrth, and Netto Digital, trusting in the company&#8217;s vision and expertise.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-dotsource-design-team-and-process\">dotSource Design Team and Process<\/h3>\n\n\n\n<p>dotSource uses a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/human-centered-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">human-centered design process<\/a> for its projects regarding <a href=\"https:\/\/www.dotsource.com\/services\/user-experience-design-agency\/?utm_source=partnerblogs&amp;utm_medium=referral&amp;utm_campaign=bp_uxd_en\" target=\"_blank\" rel=\"noreferrer noopener\">UX design<\/a>, consulting, audit, and conversion optimization. Designers focus on future users for concept creation and design solutions.<\/p>\n\n\n\n<p>The company&#8217;s iterative design process ensures designers balance user needs with business goals while ensuring every project meets usability requirements and technical constraints.<\/p>\n\n\n\n<p>What we love most about dotSource is their passion for sharing UX knowledge. Check out the company&#8217;s free eBook, <a href=\"https:\/\/www.dotsource.com\/?utm_source=partnerblogs&amp;utm_medium=referral&amp;utm_campaign=bp_uxd_en\" target=\"_blank\" rel=\"noreferrer noopener\"><em>User Experience Design Best Practices<\/em><\/a>.<\/p>\n\n\n\n<p>We now hand over to dotSource to explain how they use UXPin Merge to create a single source of truth for their product development projects while eliminating redundant work, enhancing cross-functional collaboration, and improving user experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-fighting-chaos-with-a-single-source-of-truth\">Fighting Chaos with a Single Source of Truth<\/h2>\n\n\n\n<p>Promoting new patterns and components to a design system is chaotic, with many redundant processes. Most design system releases require updating in at least three places:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>The design system&#8217;s codebase (<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-component-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">component library<\/a>)<\/li><li>The design team&#8217;s <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> (design tool)<\/li><li>The design system&#8217;s documentation<\/li><\/ol>\n\n\n\n<p>Instead of a &#8220;single source of truth&#8221; that gives &#8220;three single sources of truth&#8221; for every UI component\u2013<em>this seems counterintuitive and increases errors.<\/em> If the design system&#8217;s update process and technologies don&#8217;t align, the team ends up with redundant work because a single change requires three updates.<\/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\/10\/designops-picking-tools-options.png\" alt=\"designops picking tools options\" class=\"wp-image-37016\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/designops-picking-tools-options.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/designops-picking-tools-options-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Such an update process introduces a high risk of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/3-step-guide-erasing-ux-debt\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX debt<\/a>. UI kits and documentation become outdated if the design system team doesn&#8217;t respond to changes fast enough. As UX debt piles up, so does the effort to find and work through it.<\/p>\n\n\n\n<p>The best way to circumvent these issues is to sync design, code, and documentation through a <strong><em>real<\/em><\/strong> <strong>single source of truth<\/strong> where:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>There are <strong>no inconsistencies<\/strong><\/li><li><strong>One change<\/strong> automatically syncs design and code<\/li><li>Documentation is <strong>always up to date<\/strong><\/li><li><strong>Seamless collaboration<\/strong> between design and development<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-single-source-of-truth-should-be-code-based\">Single Source of Truth Should be Code-Based<\/h2>\n\n\n\n<p>Once a design system component is converted to your preferred design tool&#8217;s format, it&#8217;s subject to the limitations of image-based prototyping\u2013resulting in a disconnect between design and development. The image-based component no longer has the fidelity, functionality, and interactivity afforded by HTML, CSS, and Javascript.<\/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\/10\/design-and-development-collaboration-process-product-communication-1.png\" alt=\"design and development collaboration process product communication 1\" class=\"wp-image-37012\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/design-and-development-collaboration-process-product-communication-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/design-and-development-collaboration-process-product-communication-1-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Switching to a code-based design workflow is the only way around these image-based limitations. A code-based prototyping tool like UXPin with Merge technology enables this workflow by rendering code (instead of vector graphics), just like a browser.<\/p>\n\n\n\n<p>In UXPin, UI components look and behave exactly as they do for developers, effectively bridging the gap between design and development\u2013<em>a <\/em><strong><em>real<\/em><\/strong><em> single source of truth.<\/em><\/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>We use UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook integration<\/a>, which allows designers to use our design system&#8217;s Storybook components in UXPin&#8217;s design editor. The result: a perfect synchronization of code, design, and documentation, making it possible for:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Designers to participate in QA and help developers identify bugs<\/li><li>Close collaboration between designers and engineers<\/li><li>Better testing and faster iterations with high-fidelity interactive components (<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-component-driven-prototyping\/\" target=\"_blank\" rel=\"noreferrer noopener\">component-driven prototyping<\/a>)<\/li><\/ul>\n\n\n\n<p>With this UXPin Merge workflow, we have overcome redundant processes and eliminated UX debt from design system updates. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/guide-design-consistency-best-practices-ui-ux-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX consistency<\/a> is no longer an issue, and we have no design drift.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-uxpin-merge-a-single-source-of-truth-at-work\">UXPin Merge\u2013<em>a single source of truth at work<\/em><\/h2>\n\n\n\n<p>dotSource&#8217;s design and delivery teams have relied on UXPin for several years. UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Merge technology<\/a> allows us to integrate React libraries through their <a href=\"https:\/\/www.uxpin.com\/merge\/git-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Git Integration<\/a> or <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook<\/a> for other frameworks, including Vue, Angular, Ember, etc.<\/p>\n\n\n\n<p>The design system team can use <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/start-with-a-boilerplate-repo\/#adding-components\" target=\"_blank\" rel=\"noreferrer noopener\">React props<\/a> or <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-are-args-story\/\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook Args<\/a> to define component properties and set constraints. For example, using a color property for a component&#8217;s primary, secondary, and disabled states. These three options appear as a dropdown in UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interface\/#properties-panel\" target=\"_blank\" rel=\"noreferrer noopener\">Properties Panel<\/a>.<\/p>\n\n\n\n<p>Setting these constraints eliminates inconsistencies and increases efficiency because designers never have to think about properties or basic interactivity\u2013<em>everything is &#8220;baked into\u201d the components.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-create-a-single-source-of-truth\">How to Create a Single Source of Truth<\/h2>\n\n\n\n<p>Software and technology provider <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/iress-design-tool-review\/\" target=\"_blank\" rel=\"noreferrer noopener\">Iress describes a single source of truth<\/a> as a fully integrated system with:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>One centrally maintained component library used by designers and engineers<\/li><li>No designing or coding from scratch (during the product development process)<\/li><li>No design drift<\/li><li>Flawless consistency<\/li><li>Seamless designer\/developer collaboration with almost no <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">handoff process<\/a><\/li><\/ul>\n\n\n\n<p>These reusable components include styles, code, and rules defined by the design system, enabling UI consistency across every touchpoint. The design system must be flexible, easy to maintain, and scalable to achieve this successfully.<\/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\/10\/design-system-components.png\" alt=\"design system components\" class=\"wp-image-37014\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/design-system-components.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/design-system-components-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Another crucial prerequisite, according to dotSource: <em>all stakeholders must be onboard!<\/em> They must see the benefit of using a design system and its efficiencies. They&#8217;ll be quick to point out that your &#8220;single source of truth&#8221; requires managing three vital components, increasing the possibility for drift and debt.<\/p>\n\n\n\n<p>The only way to create a single source of truth is through a code-based design workflow and tools like <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge and Storybook<\/a> to sync design and development while simultaneously updating documentation\u2013<em>one change automating three updates.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-thank-you-dotsource\">Thank You, dotSource!<\/h2>\n\n\n\n<p>We want to thank <a href=\"https:\/\/www.dotsource.com\/references\/success-stories\/user-experience-design-best-practices\/?utm_source=partnerblogs&amp;utm_medium=referral&amp;utm_campaign=bp_uxd_en\" target=\"_blank\" rel=\"noreferrer noopener\">dotSource<\/a> for sharing their experience as an agency using <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a> to improve designer\/developer collaboration and create a single source of truth for its product development projects, and continuing to <a href=\"https:\/\/www.handelskraft.com\/?utm_source=partnerblogs&amp;utm_medium=referral&amp;utm_campaign=bp_uxd_en\" target=\"_blank\" rel=\"noreferrer noopener\">spread knowledge about UX design on their blog<\/a>.<\/p>\n\n\n\n<p>dotSource uses UXPin Merge&#8217;s Storybook Integration. Here are some resources to learn more about how these technologies can benefit your product development workflows:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/storybook-component-library-for-your-product-team\/\" target=\"_blank\" rel=\"noreferrer noopener\">What is a Storybook and why you need it in your product team<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Import Your Components into Storybook and Use Them in UXPin<\/a><\/li><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><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><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/storybook-best-practices\/\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook Design System: It&#8217;s Time to Reap Its Many Benefits<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-getting-started-with-uxpin-merge\">Getting Started With UXPin Merge<\/h2>\n\n\n\n<p>UXPin Merge has a solution for product development teams at every level of maturity. Our npm integration is excellent for leveraging open source component libraries to build minimum viable products, add new components to an existing design system, or <a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">create a design system from scratch<\/a>.<\/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>Organizations have three options when syncing a design system:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/merge\/git-integration\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Git integration<\/strong><\/a><strong>:<\/strong> direct connection to React repositories<\/li><li><a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Storybook integration<\/strong><\/a><strong>:<\/strong> connecting a Storybook library for React, Vue, Ember, Angular, and <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">other frameworks<\/a><\/li><li><strong><a href=\"https:\/\/uxpin.com\/merge\/npm-integration\" target=\"_blank\" rel=\"noreferrer noopener\">npm integration<\/a><\/strong>: bringing UI components via npm packages<\/li><\/ul>\n\n\n\n<p>After the initial setup, every repository update automatically syncs to UXPin, notifying design teams of the new version. UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/version-control\" target=\"_blank\" rel=\"noreferrer noopener\">Version Control<\/a> allows designers to choose when to change to the latest release and switch to earlier versions if needed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-better-prototyping-and-testing\">Better Prototyping and Testing<\/h3>\n\n\n\n<p>One of UXPin Merge&#8217;s most significant benefits is the ability to build fully functioning prototypes that look and feel like the final product\u2013<em>prototypes that previously required front-end developer involvement.<\/em><\/p>\n\n\n\n<p>These fully functioning prototypes allow designers to test every aspect of the user experience, increasing a design project&#8217;s usability scope and effectiveness.<\/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>Designers can present accurate replicas of the final product to stakeholders who are able to interact with prototypes and deliver meaningful feedback.<\/p>\n\n\n\n<p><em>&#8220;There&#8217;s a lot more confidence from everyone (including designers, C-suite, directors, and developers) about what the final product will look like, the user experience, and interactivity\u2013giving us higher quality feedback from stakeholders.&#8221; <\/em>\u2013 <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/paypal-scaled-design-process-uxpin-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">Erica Rider UX Lead EPX @ PayPal<\/a><\/p>\n\n\n\n<p>Join the code-based design revolution with a component-driven solution from <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a>. Enhance design project workflows, increase cross-functional collaboration, and create seamless design handoffs to reduce time to market while delivering outstanding user experiences.\u00a0<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page for more details<\/a> and how to request access to this revolutionary technology.<\/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>We partnered with UXPin users dotSource to demonstrate how an agency working on multiple products, each with its own design system, leverages Merge technology to create a single source of truth between design and development. Create a single source of truth for your product&#8217;s design system with UXPin Merge. Visit our Merge page for more<\/p>\n","protected":false},"author":3,"featured_media":37000,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,17,442,199,71],"tags":[],"class_list":["post-36999","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-collaboration-2","category-component-driven-prototyping","category-design-systems","category-documentation"],"yoast_title":"How dotSource Uses a Single Source of Truth with UXPin Merge","yoast_metadesc":"Read what dotSource thinks about a single source of truth and why they picked UXPin Merge. Get tips on design-development collaboration.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How dotSource Uses a Single Source of Truth with UXPin Merge<\/title>\n<meta name=\"description\" content=\"Read what dotSource thinks about a single source of truth and why they picked UXPin Merge. Get tips on design-development collaboration.\" \/>\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\/dotsource-importance-of-single-source-of-truth\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using a Single Source of Truth with UXPin Merge \u2013 dotSource&#039;s Case Study\" \/>\n<meta property=\"og:description\" content=\"Read what dotSource thinks about a single source of truth and why they picked UXPin Merge. Get tips on design-development collaboration.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-11T11:39:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-11T11:43:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/dotSource-case-study.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\\\/dotsource-importance-of-single-source-of-truth\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/dotsource-importance-of-single-source-of-truth\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Using a Single Source of Truth with UXPin Merge \u2013 dotSource&#8217;s Case Study\",\"datePublished\":\"2022-10-11T11:39:05+00:00\",\"dateModified\":\"2022-10-11T11:43:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/dotsource-importance-of-single-source-of-truth\\\/\"},\"wordCount\":1391,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/dotsource-importance-of-single-source-of-truth\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/dotSource-case-study.png\",\"articleSection\":[\"Blog\",\"Collaboration\",\"Component-Driven Prototyping\",\"Design Systems\",\"Documentation\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/dotsource-importance-of-single-source-of-truth\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/dotsource-importance-of-single-source-of-truth\\\/\",\"name\":\"How dotSource Uses a Single Source of Truth with UXPin Merge\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/dotsource-importance-of-single-source-of-truth\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/dotsource-importance-of-single-source-of-truth\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/dotSource-case-study.png\",\"datePublished\":\"2022-10-11T11:39:05+00:00\",\"dateModified\":\"2022-10-11T11:43:49+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Read what dotSource thinks about a single source of truth and why they picked UXPin Merge. Get tips on design-development collaboration.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/dotsource-importance-of-single-source-of-truth\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/dotsource-importance-of-single-source-of-truth\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/dotsource-importance-of-single-source-of-truth\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/dotSource-case-study.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/dotSource-case-study.png\",\"width\":1200,\"height\":600,\"caption\":\"dotSource case study\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/dotsource-importance-of-single-source-of-truth\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using a Single Source of Truth with UXPin Merge \u2013 dotSource&#8217;s Case Study\"}]},{\"@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 dotSource Uses a Single Source of Truth with UXPin Merge","description":"Read what dotSource thinks about a single source of truth and why they picked UXPin Merge. Get tips on design-development collaboration.","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\/dotsource-importance-of-single-source-of-truth\/","og_locale":"en_US","og_type":"article","og_title":"Using a Single Source of Truth with UXPin Merge \u2013 dotSource's Case Study","og_description":"Read what dotSource thinks about a single source of truth and why they picked UXPin Merge. Get tips on design-development collaboration.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/","og_site_name":"Studio by UXPin","article_published_time":"2022-10-11T11:39:05+00:00","article_modified_time":"2022-10-11T11:43:49+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/dotSource-case-study.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\/dotsource-importance-of-single-source-of-truth\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Using a Single Source of Truth with UXPin Merge \u2013 dotSource&#8217;s Case Study","datePublished":"2022-10-11T11:39:05+00:00","dateModified":"2022-10-11T11:43:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/"},"wordCount":1391,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/dotSource-case-study.png","articleSection":["Blog","Collaboration","Component-Driven Prototyping","Design Systems","Documentation"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/","name":"How dotSource Uses a Single Source of Truth with UXPin Merge","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/dotSource-case-study.png","datePublished":"2022-10-11T11:39:05+00:00","dateModified":"2022-10-11T11:43:49+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Read what dotSource thinks about a single source of truth and why they picked UXPin Merge. Get tips on design-development collaboration.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/dotSource-case-study.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/dotSource-case-study.png","width":1200,"height":600,"caption":"dotSource case study"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Using a Single Source of Truth with UXPin Merge \u2013 dotSource&#8217;s Case Study"}]},{"@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\/36999","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=36999"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36999\/revisions"}],"predecessor-version":[{"id":37025,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36999\/revisions\/37025"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/37000"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=36999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=36999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=36999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}