How to Export From Figma (PNG, SVG, PDF Without Blur)

Exporting from Figma is quick once you know where the Export section is, because it isn't a menu item for single objects. It sits at the bottom of the properties panel on the right, and only appears when you've selected something. The settings that matter most are format and scale, and getting scale right is what stops blurry images on websites.

How to export from Figma

1. Select the frame, layer, group or component you want.
2. Scroll to the Export section at the bottom of the right-hand panel.
3. Click the + to add an export setting.
4. Choose the format: PNG, JPG, SVG or PDF.
5. Choose a scale, such as 1x, 2x or 3x.
6. Click Export and the name of the layer.

In the browser, the file goes to your default downloads folder. In the desktop app, Figma asks where to save it.

Which format to choose

Format	Best for	Watch out for
PNG	Screens, images with transparency, social graphics	Larger files for photos
JPG	Photos and image-heavy designs	No transparency
SVG	Icons, logos and simple illustrations for the web	Complex effects may not convert well
PDF	Print, documents and sharing whole frames	Bigger files with many images

The catch: scale and blurry exports

Exporting at 1x gives you a file the same size as your frame in Figma. On a modern phone or laptop screen with a high pixel density, that image can look soft. For anything going on a website or app, export at 2x as well, which doubles the pixel dimensions and keeps it crisp. You can add several export settings to one layer, such as 1x and 2x, and get both files in one click.

Export several frames at once

1. Add export settings to each frame you want, or select them all and add one setting.
2. Choose File, then Export, or press Shift and Command and E on a Mac, or Shift and Ctrl and E on Windows.
3. Check the list, which shows each item's scale, format and size.
4. Untick anything you don't need and click Export.

Export just part of a design

To export a specific area that isn't its own frame, use the Slice tool to draw a box around it, then add an export setting to the slice. It's handy for pulling one section out of a long page design without rearranging layers.

Copy without exporting

For a quick paste into a document, chat or another app, right-click the object and choose Copy/Paste as, then Copy as PNG or Copy as SVG. Nothing is saved as a file, and you can paste straight in.

Exporting from Figma Slides

If you've made a presentation in Figma Slides, you can export it to PNG, JPG, SVG or PDF. A PDF is usually best for sending a deck to someone who'll view it outside Figma.

Naming your exports

Figma names each file after the layer. Before exporting, rename layers clearly, such as 'hero-mobile' or 'logo-white', so the files are easy to find and use. If you export at several scales, Figma adds a suffix like @2x to the extra files, which developers expect.

Exports and permissions

If you can't see the Export section, your access to the file may be limited. The Export section's position, and whether it shows at all, depends on your access level and mode. Ask the file owner for edit access, or for the files you need.

Handing designs to a developer

For website or app builds, developers often prefer to take what they need straight from the Figma file rather than receive a folder of exports, because they can inspect sizes, colours and spacing directly. If they do want files, agree the formats and scales first: SVG for icons and logos, PNG at 2x for anything with detail, and clear layer names so nothing has to be renamed later. A quick check of the exported files on a phone screen catches blurry images before they reach the live site.

Exporting for social media

Set your frame to the exact size the platform recommends before you design, rather than resizing afterwards. Export as PNG for graphics with text, so the letters stay sharp, and JPG for photo-heavy posts to keep the file small. Exporting at 2x is worth it for images people will view on high-resolution phones, as long as the platform accepts the larger file.

A final tip: Figma remembers export settings on each layer, so set them once on frames you export often, like social templates, and next time it's one click.

If you're choosing between design tools, my comparison of common UI and UX mistakes covers what to check in any design before you export it.

My verdict

Select what you want, add an export setting at the bottom of the right-hand panel, pick the format and click Export. Use PNG for screens, JPG for photos, SVG for icons and logos and PDF for print. Export web images at 2x as well as 1x to avoid blur, and use File, Export for batches. For design that looks good once exported, see my guide to colour harmony and tips for briefing a web designer.

Frequently asked questions

Where is the export button in Figma?

In the Export section at the bottom of the right-hand panel, once you've selected something.

What formats can Figma export?

PNG, JPG, SVG and PDF.

Why do my Figma exports look blurry?

They're at 1x. Export at 2x for high-resolution screens.

How do I export multiple frames in Figma?

Add export settings, then use File, Export, or Shift and Command or Ctrl and E.

Where do Figma exports go?

In the browser, to your downloads folder. In the desktop app, wherever you choose.

Can I copy a Figma design as an image without exporting?

Yes. Right-click and use Copy/Paste as, then Copy as PNG or Copy as SVG.