How to handoff UI Design to Dev

Recently I did a course on UI Handoff; here are my learnings.

Akshat Srivastava
UX Planet
Published in
5 min readJul 28, 2021

--

Photo by UX Store on Unsplash

You spend hours making a pixel perfect design, but when it’s finally developed, you wonder why it looks different in the browser from what you have designed. Weird spacing in some devices, blurry images and whatnot!! Let’s see how can we fix it? No matter whether you are using FIGMA🧡 or SKETCH💎

Overview of Design and Handoff Tools-

Sketch is a design tool that needs to be paired with a handoff tool like Abstract, Zeplin or Invision, while Figma is an all-in-one solution for designing, prototyping, and handoff.

Structure your file-

Structure the pages of the Figma/Sketch file into different pages and sections. Create a separate page for all your master components. It acts as the single source of truth for all your UI interfaces. Create different pages for design and development and use dividers to keep them separate.

The design pages are for design iterations, and the developer should not interact with them. The dev pages include final UI designs, style guides, components style, flowcharts and interactions (if required).

What does the developer needs?

Design:

An overview of what your design looks like in all screens/UI components it includes.

Color Styles:

You need to make an overview of all the colors you’re using or planning to use on your project. Add your color to a color style so that it can be reused throughout your project. Sometimes you might need to convert colors from RGB to CMYK or vice versa; for this, check out this link.

Text Styles:

Mention the typefaces you are using in your project. Do not use multiple fonts in your design. Stick to 1–2 fonts and be consistent throughout your designs. Create a font style and name them based on where they are being used, i.e. Heading 1, Heading 2, Body, Link text etc. Define the size, line height and weight of the font.

Other Styles:

Define any other styles being used in the project like shadows, hovers, blurs, etc.

Grid System and Distances:

Grids- Define the horizontal layout and how your grids behave across different screen sizes. The grids can be fixed or fluid according to the different screen sizes. ​

Spacing- Define how your elements are distributed vertically and horizontally in relation to the screen and each other within the grid​

Breakpoints- Breakpoints are pixel values that a developer/designer can define. When a responsive website reaches those pixel values, a transformation in terms of layout, sizing, spacing, etc., occurs so that the website offers an optimal user experience.​

Components:

Save your components in your asset library for easier access throughout the project.

The overview of components include ​

  • The Master Component​
  • The component in different states like hovered, clicked, etc​
  • Info section about the specs of the component ​

Define your component behaviour as well, how they open, stretch and respond to interactions. ​Download pre-made material library in Figma from the community section​-

Images/Assets:

Define images as components​. Set their behaviour in different states and how the surrounding behaves in those states.​ Mention how the image is spaced according to the title and ​define how the images sit within the website and the grids. ​

The behaviour of Grids:

Responsive Grid (top): is fluid and adaptive; it has breakpoints that create a range. Within the range, the design behaves fluid.

Adaptive Grid (bottom): has several fixed-layout designs. The one displayed depends on the screen width of the viewer. It has fixed breakpoints.

Flowchart & Prototype:

Create an overview of the flowchart between different screens and prototype the interactions to understand better the website's feel and for the sake of testing.​

Flow chart — Use arrows and descriptions to explain the flow and relation between the screens.​

Prototype — Inform the developer about the behaviour of the component during interaction​

Handoff with FIGMA:

Once you are done with all your structuring and documentation, the handoff with Figma is simple, click on the Share button on the top right corner and add developers to your file. There are two ways for this, either you can enter their email and click on the invite button or copy the shareable link of your file (make sure you set the permission to “Anyone with this link can view”). Developers don’t need edit access to inspect the elements in Figma.

Handoff with SKETCH + Handoff Tool:

To handoff designs using Sketch, you can use a handoff tool, say Zeplin. Install Zeplin on your PC, create a new project. Now open the Sketch file, and from the Zeplin plugin, you can export all your final designs. You can also export the symbols from all pages. You can see all your exported screens on the dashboard tab of the Zeplin app.

Final thoughts:

While designing, keep the bigger picture in mind “THE PRODUCT”, and the product will provide a seamless experience only when it is designed and developed well. When there is a discrepancy between design and dev, there is a communication gap between designer and developer. So it is important to talk to your team members and find out what applications they are already using or are familiar with. Be involved in every stage of the product.

If you liked this article, do clap👏!! You can find me on Twitter or Instagram.

--

--

Published in UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Written by Akshat Srivastava

Product Designer | Undergrad at IIT Roorkee

Responses (6)