Design handoff

Instructions and tolls to help you setting up design files for develpment.

When your design file is ready to hand off for development, we ask you to follow the best practices below to make it super clear what designs need to be implemented.
We've created a library to facilitate your design handoff process by providing tips, annotation assets, design specs, and ready-to-use components. You can enable our Handoff Kit library

in your Figma files and get all its benefits.

Adding covers to files

The cover should have all the essential information to help design system users understand its context. It includes: the project type, title, related Jira ticket and platform, status, and owner.

We recommend using our Handoff Kit

Cover component when adding covers to design system files. Standard covers will keep our files consistent and make scanning for Gestalt's resources easier.

Gestalt available covers design, with and without a thumbnail.


Use our annotation tools to clarify your design with engineers and product managers. See below our available annotation components:

Accessibility annotations: Assets to make documenting accessibility easy
Contextual notes: Problem statements and any contextual information cards
Flow notes: Annotations to clarify features, design decisions or highlight something in your layout
Sticky notes: Post-it notes for comments, thoughts and any feedback

Our annotations work in both themes, light and dark mode.

An example of how we annotate in our files using the Handoff kit annotations assets.

Flows and gestures

Use the flows assets to show how one screen flows to another.
Use the gestures assets to indicate swipes, pans and zooms.

Similar to our annotations, the flows and gestures assets work in both light and dark themes.

An example of arrows flows and gestures assets from the Handoff kit.

Handoff structure

When creating handoff pages, it’s important to begin with control surfaces, or in other words, how things currently appear.
Handoff can happen multiple times, and we use Emojis to distinguish status of the design iteration, like listed below:

🤝 Latest signed off version
✏ WIP (work in progress) handoff page

Best practices

  • Name your final design page as Handoff, prefixing the page name with the appropriate Emoji
  • Nest pages to make them more readable (just add 4 spaces before the page name, extra spaces adds more indents)
  • If a handoff version goes out of date, add a version label like v1. Do as many versions as you need.
  • Use generic names for final design handoff pages
  • Use random Emojis. Using the suggested Emojis will help us to identity your work progress

See below an example of how we name handoff pages on Figma:

An example of how we name our handoff pages. It shows our Figma file with the handoff titles.

Final considerations

Ensure you meet the criteria below before sending your design for development:

  • Handoff pages follows Gestalt's recommendation
  • Files have a control section, meaning displaying the current design for reference
  • Use of annotations
  • Usse of connectors to indicate user flows
  • The design doesn't present accessibility issues

You can find all the assets and guidance in our Handoff Kit library