Figma: Exporting Assets for Handoff and Sharing

Why it exists

Designs created in Figma need to exist in the real world—as assets in an app, images in a presentation, or mockups in an email. Exporting is the bridge from the design canvas to a usable, portable file format that other software and systems can understand.

The mental model

Exporting is the process of packaging a piece of your design—whether a single icon, a full screen, or a specific region—into a standard format like PNG, SVG, or JPG. It's how you "flatten" a complex, editable Figma object into a simple, universal file that others can use without needing the original design file.

How it works

You select any object on the canvas, such as a layer, frame, or component. In the right sidebar, you'll find the "Export" section (its exact location may differ if you're a viewer or in Dev Mode). Here, you add an export setting by clicking the plus icon. You can configure the format (PNG, SVG, etc.), scale (1x, 2x for retina displays), and add a file suffix. You can add multiple settings to the same object to export it in several formats at once. For grabbing a specific region that isn't a neat layer, use the Slice tool to draw a box around the area you want to capture.

When to use it

Use exporting for final asset handoff to developers, like icons, buttons, and images. It's also necessary for sharing high-fidelity mockups with stakeholders who don't have Figma access, or for importing your designs into other tools like presentation software. For a quick, one-off image, you can also right-click an object and use "Copy as PNG".

When not to use it

Don't use exporting for internal team collaboration where everyone has Figma access; just share a link to the file. Avoid exporting entire screens as images to show a user flow; use Figma's built-in Presentation mode instead. For developers, Dev Mode often provides better ways to inspect and extract values than just receiving a flattened image.

One canonical example

A developer needs an app's logo as an SVG for the web and as a 3x resolution PNG for the mobile app. You select the logo component in Figma. In the Export panel, you add two settings. First, you set the format to SVG. Second, you add another setting, choose 3x from the size dropdown, and set the format to PNG. Clicking "Export" generates both files, logo.svg and logo@3x.png, in a single action.