How to Export in Figma (PNG, JPG, SVG, PDF)

• PNG: screens, UI elements, anything with text or a transparent background.
• JPG: photos and image-heavy frames. Quality defaults to High. JPG has no transparency.
• SVG: icons and illustrations for the web. Text is outlined by default, and Simplify stroke is on by default. You can also choose to include id attributes.
• PDF: documents and vector artwork. Quality defaults to Medium. See how to export a Figma PDF.

WebP isn't in Figma's export formats. Each export row also has settings for resampling (Detailed or Basic) and colour profile (Same as file, sRGB or Display P3).

Click + more than once to stack export rows on the same layer. A common setup for app icons and images is three PNG rows at 1x, 2x and 3x, or a PNG row next to an SVG row for an icon that ships to both web and slides. One click on Export saves every row.

Figma exports at 72 DPI times the scale, so a 1x PNG looks soft on phones and high-density laptop screens. Use 2x for screen use and 3x or 4x for slides or anything people will zoom into. If exports still look blurry, the causes and fixes are in why Figma exports look blurry. For print resolution, see how to export 300 DPI from Figma.

Copy as PNG puts the selection on your clipboard at 2x, ready to paste into Slack, a doc or an email without saving a file. Bulk export lists every selection on the current page that already has an export setting, and saves each as its own file.

A frame's fill ends up in the export unless you hide it. Select the frame, and in the Fill section untick Show in exports. Then export as PNG. JPG can't store transparency, so a JPG export will always have a solid background.

Refresh the file first. If the Export section is still gone and you only have view access, the owner has turned off Viewers can copy, share, and export from this file (a paid-plan setting under Share > Share settings). That setting blocks copying, duplicating, exporting and Save local copy for viewers. Ask the owner for edit access or for the exported files.

If you're an editor and the section looks empty, check that you've selected a layer. With nothing selected, the Export section exports the whole page canvas instead.

Click an empty part of the canvas so nothing is selected. The Export section then applies to the entire canvas of the current page. This is handy for a quick overview image of a flow, though exporting individual frames gives cleaner results for handoff.

Editors see the Export section at the bottom of the right sidebar. Viewers find it under the Properties tab. In Dev Mode, the Export section appears once you select a layer, so developers can pull icons and images without switching modes.

The Export section covers static formats. To turn a sequence of frames into an animated GIF, a plugin does the encoding. We built Flippy for this: select frames in order, set the delay per frame and the loop count, and export one GIF. The full walkthrough is in how to make a GIF in Figma.

Exporting gives you images or PDFs. To keep a copy of the editable design, use Main menu > File > Save local copy, which writes a .fig file. It leaves out version history and comments, and opens as a new, unlinked file when you import it.