Design Handoff Basics – What Do Developers Need from Designers?
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 handoff process.
We’ve included a list of what engineers need from designers at handoff, what they don’t need, and how to optimize your handovers using sophisticated tools.
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’s UI elements to UXPin, and share them with devs for easier design handover. Create seamless design handoffs with the world’s most advanced design tool. Visit our UXPin Merge page.
Table of contents
A Design Handoff From a Developer’s Perspective
We’ve talked a lot about designer/developer collaboration and creating better design handoff processes. The key takeaway is designers and engineers must start handoffs early in the design process.
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.
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.
What do Developers Need From Designers?
Create a design system (even if your product doesn’t use one)
Many engineers build components in isolation and pull them into project files for front-end development–especially with component-based front-end frameworks like React. Creating a design system or style guide for your projects will help facilitate this workflow, making it easy to develop the final product.
Most design tools require additional plugins or extensions, but UXPin offers its Design Systems feature standard with every plan. UXPin has four categories for Design Systems:
- Colors
- Typography
- Assets
- Components
Designers can also include written design system documentation, 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.
Organized components
Beyond creating a design system, designers must organize components so that it’s easier to code them systematically. This example from Material Design arranges UI elements by type.
Designers could also categorize components using atomic design principles:
- Atoms: foundational elements
- Molecules: UI components
- Organisms: Larger components and patterns
File structure and naming convention
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 “language barrier” between designers and engineers.
Documentation
Designers must create written documentation to support annotations on mockups and prototypes. The written documentation is a story to provide context to interactions, interfaces, and user flows–what happens when a user clicks “element X”? What are the success/error/warning messages? What happens if a user isn’t logged in?
Information architecture
Prototypes and mockups aren’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.
Wireframes or flowcharts are the best methods for presenting information architecture. Designers can share these with engineers using Miro or a free tool like Google Jamboard. Alternatively, UXPin provides a User Flows Design Library to build flowcharts for your information architecture.
Engineers can use this information architecture to organize file structures and prepare each screen before they start development.
Mockups and Prototypes
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.
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.
Some key UXPin prototyping features include:
- States: 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 accordions, multi-level navigation, and more.
- Interactions: UXPin offers an extensive list of triggers, actions, and animations to replicate code-like interactivity. Conditional Interactions allow designers to create dynamic experiences based on user actions, giving engineers an accurate reference for development.
- Variables: UXPin features fully functioning forms designers can use to capture user inputs and use that data elsewhere in the prototype. Variables help engineers understand how the product’s inputs must work, including vital error messages to help users complete tasks.
- Expressions: 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’s Javascript functions.
Specifications
Specifications give engineers detailed information about an interface’s CSS properties like spacing, font sizes, heights, widths, etc. Design tools usually have plugins or extensions to automate this process.
UXPin’s built-in Spec Mode allows developers to select UI elements to view specifications, including automatically generated starter CSS they can copy/paste.
Checklist
A design handoff checklist 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.
What Developers Don’t Need
What developers don’t need 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.
Engineers don’t need access to your UX research artifacts like user personas, journey maps, competitive analysis, etc. High-level overviews, reports, and summaries are sufficient to outline the problems your designs solve.
Pick Developer-Friendly Design Handoff Tool
Designers who use image-based design tools like Figma and Sketch must rely on additional tools and plugins for design handoffs. These extras increase design costs and create room for error.
Even with these extra tools, designers still battle with fidelity and functionality, limiting prototyping scope. Sometimes, they use videos and GIFs to demonstrate interactions, which need additional context and clarification for engineering teams and stakeholders.
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.
Engineers can view prototypes, mockups, documentation, specs, and components and download assets from one interface. Teams can collaborate during handoffs via UXPin’s Comments and even assign comments to direct questions to specific team members.
UXPin also integrates with Slack and Jira so product development teams and stakeholders can stay up-to-date with design handoffs and project status.
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’t have to switch between platforms. UXPin’s high-quality prototypes mean designers spend less time explaining features and interactivity, creating a smoother transition from design to code.
Seamless (NO) Handover With UXPin Merge
Where UXPin makes design handoffs easier, UXPin’s Merge technology facilitates a seamless (no) handover process where there is no designing or writing front-end code! Designers drag and drop, while engineers copy/paste.
UXPin Merge syncs a design system (private or open source) hosted in a repo to UXPin’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.
Any changes to the component library’s repository automatically sync to UXPin, notifying design teams of the update. Merge’s Version Control 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.
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 Properties Panel, which UXPin renders as JSX for engineers to copy at design handoffs.
Nick Elliott, Design System Product Owner and Regional Head of Product Design at Iress, noted that Merge has a huge potential for streamlining the company’s handoff process:
“The engineer no longer needs to start from scratch and already knows what components and settings to use. It will help us avoid the ‘design drift’ we so often see. Things like spacing and typography should all be aligned, as it is all driven from one place.”
Ready to make painful design handoffs a thing of the past? Switch to UXPin Merge create a seamless (no) handover product development process. Visit our Merge page for more details and how to request access.
