▶️ Beginner 4: Prepare for handoff

Design is a collaborative process that involves stakeholders and collaborators across your company.

• PMs can use Figma or FigJam for brainstorming or to give feedback through comments.
• Writers can leave suggestions for copy, or edit it directly.
• Researchers and designers can share and test prototypes.
• And developers can inspect properties, copy code, and export assets.

In this Figma for beginners series, we've demystified this process by following the evolution of a mobile app from initial wireframes to interactive prototype.

Sharing early and often encourages collaboration with the right people, at the right time. There are a few things we can do to set up our files and make this a seamless process. Prepare files for handoff →

Custom file thumbnails

With the growing popularity of open design, members of your team might view and contribute to files at any point in time. To help orient people to our files, we can create custom thumbnails.

This frame has the thumbnail dimensions of 1920 x 960. Anything within the 1600 pixel safe area, in the center of our frame, is usually visible in the file browser. We can include information like:

• The current status of the file
• An image or illustration of the file's contents
• Information about our team
• Hyperlinks to pages, frames, or external documentation, like specifications and requirements.

Right-click on a frame in the canvas and choose Set as thumbnail. Now, when your team members see your file in the file browser, or open it in the editor, they can easily see that information. Set custom thumbnails →

Invites and sharing permissions

When and how you invite your teammates to your file may vary.

Invite developers early to give feedback on the viability of your explorations or, near the end of the process when you're ready to handoff designs for production.

Invite collaborators to your files with edit or view access. Viewers can still comment on files and prototypes and export static assets. They're also free!

Embed files and prototypes in other websites, like your product management tools, or design systems documentation. 

• Guide to sharing and permissions 
• Share or embed your files and prototypes

View only editor

If you join the file as a viewer, Figma will look a little different.

The simplified toolbar gives us access to the move tool to select layers, the comment tool to leave comments, and the hand tool to pan around the canvas.

Viewers can also access presentation view to preview frames and interact with prototypes. As well as other settings like toggling layout grids, rulers, or pixel preview.

Instead of the Design and Prototype panels in the right sidebar, we have access to the Inspect and Export panels.

Inspect tab, documentation, and code

When we select objects on the canvas, the Inspect tab displays the name of the selected layer, read-only properties, and code snippets for that object.

Click Copy next to a property to add code snippets to your clipboard.

If a component is using styles, Figma will display the style name in the corresponding field. This is useful if you want to use semantic naming that matches your production code.

If you've added descriptions to your component, or links to documentation, you can see them in the inspect panel when you select an instance.

Set up exports and exporting

Viewers can also export assets. As a developer, we want to export these icons for development.

We can select the icon, go to the Exports tab, and click the + icon to add a new export setting.

Figma will create a default export setting of 1x PNG. Your designs aren't set to a specific resolution. You can change the size of the export using the multiplier. If you want to export assets at multiple resolutions, you can add another export setting.

You can also change the export format. Figma supports exports in PNG, PDF, JPEG, and SVG. We'll change this to SVG and click Export to download a copy of this icon.

If you want to share files with viewers, but prevent them from copying frames from the canvas or using Figma's export function, you can disable this setting in the share modal. Guide to exports in Figma →