{"id":39085,"date":"2023-02-09T06:32:25","date_gmt":"2023-02-09T14:32:25","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=39085"},"modified":"2023-06-02T07:28:23","modified_gmt":"2023-06-02T14:28:23","slug":"code-to-design-vs-design-to-code-comparison","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-vs-design-to-code-comparison\/","title":{"rendered":"Code to Design vs. Design to Code \u2013 Which is Better?"},"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\/02\/Code-to-Design-vs-Design-to-Code-1024x512.png\" alt=\"Code to Design vs Design to Code\" class=\"wp-image-39086\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/02\/Code-to-Design-vs-Design-to-Code-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/02\/Code-to-Design-vs-Design-to-Code-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/02\/Code-to-Design-vs-Design-to-Code-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/02\/Code-to-Design-vs-Design-to-Code.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>Just completed the final iteration of your prototype? Great! Let&#8217;s send the design to the development team, so they can translate it to code. Here the question pops up: is design to code really the best direction you can hope for? Actually, there&#8217;s a second model of working: pushing code to design and working with coded UI components.<\/p>\n\n\n\n<p>In this article, we will discuss design-to-code model and why design teams cannot eliminate inconsistencies and lack of collaboration without changing their tools. Luckily, with UXPin Merge, designers still enjoy an intuitive design tool&#8217;s user interface; all that changes is what&#8217;s behind the components that they use for prototyping.<\/p>\n\n\n\n<p>Ready to experience code-to-design technology? Request access to UXPin Merge and obtain a single source of truth between design and development. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Read more 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-to-code\">Design to Code&nbsp;<\/h2>\n\n\n\n<p>Design to code describes a typical product development process. Designers use design and prototyping tools to design user interfaces and hand these off to developers to code.<\/p>\n\n\n\n<p>Over the years, the design-to-code process has evolved, but there is still a big gap between design and development. Designers still create static vector user interfaces, which engineers must translate into code.<\/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\/02\/mobile-screens-pencils-prototyping.png\" alt=\"mobile screens pencils prototyping\" class=\"wp-image-34093\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/mobile-screens-pencils-prototyping.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/mobile-screens-pencils-prototyping-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Due to the lack of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/high-fidelity-prototyping-low-fidelity-difference\/\" target=\"_blank\" rel=\"noreferrer noopener\">fidelity<\/a> and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/advanced-prototyping-features\/\" target=\"_blank\" rel=\"noreferrer noopener\">functionality<\/a>, design teams must include documentation, annotations, and explanation about what designs and prototypes are supposed to do.<\/p>\n\n\n\n<p>Many <a href=\"https:\/\/blog.prototypr.io\/how-and-when-to-use-animations-in-prototypes-d5a1f6ff274\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">designers use GIFs and videos to demonstrate animations and transitions<\/a> because their tools lack interactivity, which requires significant time and resources. It also fragments design files and documentation, confusing developers and stakeholders.<\/p>\n\n\n\n<p>Read more about it in our article about <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">image-based vs. code-based tools<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-benefits-of-design-to-code\">Benefits of design to code<\/h3>\n\n\n\n<p>The design-to-code process is comfortable for designers and engineers because it allows each party to work with familiar tools, workflows and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-terms\/\" target=\"_blank\" rel=\"noreferrer noopener\">using familiar vocabulary<\/a> that&#8217;s comprehesive to them.<\/p>\n\n\n\n<p>Design tools are built for ease of use and speed. Experienced designers can create a screen mockup really fast using an image-based design tool.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-limitations-of-design-to-code\">Limitations of design to code<\/h3>\n\n\n\n<p>Unfortunately, the limitations outweigh the benefits\u2013which is why so many companies seek ways to improve and update their design processes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-misalignment-between-design-and-development\">Misalignment between design and development<\/h4>\n\n\n\n<p>Fidelity and functionality are massive limitations with current design-to-code workflows. Image-based prototypes don&#8217;t look or function like the end product. Even with documentation, annotations, and handover meetings explaining prototypes, designers still complain that engineers haven&#8217;t met their expectations. Conversely, engineers struggle to articulate technical limitations to designers, creating friction.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-design-system-challenges\">Design system challenges<\/h4>\n\n\n\n<p>Even with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-design-system-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">high-quality design systems<\/a>, design to code creates challenges for handoffs, scalability, and maturity. The design system team must manage two design systems:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>UI kit for designers<\/li>\n\n\n\n<li>Component library for developers<\/li>\n<\/ul>\n\n\n\n<p>Additionally, they must maintain <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-documentation-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">documentation<\/a> for both systems.<\/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\/12\/design-system-abstract.png\" alt=\"design system abstract\" class=\"wp-image-37775\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/design-system-abstract.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/design-system-abstract-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Describing this workflow as a single source of truth is a fallacy. As the German-based software development agency <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/\" target=\"_blank\" rel=\"noreferrer noopener\">dotSource points out in this article<\/a>,&nbsp;<\/p>\n\n\n\n<p><em>&#8220;Most design system releases require updating in at least three places:<\/em><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><em>The design system&#8217;s codebase (<\/em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-component-library\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>component library<\/em><\/a><em>)<\/em><\/li>\n\n\n\n<li><em>The design team&#8217;s <\/em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-use-ui-kits-to-create-quicker-mockups\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>UI kit<\/em><\/a><em> (design tool)<\/em><\/li>\n\n\n\n<li><em>The design system&#8217;s documentation<\/em><\/li>\n<\/ol>\n\n\n\n<p><em>Instead of a &#8220;single source of truth&#8221; that gives &#8220;three single sources of truth&#8221; 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<h4 class=\"wp-block-heading\">Duplicated work<\/h4>\n\n\n\n<p>When engineers get the final version of design, they need to translate it to code. Thus, their work takes much longer than it could if the team didn&#8217;t need to push design to code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-code-to-design\">Code to Design<\/h2>\n\n\n\n<p>Code-to-design is a workflow pioneered by UXPin using <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Merge<\/a> technology. <\/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\/02\/collaboration-team-prototyping.png\" alt=\"collaboration team prototyping\" class=\"wp-image-34016\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/collaboration-team-prototyping.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/collaboration-team-prototyping-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Designers still use a design tool with the same familiar UI and features, but the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">designs render production-ready code instead of vector graphics<\/a>.<\/p>\n\n\n\n<p>Many design tools try replicating this system with plugins and extensions, but the code is rarely usable for engineers. Merge is different because it syncs components from a design system&#8217;s repository to UXPin\u2013<em>engineers can use the code because they wrote it<\/em>.<\/p>\n\n\n\n<p>Designers use the same <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-component-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">component library<\/a> during the design process as engineers use for development.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-benefits-of-code-to-design\">Benefits of code to design<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-single-source-of-truth\">Single source of truth<\/h4>\n\n\n\n<p>Code to design solves many product development problems, but the most significant benefit is a <strong><em>true<\/em><\/strong> single source of truth\u2013everyone uses the same component library from the same repository. Any changes to the repo automatically sync to UXPin, notifying design teams of the update.<\/p>\n\n\n\n<p>Merge&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/version-control\/\" target=\"_blank\" rel=\"noreferrer noopener\">Version Control<\/a> allows design teams to change to earlier releases and only update an existing project when they choose.<\/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>If devs are using UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook Integration<\/a>, they update documentation simultaneously with every release. This single source of truth solves many <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-get-started-with-designops\/\" target=\"_blank\" rel=\"noreferrer noopener\">DesignOps<\/a> challenges, allowing team members to focus on <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/designops-for-ux-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">high-level tasks<\/a>.<\/p>\n\n\n\n<p>Another significant benefit of a code-to-design workflow is smoother design handoffs. Engineers import the component library&#8217;s package, add the components, and copy JSX code from UXPin to complete frontend development.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-component-driven-prototyping\">Component-driven prototyping<\/h4>\n\n\n\n<p>Merge components appear in UXPin with the same properties and interactivity as the repository. Each component&#8217;s Props (<a href=\"https:\/\/www.uxpin.com\/docs\/merge\/storybook-integration\/#how-to-change-component-properties\" target=\"_blank\" rel=\"noreferrer noopener\">Args in Storybook<\/a>) appear in <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/configuring-the-properties-panel\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s Properties Panel<\/a>, allowing designers to make changes according to the design system\u2013i.e., colors, states, sizes, etc.<\/p>\n\n\n\n<p>These ready-made UI elements facilitate rapid <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-component-driven-prototyping\/\" target=\"_blank\" rel=\"noreferrer noopener\">component-driven prototyping<\/a>, where designers simply drag and drop components and patterns to build fully functioning prototypes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-ultimate-consistency-with-zero-design-drift\">Ultimate consistency with zero design drift<\/h4>\n\n\n\n<p>These ready-made components eliminate inconsistencies because everyone uses the same UI library with the same limitations and constraints.<\/p>\n\n\n\n<p>Designers can only change elements via the properties available in UXPin&#8217;s Properties Panel. There are no overrides, thus eliminating the possibility for changes, resulting in no drift.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-better-governance\">Better governance<\/h4>\n\n\n\n<p>These limitations improve <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-governance\/\" target=\"_blank\" rel=\"noreferrer noopener\">governance<\/a> and design system integrity. The design system team has absolute control over the repo; therefore, everyone must follow the correct procedures to promote new patterns and components.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-scalability-and-maturity\">Scalability and maturity<\/h4>\n\n\n\n<p>Merge facilitates the highest <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 stage<\/a> with every team member using the same <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-component-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">component library<\/a>\u2013no designing or developing from scratch to release products. Using this technology, organizations can achieve this level of maturity significantly quicker than following a design-to-code workflow.<\/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\/04\/screens-prototyping.png\" alt=\"screens prototyping\" class=\"wp-image-35008\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/screens-prototyping.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/screens-prototyping-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>With everyone using a single codebase, it&#8217;s easier to scale a design system following technological and market changes. Whenever the design system team adds new components, patterns, or templates to the repository, they&#8217;re immediately available for the entire product development team.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-enhanced-testing\">Enhanced testing<\/h4>\n\n\n\n<p>Better prototypes mean better testing. Designers can solve more issues and find better opportunities during the design process with prototypes that accurately represent the final product experience.<\/p>\n\n\n\n<p>Usability participants and stakeholders can <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">interact with these prototypes<\/a> like they would the final product, resulting in <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototypes-improve-usability-testing\/\" target=\"_blank\" rel=\"noreferrer noopener\">meaningful feedback and actionable data-driven insights<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-limitations\">Limitations<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-code-to-design-requires-a-component-library\">Code to design requires a component library<\/h4>\n\n\n\n<p>Code to design can only work with a component library. You can use an open-source UI library if your organization doesn&#8217;t have a design system. For example, PayPal&#8217;s internal product development team uses a customized <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/bring-fluent-design-system-for-react-into-uxpin\/\" target=\"_blank\" rel=\"noreferrer noopener\">Microsoft Fluent UI design system<\/a>.<\/p>\n\n\n\n<p>Designers can also use Merge&#8217;s <a href=\"https:\/\/www.uxpin.com\/merge\/npm-integration\" target=\"_blank\" rel=\"noreferrer noopener\">npm integration<\/a> to import components from open-source libraries available on the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-npm-packages-to-design-with\/\" target=\"_blank\" rel=\"noreferrer noopener\">npm registry<\/a>. This method requires no technical skills. Instead, designers use the <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/merge-component-manager\/\" target=\"_blank\" rel=\"noreferrer noopener\">Merge Component Manager<\/a> to import and manage UI elements.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-designers-rely-on-engineers\">Designers rely on engineers<\/h4>\n\n\n\n<p>Code-to-design requires designers and engineers to work closer together. Most organizations have a dedicated design system team, so this won&#8217;t be too different from <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-governance\/\" target=\"_blank\" rel=\"noreferrer noopener\">standard governance procedures<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-less-flexibility\">Less flexibility<\/h4>\n\n\n\n<p>A code-based design system is less flexible than a UI kit that designers can quickly assemble. Designers have limited or no possibility of changing or manipulating components once uploaded into the design tool. This inflexibility is necessary for design system governance and integrity, but some might argue that it restricts innovation and creativity.<\/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>UXPin functions like any other design tool, so designers can develop new ideas and patterns to present to team members. With <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Patterns<\/a>, designers can combine existing design system elements or import open-source libraries to create new components, patterns, and templates.<\/p>\n\n\n\n<p>With this in mind, code-to-design creates more opportunities for creativity and innovation because designers can leverage the best parts of open-source libraries to develop new patterns.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-companies-using-code-to-design\">Companies Using Code to Design<\/h2>\n\n\n\n<p>Our diverse client base proves that <a href=\"https:\/\/www.uxpin.com\/code-to-design\" target=\"_blank\" rel=\"noreferrer noopener\">code to design works<\/a> for multinational enterprises, agencies delivering white-label software, and startups. Here are three great examples of code-to-design in practice.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-paypal\">PayPal<\/h3>\n\n\n\n<p>PayPal&#8217;s internal UX team revolutionized its product development process by switching to a code-to-design model. Since the switch in 2019, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/paypal-scaled-design-process-uxpin-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">PayPal&#8217;s product teams deliver releases 8X faster<\/a> with no design drift or inconsistencies. PayPal&#8217;s new product development process has improved cross-functional collaboration, with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/designops-with-engineers\/\" target=\"_blank\" rel=\"noreferrer noopener\">everyone taking responsibility for user experience<\/a>.<\/p>\n\n\n\n<p>Merge also improved PayPal&#8217;s prototyping and testing, with better feedback from test participants and stakeholders.&nbsp;<\/p>\n\n\n\n<p><em>&#8220;One of the significant impacts of UXPin Merge is our ability to create higher-fidelity prototypes. 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> &#8211; <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/designops-with-engineers\/\" target=\"_blank\" rel=\"noreferrer noopener\">Erica Rider, UX Lead EPX at PayPal<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-teampassword\">TeamPassword<\/h3>\n\n\n\n<p>TeamPassword is a 5-person startup (as of Feb 2023) operating in the highly competitive password management market. The startup doesn&#8217;t have a UX team, requiring engineers to prototype and test new releases.<\/p>\n\n\n\n<p>Before switching to Merge, TeamPassword&#8217;s engineers would develop each prototype\u2013a time-consuming process for a company with limited resources. In 2022, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/teampassword-uxpin-merge-case-study\/\" target=\"_blank\" rel=\"noreferrer noopener\">TeamPassword changed to Merge<\/a> and synced a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/mui-customization\/\" target=\"_blank\" rel=\"noreferrer noopener\">custom MUI design system<\/a>.<\/p>\n\n\n\n<p>Since changing to a code-to-design workflow, TeamPassword&#8217;s speed-to-market has drastically improved, and the product has no usability issues or inconsistencies, making the company more competitive.<\/p>\n\n\n\n<p>Ready to overhaul your design-to-code workflow with a revolutionary code-to-design solution? <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page<\/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","protected":false},"excerpt":{"rendered":"<p>Just completed the final iteration of your prototype? Great! Let&#8217;s send the design to the development team, so they can translate it to code. Here the question pops up: is design to code really the best direction you can hope for? Actually, there&#8217;s a second model of working: pushing code to design and working with<\/p>\n","protected":false},"author":3,"featured_media":39086,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,445,17,442,18,172],"tags":[],"class_list":["post-39085","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-code-to-design","category-collaboration-2","category-component-driven-prototyping","category-process","category-product-design"],"yoast_title":"","yoast_metadesc":"The most common product development workflow is pushing design to code, but let's see what you can get by replacing it with code to design!","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 to Design vs. Design to Code \u2013 Which is Better? | UXPin<\/title>\n<meta name=\"description\" content=\"The most common product development workflow is pushing design to code, but let&#039;s see what you can get by replacing it with code to design!\" \/>\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\/code-to-design-vs-design-to-code-comparison\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Code to Design vs. Design to Code \u2013 Which is Better?\" \/>\n<meta property=\"og:description\" content=\"The most common product development workflow is pushing design to code, but let&#039;s see what you can get by replacing it with code to design!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-vs-design-to-code-comparison\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-09T14:32:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-02T14:28:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/02\/Code-to-Design-vs-Design-to-Code.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-to-design-vs-design-to-code-comparison\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-to-design-vs-design-to-code-comparison\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Code to Design vs. Design to Code \u2013 Which is Better?\",\"datePublished\":\"2023-02-09T14:32:25+00:00\",\"dateModified\":\"2023-06-02T14:28:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-to-design-vs-design-to-code-comparison\\\/\"},\"wordCount\":1638,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-to-design-vs-design-to-code-comparison\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Code-to-Design-vs-Design-to-Code.png\",\"articleSection\":[\"Blog\",\"Code to Design\",\"Collaboration\",\"Component-Driven Prototyping\",\"Process\",\"Product Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-to-design-vs-design-to-code-comparison\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-to-design-vs-design-to-code-comparison\\\/\",\"name\":\"Code to Design vs. Design to Code \u2013 Which is Better? | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-to-design-vs-design-to-code-comparison\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-to-design-vs-design-to-code-comparison\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Code-to-Design-vs-Design-to-Code.png\",\"datePublished\":\"2023-02-09T14:32:25+00:00\",\"dateModified\":\"2023-06-02T14:28:23+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"The most common product development workflow is pushing design to code, but let's see what you can get by replacing it with code to design!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-to-design-vs-design-to-code-comparison\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-to-design-vs-design-to-code-comparison\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-to-design-vs-design-to-code-comparison\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Code-to-Design-vs-Design-to-Code.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Code-to-Design-vs-Design-to-Code.png\",\"width\":1200,\"height\":600,\"caption\":\"Code to Design vs Design to Code\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-to-design-vs-design-to-code-comparison\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Code to Design vs. Design to Code \u2013 Which is Better?\"}]},{\"@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 to Design vs. Design to Code \u2013 Which is Better? | UXPin","description":"The most common product development workflow is pushing design to code, but let's see what you can get by replacing it with code to design!","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\/code-to-design-vs-design-to-code-comparison\/","og_locale":"en_US","og_type":"article","og_title":"Code to Design vs. Design to Code \u2013 Which is Better?","og_description":"The most common product development workflow is pushing design to code, but let's see what you can get by replacing it with code to design!","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-vs-design-to-code-comparison\/","og_site_name":"Studio by UXPin","article_published_time":"2023-02-09T14:32:25+00:00","article_modified_time":"2023-06-02T14:28:23+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/02\/Code-to-Design-vs-Design-to-Code.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-vs-design-to-code-comparison\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-vs-design-to-code-comparison\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Code to Design vs. Design to Code \u2013 Which is Better?","datePublished":"2023-02-09T14:32:25+00:00","dateModified":"2023-06-02T14:28:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-vs-design-to-code-comparison\/"},"wordCount":1638,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-vs-design-to-code-comparison\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/02\/Code-to-Design-vs-Design-to-Code.png","articleSection":["Blog","Code to Design","Collaboration","Component-Driven Prototyping","Process","Product Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-vs-design-to-code-comparison\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-vs-design-to-code-comparison\/","name":"Code to Design vs. Design to Code \u2013 Which is Better? | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-vs-design-to-code-comparison\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-vs-design-to-code-comparison\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/02\/Code-to-Design-vs-Design-to-Code.png","datePublished":"2023-02-09T14:32:25+00:00","dateModified":"2023-06-02T14:28:23+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"The most common product development workflow is pushing design to code, but let's see what you can get by replacing it with code to design!","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-vs-design-to-code-comparison\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-vs-design-to-code-comparison\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-vs-design-to-code-comparison\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/02\/Code-to-Design-vs-Design-to-Code.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/02\/Code-to-Design-vs-Design-to-Code.png","width":1200,"height":600,"caption":"Code to Design vs Design to Code"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-vs-design-to-code-comparison\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Code to Design vs. Design to Code \u2013 Which is Better?"}]},{"@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\/39085","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=39085"}],"version-history":[{"count":6,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/39085\/revisions"}],"predecessor-version":[{"id":45160,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/39085\/revisions\/45160"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/39086"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=39085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=39085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=39085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}