{"id":32909,"date":"2023-03-30T03:47:26","date_gmt":"2023-03-30T10:47:26","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=32909"},"modified":"2023-03-30T06:32:44","modified_gmt":"2023-03-30T13:32:44","slug":"design-handoff-with-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/","title":{"rendered":"Design Handoff: What it Looks Like with UXPin Merge"},"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\/01\/Developer-Designer-handoff-with-Merge-1024x512.png\" alt=\"Developer Designer handoff with Merge\" class=\"wp-image-32912\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Developer-Designer-handoff-with-Merge-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Developer-Designer-handoff-with-Merge-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Developer-Designer-handoff-with-Merge-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Developer-Designer-handoff-with-Merge.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><em>The following article is written by UXPin&#8217;s developer, Robert Kirkman, who shares how UXPin Merge makes the design handoff easier from both (a developer and designer) perspectives.<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Once the prototypes are ready for production, the designer hands them off to developers. Such a process can be troublesome \u2013 the right tool stack being a part of that. There are quite a few design tools that help with design handoff, but what\u2019s the difference between them when handing off prototypes to the developer?<\/p>\n\n\n\n<p>One of the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-prototyping-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">major differences between popular design tools<\/a> is their approach to the final product of the designer&#8217;s work \u2013 the prototype of the product. Some of them render prototypes to vector graphics, while others to code. Let\u2019s explore it.<\/p>\n\n\n\n<p>With UXPin Merge, designers can build fully-functioning interactive prototypes with the exact components used in the final product. It syncs fully coded components from a GitHub repository or Storybook to UXPin\u2019s editor.  See how UXPin Merge can make you release coherent products. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Request access to 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-the-handoff-limitations-of-vector-based-design-tools\">The Handoff Limitations of Vector-Based Design Tools<\/h2>\n\n\n\n<p>Here is a prototype that is going to be handed off from the designers to the developers. Let\u2019s say that it is created in a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/advanced-prototyping-features\/\" target=\"_blank\" rel=\"noreferrer noopener\">vector-based design tool<\/a>. It means that all the components are vector based while the interactions only mimic code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-recreating-ui-components\">Recreating UI components<\/h3>\n\n\n\n<p>Let\u2019s focus on <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">components<\/a> first. Some of them might be new, which means that the developer has to build them from scratch. Others are existing components that this engineer may need to modify.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-developing-interactions\">Developing interactions<\/h3>\n\n\n\n<p>When getting a prototype built in a vector-based design tool, the interactions might not even exist in the code, so the developer has to create them, or else, call for more designer-developer meetings to understand exactly what is needed and manage expectations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-preparing-design-system\">Preparing design system<\/h3>\n\n\n\n<p>This is a system where designers and developers are creating the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/single-source-truth-benefits\/\" target=\"_blank\" rel=\"noreferrer noopener\">source of truth for a design system<\/a>. They are the ones creating the documentation of the reusable master components, and how interactions should work.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-is-such-design-handoff-efficient\">Is such design handoff efficient?<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/design-and-development-collaboration-process-product-communication.png\" alt=\"design and development collaboration process product communication\" class=\"wp-image-32260\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/design-and-development-collaboration-process-product-communication.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/design-and-development-collaboration-process-product-communication-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>This approach works but it might be a bit frustrating, time consuming and tedious. Not everyone will notice that it\u2019s broken or feel an urge to fix it. They don\u2019t have to do that. But, is this the best way to run things?<\/p>\n\n\n\n<p>If you look at it from the perspective of what more can we do to make this better for both designers and developers, I think there is a lot we can discuss. This approach has issues based on where the source of truth is coming from, which is the vector-based documentation and what is handed off to the developers.<\/p>\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-what-does-design-handoff-look-like-with-uxpin-merge\">What Does Design Handoff Look Like with UXPin Merge?<\/h2>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"304\" style=\"aspect-ratio: 650 \/ 304;\" width=\"650\" controls src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Design-Handoff-Merge-1.mp4\"><\/video><figcaption class=\"wp-element-caption\">Prototype created with code components<\/figcaption><\/figure>\n\n\n\n<p>We\u2019ve taken this perspective of what we can do better during the developer handoff when we were creating <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a>.<\/p>\n\n\n\n<p>No longer are you designing with vector-based components and mimicked code interactions. You\u2019re actually designing with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-component-driven-prototyping\/\" target=\"_blank\" rel=\"noreferrer noopener\">live React components<\/a>. You can copy and paste the components\u2019 code into your application.<\/p>\n\n\n\n<p>Imagine if the documentation was created by the designer and developer in tandem but the single source of truth for component design and interaction was the actual component code itself. Meaning when the designer is creating prototypes, they are using components that have already been coded, in a live production-like environment with real components.<\/p>\n\n\n\n<p>The components have all the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/\" target=\"_blank\" rel=\"noreferrer noopener\">design tokens<\/a>, interactions and editable properties already defined. Finally, when the prototype is made you can handoff the component code iself.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-does-handoff-with-merge-help-developers\">How Does Handoff with Merge Help Developers?<\/h3>\n\n\n\n<p>Imagine how much time is saved when you don\u2019t have to imagine or have meetings with the designer to understand what components they\u2019ve used or what interactions they\u2019ve designed.<\/p>\n\n\n\n<p>The developer handoff is simple, they give you a prototype, you copy and paste the JSX code, which includes the components, component properties and their coded interactions that already exist in the source code.<\/p>\n\n\n\n<p>This is possible because the source of truth is the code itself, the source code.<\/p>\n\n\n\n<p>The only component properties the designer can edit and how they can edit are specified in the source code by the developer, so no unexpected designs are handed your way.<\/p>\n\n\n\n<p>If the designer wants a new interaction added, new properties or changes in the styling of something, they can explain to the developer, then change the source code. There\u2019s no more guessing or wasted time in unnecessary meetings.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-does-it-help-designers\">How Does It Help Designers?<\/h3>\n\n\n\n<p>This sounds great for developers but designers often feel that when they are given components with limited properties to design with, it\u2019s limiting their creativity, right? I don\u2019t believe so, so let me explain.<\/p>\n\n\n\n<p>Imagine playing and designing cool spaceships or castles with your lego back in the day with your friends, or maybe now and alone. No judgement here &#8211; lego is cool at any age. You&#8217;re all given the same pre-built building blocks, how they connect to each other and how you can use them are already defined and yet each person can create an amazing spaceship, completely different from all the others.<\/p>\n\n\n\n<p>Instead of focusing your creativity on making building blocks and then figuring out how to use them, you&#8217;re purely focusing on the latter. Imagine having to create the lego blocks first and figure out how they are meant to work, then build a spaceship.<\/p>\n\n\n\n<p>That\u2019s insane and yet that\u2019s the current accepted state of designing prototypes.<\/p>\n\n\n\n<p>Yeah, I understand designers have to create the components initially with both vector components but developers have a harder time with them. Whereas if you\u2019re using code-based components, both parties only have to create it once, so we\u2019re all happy.<\/p>\n\n\n\n<p>It leaves designers more time to spend on other super cool tasks instead of continuously making adjustment meetings with developers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-prototype-developer-handoff-using-merge\">Prototype Developer Handoff Using Merge<\/h2>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"284\" style=\"aspect-ratio: 650 \/ 284;\" width=\"650\" controls src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Design-Handoff-Merge-2.mp4\"><\/video><figcaption class=\"wp-element-caption\">Handoff with UXPin Merge<\/figcaption><\/figure>\n\n\n\n<p>For the prototype shown earlier, let\u2019s start with copying the JSX code from the MergeHeader component, created by the designers into our React application, exactly how the developer handoff will work.<\/p>\n\n\n\n<p>As the source of truth is from the source code itself then you can just copy and paste, with a few adjustments such as adding data to objects and the component imports, then you\u2019re ready to view your app in the browser.<\/p>\n\n\n\n<p>Now, all that\u2019s left to do is the same with the rest of the prototype\u2026 and VOIL\u00c0! You have a fully working production React app, within minutes, exactly the same as the designer made.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"394\" style=\"aspect-ratio: 650 \/ 394;\" width=\"650\" controls src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Design-handoff-merge-3.mp4\"><\/video><\/figure>\n\n\n\n<p>So, in the end, which design process do you think is better?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-improve-design-handoff-with-uxpin-merge\">Improve Design Handoff With UXPin Merge<\/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\/2022\/05\/logo-uxpin-merge.png\" alt=\"logo uxpin merge\" class=\"wp-image-35283\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/logo-uxpin-merge.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/logo-uxpin-merge-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>UXPin Merge can help you improve a lot more than just the handoff process. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page<\/a>\u00a0to discover more benefits of designing in code and\u00a0<a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">request access<\/a>\u00a0to start the integration process. Go to our documentation to read more about\u00a0<a href=\"https:\/\/www.uxpin.com\/docs\/merge\/integrating-your-own-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">integrating Merge with your organization\u2019s design system components<\/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>The following article is written by UXPin&#8217;s developer, Robert Kirkman, who shares how UXPin Merge makes the design handoff easier from both (a developer and designer) perspectives. Once the prototypes are ready for production, the designer hands them off to developers. Such a process can be troublesome \u2013 the right tool stack being a part<\/p>\n","protected":false},"author":194,"featured_media":32912,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,17,440,18],"tags":[],"class_list":["post-32909","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-collaboration-2","category-merge","category-process"],"yoast_title":"","yoast_metadesc":"Check what's the difference between handing off designs with vector-based prototyping tools and with UXPin Merge.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Design Handoff: What it Looks Like with UXPin Merge | UXPin<\/title>\n<meta name=\"description\" content=\"Check what&#039;s the difference between handing off designs with vector-based prototyping tools and with UXPin Merge.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design Handoff: What it Looks Like with UXPin Merge\" \/>\n<meta property=\"og:description\" content=\"Check what&#039;s the difference between handing off designs with vector-based prototyping tools and with UXPin Merge.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-30T10:47:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-30T13:32:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Developer-Designer-handoff-with-Merge.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=\"Robert Kirkman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Robert Kirkman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-handoff-with-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-handoff-with-merge\\\/\"},\"author\":{\"name\":\"Robert Kirkman\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/605d1159a6709badd1c68dc18c81d431\"},\"headline\":\"Design Handoff: What it Looks Like with UXPin Merge\",\"datePublished\":\"2023-03-30T10:47:26+00:00\",\"dateModified\":\"2023-03-30T13:32:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-handoff-with-merge\\\/\"},\"wordCount\":1185,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-handoff-with-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/Developer-Designer-handoff-with-Merge.png\",\"articleSection\":[\"Blog\",\"Collaboration\",\"Merge by UXPin\",\"Process\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-handoff-with-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-handoff-with-merge\\\/\",\"name\":\"Design Handoff: What it Looks Like with UXPin Merge | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-handoff-with-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-handoff-with-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/Developer-Designer-handoff-with-Merge.png\",\"datePublished\":\"2023-03-30T10:47:26+00:00\",\"dateModified\":\"2023-03-30T13:32:44+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/605d1159a6709badd1c68dc18c81d431\"},\"description\":\"Check what's the difference between handing off designs with vector-based prototyping tools and with UXPin Merge.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-handoff-with-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-handoff-with-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-handoff-with-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/Developer-Designer-handoff-with-Merge.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/Developer-Designer-handoff-with-Merge.png\",\"width\":1200,\"height\":600,\"caption\":\"Developer Designer handoff with Merge\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-handoff-with-merge\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design Handoff: What it Looks Like with UXPin Merge\"}]},{\"@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\\\/605d1159a6709badd1c68dc18c81d431\",\"name\":\"Robert Kirkman\",\"description\":\"Just a British man working in Tokyo as a software engineer and technical content writer for UXPin.\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/robert-kirkmanuxpin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Design Handoff: What it Looks Like with UXPin Merge | UXPin","description":"Check what's the difference between handing off designs with vector-based prototyping tools and with UXPin Merge.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/","og_locale":"en_US","og_type":"article","og_title":"Design Handoff: What it Looks Like with UXPin Merge","og_description":"Check what's the difference between handing off designs with vector-based prototyping tools and with UXPin Merge.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2023-03-30T10:47:26+00:00","article_modified_time":"2023-03-30T13:32:44+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Developer-Designer-handoff-with-Merge.png","type":"image\/png"}],"author":"Robert Kirkman","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Robert Kirkman","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/"},"author":{"name":"Robert Kirkman","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/605d1159a6709badd1c68dc18c81d431"},"headline":"Design Handoff: What it Looks Like with UXPin Merge","datePublished":"2023-03-30T10:47:26+00:00","dateModified":"2023-03-30T13:32:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/"},"wordCount":1185,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Developer-Designer-handoff-with-Merge.png","articleSection":["Blog","Collaboration","Merge by UXPin","Process"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/","name":"Design Handoff: What it Looks Like with UXPin Merge | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Developer-Designer-handoff-with-Merge.png","datePublished":"2023-03-30T10:47:26+00:00","dateModified":"2023-03-30T13:32:44+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/605d1159a6709badd1c68dc18c81d431"},"description":"Check what's the difference between handing off designs with vector-based prototyping tools and with UXPin Merge.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Developer-Designer-handoff-with-Merge.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/Developer-Designer-handoff-with-Merge.png","width":1200,"height":600,"caption":"Developer Designer handoff with Merge"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Design Handoff: What it Looks Like with UXPin Merge"}]},{"@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\/605d1159a6709badd1c68dc18c81d431","name":"Robert Kirkman","description":"Just a British man working in Tokyo as a software engineer and technical content writer for UXPin.","url":"https:\/\/www.uxpin.com\/studio\/author\/robert-kirkmanuxpin-com\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/32909","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\/194"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=32909"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/32909\/revisions"}],"predecessor-version":[{"id":44085,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/32909\/revisions\/44085"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/32912"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=32909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=32909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=32909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}