{"id":49142,"date":"2023-10-05T07:18:03","date_gmt":"2023-10-05T14:18:03","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=49142"},"modified":"2023-10-05T07:18:12","modified_gmt":"2023-10-05T14:18:12","slug":"bringing-design-and-code-together","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/bringing-design-and-code-together\/","title":{"rendered":"Code or Design \u2013 Which is a Better Source of Truth?"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/Code-or-Design--1024x512.png\" alt=\"Code or Design\" class=\"wp-image-49143\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/Code-or-Design--1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/Code-or-Design--600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/Code-or-Design--768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/Code-or-Design-.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>The global design system&#8217;s community, Into Design Systems, hosted a webinar in July 2023 where guest speaker Marcel Bertram talked about <em>&#8220;Systematic Design With Code.&#8221;<\/em> Marcel made some interesting comparisons about designing using vector-based vs. code-based design tools and how organizations can use the latter to create a single source of truth.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.intodesignsystems.com\/meetup\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Into Design Systems<\/a> is a virtual design systems conference for the global Design and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-designops-work\/\" target=\"_blank\" rel=\"noreferrer noopener\">DesignOps<\/a> community, including designers, developers, Design Leads, design managers, DesignOps practitioners, and many others. The community-driven initiative shares knowledge to help evolve the industry and its members.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.linkedin.com\/in\/marcelbertram\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Marcel Bertram<\/a> is a Brand Design Specialist leading the Design System team at a global automobile manufacturer. He is also the Co-Founder &amp; UX Coach at <a href=\"https:\/\/mudx.design\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">MUDX.design<\/a>, a consultancy for UX Design Operations.<\/p>\n\n\n\n<p>This article is based on Marcel&#8217;s Into Design Systems live titled &#8220;The Power of Design, Code &amp; Ai in Design Systems.&#8221; We have summarized Marcel&#8217;s talk into its key points, but you can watch the entire <a href=\"https:\/\/www.youtube.com\/watch?v=Q-zvJ7vmc6o\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">3-hour webinar here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"LIVE Meetup -  The Power of Design, Code &amp; Ai in Design Systems\" width=\"660\" height=\"495\" src=\"https:\/\/www.youtube.com\/embed\/Q-zvJ7vmc6o?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Key takaways:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-tools-to-try\/\" target=\"_blank\" rel=\"noreferrer noopener\">Vector-based design tools<\/a> arose from a need to provide scalability and clarity across different resolutions in the digital landscape.<\/li>\n\n\n\n<li>The release of UXPin&#8217;s Merge technology in 2019 <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">marked a significant shift in design paradigms<\/a>, blending code components directly into the design process for a unified UI library.<\/li>\n\n\n\n<li>Recognizing code as the &#8220;<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/single-source-truth-benefits\/\" target=\"_blank\" rel=\"noreferrer noopener\">source of truth<\/a>&#8221; ensures consistency, efficiency, and a holistic understanding of application mechanics across design and development teams.<\/li>\n\n\n\n<li>German-based software agency dotSource utilized <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge to bridge the gap between design and development<\/a>, synchronizing code, design, and documentation.<\/li>\n\n\n\n<li>UXPin&#8217;s Merge technology advances modern prototyping, enabling designers to test realistic user interactions and gain accurate insights during the design process.<\/li>\n<\/ul>\n\n\n\n<p>Use coded components as a single source of truth between designers and developers. Bridge the gap in the process and release products faster. Learn more about it. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover 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-why-are-there-vector-based-design-tools\">Why Are There Vector-Based Design Tools?<\/h2>\n\n\n\n<p>In the early days of digital design, there was a pressing need to replicate the precision of physical art. Instead of constructing images from tiny dots, as pixel-based methods do, vectors use mathematical equations to shape graphics. As a result, these images stay sharp and scalable, no matter how you adjust their size.<\/p>\n\n\n\n<p>Traditional graphic design laid the groundwork for vector tools. The industry adopted tools like <a href=\"https:\/\/get.uxpin.com\/uxpin-vs-adobe-xd\/\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Illustrator<\/a> because they consistently delivered crisp visuals across platforms and resolutions. As the need for adaptable designs surged with the rise of websites, applications, and digital ads, designers naturally gravitated toward vector-based tools. Their choice wasn&#8217;t just aesthetic\u2013it addressed the practical demands of the digital landscape.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-code-based-revolution\">The code-based revolution<\/h3>\n\n\n\n<p>While vector-based tools have helped get us to where we are today, they haven&#8217;t evolved to bridge the gap between design and development\u2013<em>until the release of <\/em><a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\"><em>UXPin&#8217;s Merge technology<\/em><\/a><em> in 2019<\/em>.&nbsp;<\/p>\n\n\n\n<p>Merge&#8217;s code-based approach brings code components into the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-process-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">design process<\/a>, so designers can use the same <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-component-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI library for prototyping<\/a> as engineers to develop the final product.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-vector-based-vs-coded-design-systems\">Vector-Based vs. Coded Design Systems<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/product-design-ultimate-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">Digital product design<\/a> is slowly shifting from traditional vector-based systems to the innovative <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/convert-design-to-code-better-way\/\" target=\"_blank\" rel=\"noreferrer noopener\">code-based approach<\/a>. The integration of code in the design process has changed how developers and designers collaborate, streamlining the entire product development process.\u00a0<\/p>\n\n\n\n<p>Let&#8217;s explore this evolution and understand its implications on design systems and prototyping.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-understanding-vector-based-systems\">Understanding vector-based systems<\/h3>\n\n\n\n<p><strong>What are they?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>These are tools that use mathematical equations to represent images in computer graphics. Popular examples include Figma and Adobe Illustrator.<\/li>\n<\/ul>\n\n\n\n<p><strong>Advantages:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Suitable for static prototyping and visual designs.<\/li>\n\n\n\n<li>Intuitive for designers to visualize, draft, and make rapid alterations.<\/li>\n<\/ul>\n\n\n\n<p><strong>Limitations:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lacks the dynamism of real-life applications.<\/li>\n\n\n\n<li>Can&#8217;t always accurately emulate user interactions, transitions, or advanced component behaviors.<\/li>\n\n\n\n<li>Doesn&#8217;t represent the intricacies and possibilities of code.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-understanding-coded-design-systems\">Understanding coded design systems<\/h3>\n\n\n\n<p><strong>What are they?:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Design tools that use actual coded components on the design canvas, like <a href=\"https:\/\/www.uxpin.com\/merge\">UXPin<\/a>.<\/li>\n<\/ul>\n\n\n\n<p><strong>Advantages:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Creates a single source of truth across the organization with automated updates for designers and developers.<\/li>\n\n\n\n<li>Seamless <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-can-designers-do-to-ensure-a-smooth-design-handoff\/\" target=\"_blank\" rel=\"noreferrer noopener\">transition between design and development phases<\/a>.<\/li>\n\n\n\n<li>Accurately represents the real-life behavior of components for <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/\" target=\"_blank\" rel=\"noreferrer noopener\">realistic prototyping<\/a>.<\/li>\n\n\n\n<li>More meaningful feedback from <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-testing-prototypes\/\" target=\"_blank\" rel=\"noreferrer noopener\">user testing<\/a> and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/stakeholder-interview-questions\/\" target=\"_blank\" rel=\"noreferrer noopener\">stakeholders<\/a>.<\/li>\n\n\n\n<li>Less reliance on engineering teams for <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/live-data-prototype\/\" target=\"_blank\" rel=\"noreferrer noopener\">complex prototyping<\/a>.<\/li>\n\n\n\n<li>Integrated <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/8-website-accessibility-best-practices-to-improve-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">accessibility features<\/a>, semantics, and browser functionalities like password managers.<\/li>\n\n\n\n<li>Facilitates exploration based on real <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/convert-design-to-code-better-way\/\" target=\"_blank\" rel=\"noreferrer noopener\">coded UI elements<\/a>.<\/li>\n\n\n\n<li>Designers get the benefits of code but still work with a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-tools-to-try\/\" target=\"_blank\" rel=\"noreferrer noopener\">familiar design tool interface<\/a>.<\/li>\n<\/ul>\n\n\n\n<p><strong>Limitations:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Only the design system team can implement changes\u2013which is good for governance.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-code-as-the-source-of-truth\">Code as the Source of Truth<\/h2>\n\n\n\n<p>The final digital product is based in code. Developers work with code. The <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-team-structure\/\" target=\"_blank\" rel=\"noreferrer noopener\">design team<\/a> uses a vector-based tool, creating a gap between them and the final product. Therefore, recognizing code as the central reference point or the &#8220;<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/single-source-truth-benefits\/\" target=\"_blank\" rel=\"noreferrer noopener\">source of truth<\/a>&#8221; is pivotal.<\/p>\n\n\n\n<p>This philosophy ensures:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Consistency and cohesion:<\/strong> Ensuring that designers and developers draw components from the same repository ensures uniformity across the board.<\/li>\n\n\n\n<li><strong>Efficiency:<\/strong> With everyone referencing the same library and documentation, there&#8217;s <strong><em>less<\/em><\/strong> room for miscommunication or discrepancies.<\/li>\n\n\n\n<li><strong>In-depth understanding:<\/strong> Encourages designers to understand the core mechanics of how applications function, fostering a more <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/join-holistic-design-operations\/\" target=\"_blank\" rel=\"noreferrer noopener\">holistic design approach<\/a>.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-a-single-source-of-truth-with-uxpin-merge-dotsource-s-case-study\">A Single Source of Truth with UXPin Merge \u2013 dotSource&#8217;s Case Study<\/h2>\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\/2023\/08\/uxpin-merge-component-sync-1.png\" alt=\"uxpin merge component sync 1\" class=\"wp-image-49149\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/uxpin-merge-component-sync-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/uxpin-merge-component-sync-1-449x300.png 449w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Before switching to UXPin Merge, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/\" target=\"_blank\" rel=\"noreferrer noopener\">German-based software development agency dotSource<\/a> had a problem:<\/p>\n\n\n\n<p>Promoting new patterns and components to a design system involves many redundant processes. Most design system releases require updating in at least three places:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<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>\n\n\n\n<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>\n\n\n\n<li>The design system&#8217;s <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-documentation-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">documentation<\/a><\/li>\n<\/ol>\n\n\n\n<p><em>&#8220;Instead of a &#8216;single source of truth&#8217; that gives &#8216;three single sources of truth&#8217; for every UI component\u2013this seems counterintuitive and increases errors. 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.&#8221;<\/em><\/p>\n\n\n\n<p>dotSource found the only solution to this problem was to implement a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">code-based design process<\/a>, creating a <strong><em>true<\/em><\/strong> single source of truth between design and development.<\/p>\n\n\n\n<p>The company uses Merge technology to import a product&#8217;s design system into UXPin so designers can prototype using code components.<\/p>\n\n\n\n<p><em>&#8220;We use UXPin&#8217;s <\/em><a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Storybook integration<\/em><\/a><em>, 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:<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Designers to participate in QA and help developers identify bugs<\/em><\/li>\n\n\n\n<li><em>Close collaboration between designers and engineers<\/em><\/li>\n\n\n\n<li><em>Better testing and faster iterations with high-fidelity interactive components (<\/em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-component-driven-prototyping\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>component-driven prototyping<\/em><\/a><em>)&#8221;<\/em><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-modern-prototyping-static-vs-interactive\">Modern Prototyping \u2013 Static vs. Interactive<\/h2>\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\/2023\/08\/code-developer-design-3.png\" alt=\"code developer design 3\" class=\"wp-image-49146\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/code-developer-design-3.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/code-developer-design-3-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-static-prototyping\">Static prototyping<\/h3>\n\n\n\n<p>Using vector-based tools like Figma works well when the objective is to gauge comprehension or aesthetics. It provides a static visual representation without intricate interactive layers.<\/p>\n\n\n\n<p>Designers typically move from a vector-based tool to a prototyping tool, which adds costs and operational burdens, and they still don&#8217;t achieve results comparable to code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-interactive-prototyping\">Interactive prototyping<\/h3>\n\n\n\n<p>Code-based design tools increase prototyping scope for more comprehensive functionality and user journey tests. Tools like UXPin can emulate real interactions, toggle functionalities, input field behaviors, and more, offering a realistic user experience.<\/p>\n\n\n\n<p>UXPin&#8217;s Merge technology goes beyond what you can see into how a prototype feels in a real-world scenario. Design teams can use insights from testing to iterate and improve with greater accuracy. Designers enhance usability and can identify more business opportunities during the design process, increasing their value to the organization.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-transitioning-to-a-code-based-design-workflow\">Transitioning to a Code-Based Design Workflow<\/h2>\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\/2023\/08\/prototyping-elements-components.png\" alt=\"prototyping elements components\" class=\"wp-image-49152\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/prototyping-elements-components.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/prototyping-elements-components-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>The world of digital design is vast and ever-evolving. While vector-based tools serve their purpose in initial design phases, embracing the advantages of coded design system systems is the way forward. This integrated approach reduces inefficiencies and miscommunications while ensuring a more authentic user experience during testing.<\/p>\n\n\n\n<p>As designers and developers continue to collaborate, it&#8217;s crucial to remember that our ultimate goal is to craft user-centric, efficient, and aesthetically pleasing applications. Understanding and utilizing the right tools is a significant step in that direction.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-increasing-design-system-maturity-with-uxpin-merge\">Increasing design system maturity with UXPin Merge<\/h3>\n\n\n\n<p>UXPin&#8217;s Merge technology currently leads the code-based design revolution with tools and features that meet the needs of modern product development teams.<\/p>\n\n\n\n<p>It can take years for organizations to reach full design system maturity\u2013a fully integrated system with designers and developers using the same UI library and documentation. Most never get there, maintaining multiple sources of truth like our friends at dotSource.<\/p>\n\n\n\n<p>UXPin Merge is the bridge to that gap. Organizations can create a fully integrated design system from the start, circumventing many years of wasted resources.<\/p>\n\n\n\n<p>With UXPin Merge, you can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Import Javascript-based design systems, including React, Vue, Angular, Ember, and others using <a href=\"https:\/\/www.uxpin.com\/merge\/git-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Git<\/a> or <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook<\/a>&nbsp;<\/li>\n\n\n\n<li>Combine UI elements from multiple design systems using <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s Patterns<\/a> to create new design system components<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/merge\/merge-component-manager\/\" target=\"_blank\" rel=\"noreferrer noopener\">Import components from open-source design systems<\/a> to test new patterns before committing to development<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/paypal-scaled-design-process-uxpin-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">Build prototypes 8X faster<\/a> than traditional vector-based design tools<\/li>\n\n\n\n<li>Use <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/version-control\/\" target=\"_blank\" rel=\"noreferrer noopener\">Version Control<\/a> to give designers control over updates and design system version history<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/merge\/merge-design-system-documentation\/\" target=\"_blank\" rel=\"noreferrer noopener\">Create centralized documentation<\/a> for product teams to keep everything on one platform<\/li>\n\n\n\n<li>Use real data for prototyping via JSON<\/li>\n<\/ul>\n\n\n\n<p>Ready to join the code-based revolution? <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page<\/a> to learn how to create a single source of truth for your design system and develop better product experiences for your users.<\/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>The global design system&#8217;s community, Into Design Systems, hosted a webinar in July 2023 where guest speaker Marcel Bertram talked about &#8220;Systematic Design With Code.&#8221; Marcel made some interesting comparisons about designing using vector-based vs. code-based design tools and how organizations can use the latter to create a single source of truth. Into Design Systems<\/p>\n","protected":false},"author":3,"featured_media":49143,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,445,199],"tags":[],"class_list":["post-49142","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-code-to-design","category-design-systems"],"yoast_title":"","yoast_metadesc":"Read our recap of Marcel's presentation at Into Design System meetup. Learn about the ways that you can bring UX and code together.","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>Code or Design \u2013 Which is a Better Source of Truth? | UXPin<\/title>\n<meta name=\"description\" content=\"Read our recap of Marcel&#039;s presentation at Into Design System meetup. Learn about the ways that you can bring UX and code together.\" \/>\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\/bringing-design-and-code-together\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Code or Design \u2013 Which is a Better Source of Truth?\" \/>\n<meta property=\"og:description\" content=\"Read our recap of Marcel&#039;s presentation at Into Design System meetup. Learn about the ways that you can bring UX and code together.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/bringing-design-and-code-together\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-05T14:18:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-05T14:18:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/Code-or-Design-.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\\\/bringing-design-and-code-together\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bringing-design-and-code-together\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Code or Design \u2013 Which is a Better Source of Truth?\",\"datePublished\":\"2023-10-05T14:18:03+00:00\",\"dateModified\":\"2023-10-05T14:18:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bringing-design-and-code-together\\\/\"},\"wordCount\":1557,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bringing-design-and-code-together\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/Code-or-Design-.png\",\"articleSection\":[\"Blog\",\"Code to Design\",\"Design Systems\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bringing-design-and-code-together\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bringing-design-and-code-together\\\/\",\"name\":\"Code or Design \u2013 Which is a Better Source of Truth? | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bringing-design-and-code-together\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bringing-design-and-code-together\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/Code-or-Design-.png\",\"datePublished\":\"2023-10-05T14:18:03+00:00\",\"dateModified\":\"2023-10-05T14:18:12+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Read our recap of Marcel's presentation at Into Design System meetup. Learn about the ways that you can bring UX and code together.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bringing-design-and-code-together\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bringing-design-and-code-together\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bringing-design-and-code-together\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/Code-or-Design-.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/Code-or-Design-.png\",\"width\":1200,\"height\":600,\"caption\":\"Code or Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/bringing-design-and-code-together\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Code or Design \u2013 Which is a Better Source of Truth?\"}]},{\"@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":"Code or Design \u2013 Which is a Better Source of Truth? | UXPin","description":"Read our recap of Marcel's presentation at Into Design System meetup. Learn about the ways that you can bring UX and code together.","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\/bringing-design-and-code-together\/","og_locale":"en_US","og_type":"article","og_title":"Code or Design \u2013 Which is a Better Source of Truth?","og_description":"Read our recap of Marcel's presentation at Into Design System meetup. Learn about the ways that you can bring UX and code together.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/bringing-design-and-code-together\/","og_site_name":"Studio by UXPin","article_published_time":"2023-10-05T14:18:03+00:00","article_modified_time":"2023-10-05T14:18:12+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/Code-or-Design-.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\/bringing-design-and-code-together\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/bringing-design-and-code-together\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Code or Design \u2013 Which is a Better Source of Truth?","datePublished":"2023-10-05T14:18:03+00:00","dateModified":"2023-10-05T14:18:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/bringing-design-and-code-together\/"},"wordCount":1557,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/bringing-design-and-code-together\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/Code-or-Design-.png","articleSection":["Blog","Code to Design","Design Systems"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/bringing-design-and-code-together\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/bringing-design-and-code-together\/","name":"Code or Design \u2013 Which is a Better Source of Truth? | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/bringing-design-and-code-together\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/bringing-design-and-code-together\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/Code-or-Design-.png","datePublished":"2023-10-05T14:18:03+00:00","dateModified":"2023-10-05T14:18:12+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Read our recap of Marcel's presentation at Into Design System meetup. Learn about the ways that you can bring UX and code together.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/bringing-design-and-code-together\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/bringing-design-and-code-together\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/bringing-design-and-code-together\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/Code-or-Design-.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/Code-or-Design-.png","width":1200,"height":600,"caption":"Code or Design"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/bringing-design-and-code-together\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Code or Design \u2013 Which is a Better Source of Truth?"}]},{"@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\/49142","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=49142"}],"version-history":[{"count":5,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/49142\/revisions"}],"predecessor-version":[{"id":50481,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/49142\/revisions\/50481"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/49143"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=49142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=49142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=49142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}