{"id":37814,"date":"2022-12-05T11:16:21","date_gmt":"2022-12-05T19:16:21","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=37814"},"modified":"2026-05-08T09:52:06","modified_gmt":"2026-05-08T16:52:06","slug":"what-developers-need-from-designers-during-design-handoff","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/","title":{"rendered":"Design Handoff Basics \u2013 What Do Developers Need from Designers?"},"content":{"rendered":"<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\/12\/The-Responsibilities-of-Developers-During-Design-Handoff-1024x512.png\" alt=\"The Responsibilities of Developers During Design Handoff\" class=\"wp-image-37850\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/The-Responsibilities-of-Developers-During-Design-Handoff-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/The-Responsibilities-of-Developers-During-Design-Handoff-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/The-Responsibilities-of-Developers-During-Design-Handoff-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/The-Responsibilities-of-Developers-During-Design-Handoff.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p>Design handoffs are a tense time. Designers and engineers speak separate languages and work within different constraints, making communication and collaboration challenging.<\/p>\n<p>The first step to bridging this gap is defining what engineers need for development. Communicating these needs at the start of the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-process-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">design process<\/a> will help designers prepare accordingly and streamline the design handoff process.<\/p>\n<p>We&#8217;ve included a list of what engineers need from designers at handoff, what they don&#8217;t need, and how to optimize your handovers using sophisticated tools.<\/p>\n<p>One of such tools is UXPin Merge. It enables you to design prototypes with a single source of truth between design and engineering, that is interactive components. Designers can bring their app&#8217;s UI elements to UXPin, and share them with devs for easier design handover. Create seamless design handoffs with the world&#8217;s most advanced design tool. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our UXPin Merge page<\/a>.<\/p>\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<p>            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\"><br \/>\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button><br \/>\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<\/p><\/div>\n<\/section>\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}<\/p>\n<p>.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}<\/p>\n<p>.discover-merge__left {\n    width: 50%;\n}<\/p>\n<p>.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}<\/p>\n<p>.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}<\/p>\n<p>.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}<\/p>\n<p>.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}<\/p>\n<p>.discover-merge__button:hover {\n    cursor: pointer;\n}<\/p>\n<p>.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}<\/p>\n<p>@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}<\/p>\n<p>@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }<\/p>\n<p>    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}<\/p>\n<\/style>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<div class=\"wp-block-yoast-seo-table-of-contents yoast-table-of-contents\">\n<h2>Table of contents<\/h2>\n<ul>\n<li><a href=\"#h-a-design-handoff-from-a-developer-s-perspective\" data-level=\"2\">A Design Handoff From a Developer&#8217;s Perspective<\/a><\/li>\n<li><a href=\"#h-what-do-developers-need-from-designers\" data-level=\"2\">What do Developers Need From Designers?<\/a>\n<ul>\n<li><a href=\"#h-create-a-design-system-even-if-your-product-doesn-t-use-one\" data-level=\"3\">Create a design system (even if your product doesn&#8217;t use one)<\/a><\/li>\n<li><a href=\"#h-organized-components\" data-level=\"3\">Organized components<\/a><\/li>\n<li><a href=\"#h-file-structure-and-naming-convention\" data-level=\"3\">File structure and naming convention<\/a><\/li>\n<li><a href=\"#h-documentation\" data-level=\"3\">Documentation<\/a><\/li>\n<li><a href=\"#h-information-architecture\" data-level=\"3\">Information architecture<\/a><\/li>\n<li><a href=\"#h-mockups-and-prototypes\" data-level=\"3\">Mockups and Prototypes<\/a><\/li>\n<li><a href=\"#h-specifications\" data-level=\"3\">Specifications<\/a><\/li>\n<li><a href=\"#h-checklist\" data-level=\"3\">Checklist<\/a><\/li>\n<li><a href=\"#h-what-developers-don-t-need\" data-level=\"3\">What Developers Don&#8217;t Need<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#h-pick-developer-friendly-design-handoff-tool\" data-level=\"2\">Pick Developer-Friendly Design Handoff Tool<\/a><\/li>\n<li><a href=\"#h-seamless-no-handover-with-uxpin-merge\" data-level=\"2\">Seamless (NO) Handover With UXPin Merge<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\" id=\"h-a-design-handoff-from-a-developer-s-perspective\">A Design Handoff From a Developer&#8217;s Perspective<\/h2>\n<p>We&#8217;ve talked a lot about <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/designers-developers-collaboration\/\" target=\"_blank\" rel=\"noreferrer noopener\">designer\/developer collaboration<\/a> and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/better-design-handoff\/\" target=\"_blank\" rel=\"noreferrer noopener\">creating better design handoff processes<\/a>. The key takeaway is designers and engineers must start handoffs early in the design process.<\/p>\n<p>Engineers must provide a list to designers of the files, documentation, assets, and specs they need to develop the final product. The teams must also decide on a file structure and naming convention to make everything easy to locate.<\/p>\n<p>Defining technical and developer needs at the start of a project enables design teams to set up tools, workflows, and infrastructure (files, project management software, etc.) to support a streamlined handoff process.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-what-do-developers-need-from-designers\">What do Developers Need From Designers?<\/h2>\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\/12\/code-developer-design-1.png\" alt=\"code developer design 1\" class=\"wp-image-37823\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/code-developer-design-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/code-developer-design-1-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n<h3 class=\"wp-block-heading\" id=\"h-create-a-design-system-even-if-your-product-doesn-t-use-one\">Create a design system <em>(even if your product doesn&#8217;t use one)<\/em><\/h3>\n<p>Many engineers build components in isolation and pull them into project files for front-end development\u2013especially with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/react-for-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">component-based front-end frameworks like React<\/a>. Creating a design system or style guide for your projects will help facilitate this workflow, making it easy to develop the final product.<\/p>\n<p>Most design tools require additional plugins or extensions, but UXPin offers its <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-systems\/\">Design Systems feature<\/a> standard with every plan. UXPin has four categories for Design Systems:<\/p>\n<ul class=\"wp-block-list\">\n<li>Colors<\/li>\n<li>Typography<\/li>\n<li>Assets<\/li>\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">Components<\/a><\/li>\n<\/ul>\n<p>Designers can also include written <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-documentation-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system documentation<\/a>, so everything is in one place. If an existing product already uses elements from your design system, find the correct file names and inform engineers to prevent duplicate work.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-organized-components\">Organized components<\/h3>\n<p>Beyond creating a design system, designers must organize components so that it&#8217;s easier to code them systematically. This example from <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-design-system-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">Material Design<\/a> arranges UI elements by type.<\/p>\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/MmCoSZyiT3QBdoi5zAJWtWMxGXMYPfCJbF34eTv36_bgZlKRrXeuHWEauYLzrll2cQ-p3aisYGf5oVBMlZINAYNbMf48UVWsxg7bFHf9UUXpejH_VXkc8mW793n4D6bkDYXGJLo8k8K4BS_-GtoodIN5KcEF64B3PRyzp1O-T0ERbZVpGKhrItw8MiGHmQ\" alt=\"Material Design is great at organizing components\" width=\"650\"\/><\/figure>\n<p>Designers could also categorize components using <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">atomic design principles<\/a>:<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>Atoms<\/strong>: foundational elements<\/li>\n<li><strong>Molecules<\/strong>: UI components&nbsp;<\/li>\n<li><strong>Organisms<\/strong>: Larger components and patterns<\/li>\n<\/ul>\n<h3 class=\"wp-block-heading\" id=\"h-file-structure-and-naming-convention\">File structure and naming convention<\/h3>\n<p>Engineers work with repositories where file structure and naming conventions are essential for successful workflows and collaboration. Mirroring these practices for design projects reduces the &#8220;language barrier&#8221; between designers and engineers.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-documentation\">Documentation<\/h3>\n<p>Designers must create written documentation to support annotations on <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-a-mockup-the-final-layer-of-ui-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">mockups<\/a> and prototypes. The written documentation is a story to provide context to interactions, interfaces, and user flows\u2013<em>what happens when a user clicks &#8220;element X&#8221;?<\/em> <em>What are the success\/error\/warning messages? What happens if a user isn&#8217;t logged in?<\/em><\/p>\n<h3 class=\"wp-block-heading\" id=\"h-information-architecture\">Information architecture<\/h3>\n<p>Prototypes and mockups aren&#8217;t enough to develop websites and digital products. Engineers need to see how everything goes together and where user flows start and end through information architecture.<\/p>\n<p>Wireframes or flowcharts are the best methods for presenting information architecture. Designers can share these with engineers using <a href=\"https:\/\/miro.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Miro<\/a> or a free tool like <a href=\"https:\/\/edu.google.com\/intl\/ALL_us\/jamboard\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google Jamboard<\/a>. Alternatively, UXPin provides a <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-system-libraries\/#built-in-design-libraries\" target=\"_blank\" rel=\"noreferrer noopener\">User Flows Design Library<\/a> to build flowcharts for your information architecture.<\/p>\n<p>Engineers can use this information architecture to organize file structures and prepare each screen before they start development.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-mockups-and-prototypes\">Mockups and Prototypes<\/h3>\n<p>Engineers use mockups to develop each user interface and prototypes to create navigational points, interactions, and animations. The higher the fidelity and interactivity of prototypes, the easier it is for engineers to interpret and replicate them with less documentation and explanation.<\/p>\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\/prototyping-elements-components-building.png\" alt=\"prototyping elements components building\" class=\"wp-image-37825\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/prototyping-elements-components-building.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/prototyping-elements-components-building-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n<p>While most design tools create beautiful mockups, they lack features for interactive prototyping. UXPin is powered by code, giving designers tools and features to build fully interactive prototypes that look and feel like the final product.<\/p>\n<p>Some key UXPin prototyping features include:<\/p>\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/states\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>States<\/strong><\/a><strong>:<\/strong> Apply multiple states to a single element, each with different properties, interactions, and animations. Designers can use States to create simple interactivity like button states or complex components like <a href=\"https:\/\/www.uxpin.com\/examples\/accordion\" target=\"_blank\" rel=\"noreferrer noopener\">accordions<\/a>, <a href=\"https:\/\/www.uxpin.com\/examples\/multilevel-dropdown-navigation\" target=\"_blank\" rel=\"noreferrer noopener\">multi-level navigation<\/a>, and more.<\/li>\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Interactions<\/strong><\/a><strong>:<\/strong> UXPin offers an extensive list of triggers, actions, and animations to replicate code-like interactivity. <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions#conditional-interactions\" target=\"_blank\" rel=\"noreferrer noopener\">Conditional Interactions<\/a> allow designers to create dynamic experiences based on user actions, giving engineers an accurate reference for development.<\/li>\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/variables\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Variables<\/strong><\/a><strong>:<\/strong> UXPin features <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/elements\/#forms\" target=\"_blank\" rel=\"noreferrer noopener\">fully functioning forms<\/a> designers can use to capture user inputs and use that data elsewhere in the prototype. Variables help engineers understand how the product&#8217;s inputs must work, including vital error messages to help users complete tasks.<\/li>\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/expressions\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Expressions<\/strong><\/a><strong>:<\/strong> Javascript-like functions to create complex interactivity like form validation or fully functioning shopping carts. Engineers can use these Expressions as a foundation for writing the product&#8217;s Javascript functions.<\/li>\n<\/ul>\n<h3 class=\"wp-block-heading\" id=\"h-specifications\">Specifications<\/h3>\n<p>Specifications give engineers detailed information about an interface&#8217;s CSS properties like spacing, font sizes, heights, widths, etc. Design tools usually have plugins or extensions to automate this process.<\/p>\n<p>UXPin&#8217;s built-in <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/spec-mode\" target=\"_blank\" rel=\"noreferrer noopener\">Spec Mode<\/a> allows developers to select UI elements to view specifications, including automatically generated starter CSS they can copy\/paste.<\/p>\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/J6mFbnY7FQnOFt3nuIW2XuOKrTx9zzW-AhGFJWr7DoAq-GDrKi8Zye_AA85KdcQ2S-wJOavsOGovC4CAZJNdx25ery0A4PO2GzPhdCur_sIopZ0R04uCEIpu4yO-ETojGx-HPVY0c5DqUynfdfadOcB3rQm433IsGXhB_wPyz55H61HwOeEhZOXA1lBblQ\" alt=\"UXPin Spec mode will help you with developer handoff\" width=\"650\"\/><\/figure>\n<h3 class=\"wp-block-heading\" id=\"h-checklist\">Checklist<\/h3>\n<p>A <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-checklist\/\" target=\"_blank\" rel=\"noreferrer noopener\">design handoff checklist<\/a> itemizes everything designers give to engineers. This checklist is one of the most important documents because it ensures designers remember to hand everything over and engineers confirm that they receive everything.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-what-developers-don-t-need\">What Developers <em>Don&#8217;t<\/em> Need<\/h3>\n<p>What developers <strong><em>don&#8217;t<\/em><\/strong><strong> need<\/strong> for design handoffs is just as important as what they do! As you can see above, there are many artifacts, and documentation engineers must reference to develop the final product. Too much information can confuse and delay development while engineers sift through unnecessary documentation.<\/p>\n<p>Engineers don&#8217;t need access to your <a href=\"https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX research artifacts<\/a> like user personas, journey maps, competitive analysis, etc. High-level overviews, reports, and summaries are sufficient to outline the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-pain-points-in-ux-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">problems your designs solve<\/a>.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-pick-developer-friendly-design-handoff-tool\">Pick Developer-Friendly Design Handoff Tool<\/h2>\n<p>Designers who use image-based design tools like <a href=\"https:\/\/www.uxpin.com\/uxpin-vs-figma\" target=\"_blank\" rel=\"noreferrer noopener\">Figma<\/a> and <a href=\"https:\/\/get.uxpin.com\/uxpin-vs-sketch\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sketch<\/a> must rely on additional <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">tools and plugins for design handoffs<\/a>. These extras increase design costs and create room for error.<\/p>\n<p>Even with these extra tools, designers still <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/high-fidelity-prototyping-low-fidelity-difference\/\" target=\"_blank\" rel=\"noreferrer noopener\">battle with fidelity<\/a> and functionality, limiting prototyping scope. Sometimes, they use videos and GIFs to demonstrate <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-figma-designs\/\" target=\"_blank\" rel=\"noreferrer noopener\">interactions<\/a>, which need additional context and clarification for engineering teams and stakeholders.<\/p>\n<p>UXPin is an end-to-end design tool with everything designers need from concept to final design handoff. Designers can build prototypes that accurately replicate the final product experience, leaving no ambiguity regarding features, navigation, interactions, and animations.<\/p>\n<p>Engineers can view prototypes, mockups, documentation, specs, and components and download assets from one interface. Teams can collaborate during handoffs via <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/comments\">UXPin&#8217;s Comments<\/a> and even <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/comments#assigning-comments\">assign comments<\/a> to direct questions to specific team members.<\/p>\n<p>UXPin also <a href=\"https:\/\/www.uxpin.com\/docs\/dashboard\/integration-with-slack\/\">integrates with Slack<\/a> and <a href=\"https:\/\/www.uxpin.com\/docs\/dashboard\/jira-integration\">Jira<\/a> so product development teams and stakeholders can stay up-to-date with design handoffs and project status.<\/p>\n<p>Using one tool for ideation, wireframing, mockups, prototyping, testing, user flows, design systems, documentation, and design handoffs creates a productive environment for designers as they don&#8217;t have to switch between platforms. UXPin&#8217;s high-quality prototypes mean designers spend less time explaining features and interactivity, creating a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/convert-design-to-code-better-way\/\" target=\"_blank\" rel=\"noreferrer noopener\">smoother transition from design to code<\/a>.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-seamless-no-handover-with-uxpin-merge\">Seamless (NO) Handover With UXPin Merge<\/h2>\n<p>Where UXPin makes design handoffs easier, <a href=\"https:\/\/www.dreamfactory.com\" target=\"_blank\" rel=\"noopener noreferrer\">UXPin&#8217;s Merge technology<\/a> facilitates a seamless (no) handover process where there is <strong>no designing or writing front-end code<\/strong>! Designers drag and drop, while engineers copy\/paste.<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a> syncs a design system (private or open source) hosted in a repo to UXPin&#8217;s design editor, giving designers the same component library engineers use to develop the final product. This single source of truth means designers and engineers speak the same languages and work within the same constraints.<\/p>\n<p>Any changes to the component library&#8217;s repository automatically sync to UXPin, notifying design teams of the update. Merge&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/version-control\/\" target=\"_blank\" rel=\"noreferrer noopener\">Version Control<\/a> allows designers to choose when to switch to the latest version, and they can change to early versions of the design system at any time.<\/p>\n<p>Merge components are fully interactive and include properties defined by the design system, including states, colors, sizing, etc. Designers can adjust these properties via the <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interface\/#properties-panel\" target=\"_blank\" rel=\"noreferrer noopener\">Properties Panel<\/a>, which <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/authoring-and-managing-jsx-presets\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin renders as JSX<\/a> for engineers to copy at design handoffs.<\/p>\n<p>Nick Elliott, Design System Product Owner and Regional Head of Product Design at Iress, noted that Merge has a huge potential for <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/iress-design-tool-review\/\" target=\"_blank\" rel=\"noreferrer noopener\">streamlining the company&#8217;s handoff process<\/a>:<\/p>\n<p><em>&#8220;The engineer no longer needs to start from scratch and already knows what components and settings to use. It will help us avoid the &#8216;design drift&#8217; we so often see. Things like spacing and typography should all be aligned, as it is all driven from one place.&#8221;<\/em><\/p>\n<p><em>Ready to make painful design handoffs a thing of the past?<\/em> Switch to UXPin Merge create a seamless (no) handover product development process. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page<\/a> for more details and how to request access.<\/p>\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>Design handoffs are a tense time. Designers and engineers speak separate languages and work within different constraints, making communication and collaboration challenging. The first step to bridging this gap is defining what engineers need for development. Communicating these needs at the start of the design process will help designers prepare accordingly and streamline the design<\/p>\n","protected":false},"author":3,"featured_media":37850,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,17,442,444,440],"tags":[],"class_list":["post-37814","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-collaboration-2","category-component-driven-prototyping","category-design-handoff","category-merge"],"yoast_title":"What Developers Need from Designers During Design Handoff?","yoast_metadesc":"Find out what you need to prepare before design-developer handoff. Make sure your engineers have everything they need to build your design.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>What Developers Need from Designers During Design Handoff?<\/title>\n<meta name=\"description\" content=\"Find out what you need to prepare before design-developer handoff. Make sure your engineers have everything they need to build your 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\/what-developers-need-from-designers-during-design-handoff\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design Handoff Basics \u2013 What Do Developers Need from Designers?\" \/>\n<meta property=\"og:description\" content=\"Find out what you need to prepare before design-developer handoff. Make sure your engineers have everything they need to build your design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-05T19:16:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-08T16:52:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/The-Responsibilities-of-Developers-During-Design-Handoff.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\\\/what-developers-need-from-designers-during-design-handoff\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-developers-need-from-designers-during-design-handoff\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Design Handoff Basics \u2013 What Do Developers Need from Designers?\",\"datePublished\":\"2022-12-05T19:16:21+00:00\",\"dateModified\":\"2026-05-08T16:52:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-developers-need-from-designers-during-design-handoff\\\/\"},\"wordCount\":1610,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-developers-need-from-designers-during-design-handoff\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/The-Responsibilities-of-Developers-During-Design-Handoff.png\",\"articleSection\":[\"Blog\",\"Collaboration\",\"Component-Driven Prototyping\",\"Design Handoff\",\"Merge by UXPin\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-developers-need-from-designers-during-design-handoff\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-developers-need-from-designers-during-design-handoff\\\/\",\"name\":\"What Developers Need from Designers During Design Handoff?\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-developers-need-from-designers-during-design-handoff\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-developers-need-from-designers-during-design-handoff\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/The-Responsibilities-of-Developers-During-Design-Handoff.png\",\"datePublished\":\"2022-12-05T19:16:21+00:00\",\"dateModified\":\"2026-05-08T16:52:06+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Find out what you need to prepare before design-developer handoff. Make sure your engineers have everything they need to build your design.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-developers-need-from-designers-during-design-handoff\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-developers-need-from-designers-during-design-handoff\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-developers-need-from-designers-during-design-handoff\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/The-Responsibilities-of-Developers-During-Design-Handoff.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/The-Responsibilities-of-Developers-During-Design-Handoff.png\",\"width\":1200,\"height\":600,\"caption\":\"The Responsibilities of Developers During Design Handoff\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-developers-need-from-designers-during-design-handoff\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design Handoff Basics \u2013 What Do Developers Need from Designers?\"}]},{\"@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":"What Developers Need from Designers During Design Handoff?","description":"Find out what you need to prepare before design-developer handoff. Make sure your engineers have everything they need to build your 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\/what-developers-need-from-designers-during-design-handoff\/","og_locale":"en_US","og_type":"article","og_title":"Design Handoff Basics \u2013 What Do Developers Need from Designers?","og_description":"Find out what you need to prepare before design-developer handoff. Make sure your engineers have everything they need to build your design.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/","og_site_name":"Studio by UXPin","article_published_time":"2022-12-05T19:16:21+00:00","article_modified_time":"2026-05-08T16:52:06+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/The-Responsibilities-of-Developers-During-Design-Handoff.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\/what-developers-need-from-designers-during-design-handoff\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Design Handoff Basics \u2013 What Do Developers Need from Designers?","datePublished":"2022-12-05T19:16:21+00:00","dateModified":"2026-05-08T16:52:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/"},"wordCount":1610,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/The-Responsibilities-of-Developers-During-Design-Handoff.png","articleSection":["Blog","Collaboration","Component-Driven Prototyping","Design Handoff","Merge by UXPin"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/","name":"What Developers Need from Designers During Design Handoff?","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/The-Responsibilities-of-Developers-During-Design-Handoff.png","datePublished":"2022-12-05T19:16:21+00:00","dateModified":"2026-05-08T16:52:06+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Find out what you need to prepare before design-developer handoff. Make sure your engineers have everything they need to build your design.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/The-Responsibilities-of-Developers-During-Design-Handoff.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/The-Responsibilities-of-Developers-During-Design-Handoff.png","width":1200,"height":600,"caption":"The Responsibilities of Developers During Design Handoff"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Design Handoff Basics \u2013 What Do Developers Need from Designers?"}]},{"@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\/37814","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=37814"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/37814\/revisions"}],"predecessor-version":[{"id":59429,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/37814\/revisions\/59429"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/37850"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=37814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=37814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=37814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}