Using Figma for Design Handoff 🤝

The Contra product design adopted the following page template to ensure a clean and consistent handoff with the rest of our team members.

Within our project template, we have a dedicated page for designs that are to be handed off. By keeping them in a separate page, other team members know exactly where to look for finalized designs.

We use the following emojis to portray the status of the designs in the handoff page. We add them to the sidebar so anyone can understand what stage we're at at a first glance.

✍️ Handoff page is in progress

⛔️ On hold/not ready

✅ Ready for development

🚢 Shipped

We use a table of contents to outline all of the flows and their associated Linear task (what we use to manage projects) that are in the handoff page. This allows for easy searching and allows for broader understanding.

💙 Blue should be used for product annotations–to callout details that are not easily inferred from the design

❤️ Red should be used for additional notes that the engineers should be aware of and are outlined in the table of contents–known upcoming changes, copy edits, etc.

We use the following table as a helpful to guide to remember any states that can easily be forgotten 🤝

And that's everything in our Figma handoff page! This set up has allowed us to cut down on handoff time and keep our process consistent and clean.