Export and handoff plugins in Figma - Step-by-Step Guide

Introduction

Export and handoff plugins help you share your Figma designs with developers or stakeholders easily. They convert your designs into formats or code snippets that others can use to build or review the project without needing Figma.

When you need to send design assets like images or icons to developers.

When developers require CSS or code snippets from your design to build the UI.

When you want to create a style guide or specs document automatically from your design.

When handing off designs to a team that does not use Figma.

When you want to export multiple assets in one go with consistent settings.

Steps

Step 1: Open your Figma file

- Figma desktop app or web app

Your design file is visible and ready for export or plugin use

Step 2: Click on the Resources icon (four dots) in the top toolbar

- Top toolbar in Figma

The Resources panel opens showing plugins and widgets

Step 3: Select the Plugins tab

- Resources panel

You see a list of available plugins

Step 4: Search for export or handoff plugins like 'Zeplin', 'Avocode', or 'Figma to HTML'

- Search bar in Plugins tab

Matching plugins appear in the list

Step 5: Click Install on the chosen plugin

- Plugin listing

The plugin is added to your Figma account

Step 6: Run the installed plugin by right-clicking on your design and selecting Plugins > [Plugin Name]

- Design canvas context menu

The plugin interface opens, ready to export or handoff your design

Step 7: Follow the plugin instructions to export assets or generate handoff specs

- Plugin interface

Your design assets or code snippets are prepared for sharing

Before vs After

Before

Design file with layers and components visible only inside Figma, no easy way to share assets or specs

After

Exported assets in PNG and SVG formats and a handoff document with CSS code snippets ready for developers

Settings Reference

Export format

📍 Plugin interface export options

Choose the file type for exported assets

Default: PNG

Scale or resolution

📍 Plugin export settings

Set the size or resolution of exported images

Default: 1x

Include/exclude layers

📍 Plugin selection or export filters

Control which parts of the design are exported

Default: Selected layers only

Code format

📍 Handoff plugin settings

Choose the code style for developer handoff

Default: CSS

Common Mistakes

Exporting assets without selecting the correct layers

You may export unwanted parts or miss important design elements

Select only the layers or frames you want to export before running the plugin

Not checking export resolution settings

Assets may be too small or too large for the intended use

Set the scale or resolution in the plugin export options to match your needs

Assuming exported code matches final developer code exactly

Exported code is a guide and may need adjustments by developers

Use exported code as a reference and communicate with developers for final implementation

Summary

Export and handoff plugins help share design assets and specs easily with developers or stakeholders.

You install and run these plugins from the Resources panel in Figma.

Always select correct layers and export settings to get the best results.