How we handoff designs at Cuddle
In the beginning of 2020, we started using Figma as our primary design tool at Cuddle. Sharing designs with developers, or really, anyone outside of the design team has now become effortless.
However, with every passing project, we also started hearing things such as: “Which page has the latest designs? How does the complete flow looks like? Where to find the notes from our last review meeting?”
Such conversations surfaced three opportunities:
- Flows, states and processes should be easy to communicate to facilitate smoother handoffs
- Setup a file structure for our team to kickstart a new project and make navigating within the file, easy
- To document decisions and meeting notes with every iteration to reference later on
And that’s what we worked on.
The handoff file
The base structure of this template lays out a format of our project files. Over time, we can now expect to form a predictable flow when working on different projects and navigating between files.
Let’s look at each of the sections.
Cover
We start a new project by duplicating the template. And, the first thing we do is update the cover which provides a quick overview of a project and its status. A cover also makes it easier to find a particular file in your Figma’s project view.
Project summary
The project summary page helps provide context about the project. These slides can be useful for someone new to the file or serve as a reminder to someone when they revisit the project after months. Feel free to add or remove slides or line items as required.
Handoff checklist
We got together and reflected on what a successful project handover looks like. During that discussion, we realised that there are a lot of things we do that are common. For example, we reach out to Aayush Jain for product copy. Or we forget to apply the correct colour styles in our designs (well, sometimes).
So, we came up with a checklist as a reminder for the process and steps our designs need to go through before we hand them off. The list of items will be different for different teams.
Final designs
We use this section for designs that are ready for implementation. As you can see in our file or the example here:
- We use separate pages for Desktop web, Android and iOS screens
- Screens of a workflow have a section heading for easier identification
- We utilise arrows, pointers and notes to annotate over our designs
Reviews
We do peer-review sessions twice a week. The objective is to share our work early in the process and gain feedback.
This has often lead us to gain fresh insights into our projects. Moreover, it is a great way to stay updated with what others are doing.
Typically, we use slides from the project summary section to set the context, followed by the actual screens. We also use notes to record the feedback and the minutes from the session.
Playground
As the name suggests, it is a place to explore and refine your design iterations. Don’t mind if it gets messy around here. By the way, I am guilty of arranging and aligning my frames here as well. 🤷♂️
Archive
We use this section for designs that doesn’t make the cut. Sometimes, it does help to refer to older design explorations at a later time. We typically encounter such a situation when dealing with longer or complex projects.
Final thoughts
We hope this template will help you and your team to communicate your design decisions efficiently and with more confidence. We are continually thinking of new ways to collaborate, document and hand-off designs. And, this is our first step towards it.
🔗 Feel free to use this template for yourself or your team.
We’d also love to hear your thoughts and suggestions. Till then, stay safe and take care.
A shoutout to Femke for her fantastic video, that gave us the idea to add a project summary section.
Want to read more of such articles?
Then do follow Cuddle’s Blog 🙌
