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.
Annotations
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.
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.
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:
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
- Run the Pinterest Design Figma plugin
You can find all the assets and guidance in our Handoff Kit library.