Using Figma to improve the design to developer handoff process.
How one source of truth can go a long way in team communication.
With product features becoming increasingly complex month after month, teams are also finding it increasingly difficult to keep track of the nitty-gritty of the project while it progresses over weeks and sometimes, months.
With that in mind we started looking deeper into this problem and trying to understand the points of friction so that we as designers could help make our part of the process as smooth as it can be. It initially started as an internal experiment to help reduce friction between the design and engineering teams during complex handoffs and feature building sprints. With the onset of Covid-19 and the company working from home, this became the team’s go-to strategy for features releases.
The Problem:
- Developer Handoffs are currently too complex: With a variety of tools, documents and meetings, it’s very difficult for engineering teams to figure out how and where to refer to for a question that they might have post the handoff.
- Lack of Documentation: It’s during the engineering phase of the project that multiple calls get taken which weren’t foreseen during the initial stages and hence aren’t documented anywhere.
Our Goal:
To reduce the haze between handoffs to execution and document the change.
Understanding the Problem:
We found that the number of tools we were using to carry out the handoff increased the complexity and quality of the handoff.
Given below are the tools that we used and their uses:
- Google Docs: Product Requirement Document
- Figma: Design Handoff
- Whimsical: Flowcharts and User Flows
- Personal Notebook: Notes and Thoughts
- Jira: Configurations in text, values and other requirements.
The Solution:
Using Figma as the source of truth for this handoff, we merged the functionality of a few of the tools using 3rd party plugins to help us do the same, with less.
We replaced external flow diagrams with Flowkit which helped visualise the flows using the screens itself. This gave the team a much wider view of the entire project as well as the minute details of positive and negative flows.
We then created our own custom sticky note components for Personal Notes, Feedback, Developer Changes and other items like configs for easy referencing.
This in turn helped us keep our thoughts, notes, feedback and other team-wide required information right next to the files that goes through multiple hands. It’s helped reduce complexity and confusion across teams while developing a feature.
With the onset of Covid-19 and our company moving to working from home, we used this time to implement this new plan and understand it’s pros and cons.
We found that our team was more confident with the project at hand and the design team was a lot clearer when building various components and their variations as all handoffs were read right off the Figma file. If anything needed to be added, it was done in real time.
The team continues to iterate and test out various methods to bridge this gap of communication especially as things get harder while working remotely.
This article is a TLDR version of a longer case study on bridging the gap. Link to the case study will be updated soon.
This project came together with the help of Parijat Shekar, Meet Sukhwani and Vivek V Ram. Thanks guys!
