Optimize design files for developer handoff

While handing off designs to developers frequently happens after a major project milestone, here are some things you can do earlier in the design process to set up your files to improve handoff.

Set up files for Collaboration

There are lots of different ways to collaborate in Figma. We've rounded up a few tips that we've used ourselves, or seen in action.

Files

• Right-click any frame and set a custom thumbnail so you can identify files at a glance. The thumbnail can also include information such as the project's current status.
• Link to Figma design files in your project specification documents or project plans.
• Create "sticky note" components and add them to the canvas to explain or draw attention to design decisions.
• Apply Export Settings to frames, Components and Assets your Developers may need to export for the final production build.

Pages

• Name pages descriptively to let others know what's ready for development.
• Create a single page with Instances of all your components. Collaborators only have to check this page, as you make changes to your components.
  • Right-click on a component and choose Move to Page or check out the Component Page plugin.

Sections

• Organize files with sections for easier navigation.
• Mark content as “Ready for development” to help with developer handoff.

Styles and components

• Give Styles relevant and descriptive names.
• Add component documentation to your design system. Collaborators can use Go to Main Component to learn more about how to use it.
• Name layers and components based on their IDs
• Add meaningful descriptions to components:
  • When and how collaborators can use them
  • Any variants or states
  • Accessibility and contrast guidance

Invite collaborators to files and prototypes

You can invite collaborators to a prototype, or to the file itself.

• Share a prototype
• Invite a collaborator to a file

When inviting someone to a file, you can choose to give them access as a Viewer or Editor. In most situations, inviting a collaborator as a Viewer will be enough.

Viewers can:

✅  Select layers from the Layers panel or canvas
✅  View properties of selected layers in the Inspect panel
✅  Copy text content from Text objects
✅  Measure distances between objects in the canvas
✅  Add or reply to comments in files and prototypes
✅  View Prototypes in Presentation View
✅  Access components via the Go to Main Component link
✅  Link Dev resources to layers in Dev Mode