How to Download an Image from Figma: Quick Guide

Figma handles image export on its own. Select a frame, layer, or page, choose a format, and you get a PNG, JPG, SVG, or PDF sitting on your computer with no outside software required.

Most of the time this happens during handoff. A screen leaves Figma and lands in a marketing deck, a client presentation, or someone’s codebase.

Figma’s own Help Center lists image export as available on every plan tier, including the free plan, as of 2026. No premium paywall attached to it.

What Is Figma Image Export

Select something on the canvas, pick a format, click Export, and Figma writes a file to disk. Four output formats are available: PNG, JPG, SVG, and PDF. The whole thing runs inside the app.

Two other Figma actions get confused with it constantly, and they’re worth telling apart before you go hunting for the panel.

• Copy as PNG puts a raster image on your clipboard. Nothing saves to disk, and there’s no format or scale to choose.
• Share link gives someone a live view of the file inside Figma. Not a file at all, just a URL.

Export is the only one of the three that hands you an actual file, ready for a website, a slide deck, or a code repository.

Where to Find the Export Panel in Figma

Look in the right sidebar, toward the bottom, once you’ve selected something. Your access level to the file decides exactly where it turns up.

• With can edit access, the Export section appears directly below the layer properties in the right sidebar.
• With can view access, it moves under the Properties tab in that same sidebar, since viewers never see editing controls.

Dev Mode runs its own version of this panel. It only shows up once you’ve selected an object, and teams working a Dev Mode workflow use it to grab export-ready assets without touching the design file itself.

There’s a second way in. Right-click any layer or frame, pick Export from the context menu, and you skip the scrolling entirely.

Need just a piece of the canvas instead of a whole frame? The Slice tool works a lot like cropping an image down to the exact area you want, then treats that area as its own exportable object.

The panel looks and behaves the same in the browser and the desktop app. Platform differences only show up later, once you click Export and the file needs somewhere to land.

Which Image Formats Can You Export From Figma

PNG and JPG are raster, built from pixels. SVG and PDF are vector, built from math and coordinates that hold their shape at any size. Each of the four is built for a different job.

PNG compresses without throwing anything away, so text and fine detail stay sharp. You pay for that in file size. A PNG almost always weighs more than the same image saved as a JPG.

JPG compresses by discarding data, which shrinks the file but can blur text edges and gradients. Figma sets JPG exports to High quality by default and PDF to Medium, according to its own export settings documentation, though both can be adjusted before you click Export.

SVG is XML under the hood, shapes described as coordinates instead of pixels. A logo exported as SVG looks identical at 16 pixels wide or 1600, which is exactly what you want from icons that have to hold up across screen sizes and devices.

PDF keeps vector accuracy too, but it was built for documents rather than the web. Figma exports to the PDF 1.7 spec, which is one reason exporting a Figma file to PDF works well for print mockups and multi-screen client decks.

Raster or vector? Ask whether this image will ever need to change size after export. That’s really the core difference between SVG and PNG, and it settles the format faster than any style preference will.

How Export Scale and Resolution Work

Figma exports at 72 DPI by default, and every scale multiplier raises that baseline. A 2x export lands at 144 DPI, a 3x export at 216 DPI, straight from Figma’s own documentation.

The scale options sit right next to the format dropdown in the Export section: 1x, 1.5x, 2x, 3x, 4x, or a custom value you type in yourself.

• 72 DPI at 1x scale, Figma’s default output
• 144 DPI at 2x scale, the common baseline for retina and other high-density displays
• 216 DPI at 3x scale, used for the highest-density mobile screens

Custom values go past the presets. Type a number followed by x for a multiplier, w for a fixed width in pixels, or h for a fixed height, and Figma works out the rest.

Bigger scale means a bigger file, always. A 1x PNG comes out smaller than the same image at 3x every single time, sometimes by a wide margin. Match the scale to where the image is actually going instead of exporting everything at the highest setting out of habit.

Most web work never needs more than 2x. Save 3x and 4x for something that will genuinely render on a high-density screen, in print, or blown up in a presentation.

Two formats ignore all of this. Figma only exports SVG and PDF at 1x, since both scale after the fact without losing quality. Need a different size from either one? Resize it in code or in whatever application opens it, not through Figma’s scale field.

Retina and other high-density screens are the whole reason the higher multipliers exist. A crisp image on a high resolution screen needs more source pixels than the same image on a standard monitor.

If you want the math behind why 2x looks sharp and 1x looks soft on that same screen, this explanation of what DPI actually measures covers it in more depth.

What You Can Select for Export

Layers, frames, groups, components, sections, or an entire page. Whatever scope you pick changes what shows up in the finished file.

• Individual layers
• Frames
• Groups
• Components
• Sections
• An entire page

A frame is usually the biggest single unit people export, since it represents one full screen or one section of a page.

Groups and layers work the same way at a smaller scale. Select a single icon layer and Figma exports just that icon, nothing else on the canvas.

A component behaves a little differently. Export it directly and you get a snapshot of its current state, not a live link back to the file it came from.

Nested layers add one wrinkle worth knowing about. If a child layer has its own export settings and sits inside a parent frame that also has export settings applied, exporting the parent renders everything visible inside it as one flattened file, using the parent’s settings. The child’s separate configuration isn’t invoked by that action. It stays intact and still works if you export the child on its own.

Want the whole page instead of a single frame? Deselect everything first. With nothing selected, Figma treats the entire page as the export target.

Exporting Images With a Transparent Background

Transparency survives in PNG, because Figma writes it as a 32-bit file using the RGBA color model, and that A channel controls opacity pixel by pixel.

You can’t actually export a PNG without an alpha channel in Figma, even when every pixel in the image ends up fully opaque anyway.

JPG and most PDF exports do the opposite. Both flatten transparency onto a solid background before the file gets written, so anything that was see-through in Figma becomes a plain fill color in the export.

A PNG keeps see-through areas intact for layering over any background, which is what makes it the default for logos, icons, and UI elements placed over photos or color. It also weighs more than a flattened JPG of the same image.

JPG or a flattened PDF gives you a smaller file that’s faster to load or send, at the cost of a background baked in as solid color with no way to change it afterward. For full-bleed photos where transparency was never part of the plan, that’s fine.

One mistake trips people up constantly. A frame with a white fill still exports with that white fill, even saved as a PNG. Transparency only survives if the frame’s own background is removed or hidden from the export, not just visually covered by something sitting on top of it.

Exporting Images by Platform

The browser and the desktop app both give you the full feature. The mobile app doesn’t support exporting images at all right now.

Browser and Desktop App

Working at figma.com gives you every format, every scale option, and the complete Export section in the sidebar.

The desktop app for macOS and Windows mirrors that panel exactly. The one real difference shows up at the final step. The browser sends files to whatever download folder it’s configured to use, while the desktop app opens a prompt asking where to save and lets you rename the file first.

Browser export needs no installation and works from any computer, though it can feel sluggish on very large batch jobs. Desktop export prompts for a save location and file name, which makes it the better fit once you’re running repeated exports.

Mobile App Limitations

On mobile you can view files, search and browse, comment, present prototypes, and mirror frames from a desktop session.

Exporting an image isn’t on that list. Figma’s own guide to the mobile app confirms it. Image export simply isn’t a feature on iOS or Android right now.

Need an image from a design while you’re away from your computer? Open the file in a mobile browser instead of the app. That route still depends on the file owner allowing copying and sharing on the document, so it won’t work everywhere.

How to Export a Single Image From Figma

Select the object you want, whether that’s a frame, a layer, or a component, then open the Export section in the right sidebar.

1. Click the object on the canvas or in the Layers panel to select it.
2. In the Export section, click the plus icon to add an export setting.
3. Choose a format from the dropdown and pick a scale.
4. Type an optional suffix if you’re adding a second export setting to the same object at a different size.
5. Click the Export button, labeled with the object’s name, and the file saves.

You’re not limited to one export setting per selection. Add a second configuration with a different format or scale, and Figma writes both files from a single click.

Stacking a 1x PNG and a 2x PNG on the same icon is the common version of this, covering standard and retina screens without going through the process twice.

Once at least one export setting exists on the page, you can also trigger the review dialog with Shift+Cmd+E on Mac or Shift+Ctrl+E on Windows.

For the full list of Figma keyboard shortcuts, this one sits alongside dozens of others worth learning.

How to Batch Export Multiple Frames at Once

Hold Shift and click each frame you want, or Cmd/Ctrl-click to grab non-adjacent ones, then apply export settings to the whole group.

1. Select multiple frames on the canvas using Shift-click or Cmd/Ctrl-click.
2. Open the Export section and click the plus icon to apply one format and scale to every selected frame.
3. Adjust any single frame afterward if it needs a different format from the rest.
4. Click Export to save every file in one action.

Figma names each exported file after its layer, which turns layer naming into a filing decision. Use a forward slash in that name and the export builds a folder structure instead of a flat file name.

A layer named icon/arrow/left exports into a folder called icon, then a folder called arrow, with a file named left inside it, straight from Figma’s own export documentation.

Exporting more than one selection at a time also changes the output itself. Instead of separate downloads landing one after another, Figma bundles every file into a single ZIP archive you unzip afterward.

Exporting Images Automatically With Plugins and the API

Export stops being a manual click once it turns into a repeated job.

Figma Community hosts plugins built for exactly this. Export .zip lets you select anything on the canvas and run the whole export through a command palette shortcut instead of the sidebar.

For recurring pipelines, the Figma REST API skips the interface altogether.

• The endpoint is GET /v1/images/:file\_key
• PNG, JPG, SVG, or PDF, set through a format parameter
• Specific node IDs passed as a comma separated list

Rendered image URLs from this endpoint expire after 30 days, according to Figma’s own API documentation. Pipelines need to fetch and store the file rather than link to it long term.

SVG requests through the API still lock to 1x, the same restriction that applies inside the editor.

Teams building a proper developer handoff workflow tend to reach for this once the number of icons or screens grows past what anyone wants to click through by hand.

Frequency decides which one you want. A plugin covers an occasional bulk export. The API only earns its setup cost once exporting becomes a recurring, automated step in someone’s build process.

When Figma Image Export Does Not Work

Export failures almost always trace back to permissions, a missing selection, an oversized frame, or a rendering bug that needs a workaround.

Figma’s own documentation confirms that when a file owner restricts copying and sharing, viewers lose the ability to export any asset, not just certain formats. That restriction sits under Share, in Advanced settings, and it applies to everyone with view only access, including people who join through a shared link.

Oversized, image heavy frames run into a different wall.

One widely read report on Figma’s own community forum described a board game layout roughly 4390 by 3100 pixels, packed with high resolution images and hundreds of vector elements, that took close to an hour to export as PDF and produced a file near 2 GB that no other PDF reader could open.

The same ceiling shows up on the API side in documented form. Figma’s REST API renders images up to 32 megapixels, and anything larger gets scaled down automatically rather than failing outright.

Batch exports carry their own known glitch. Select six frames and only two might export, a complaint that turns up repeatedly on Figma’s community forum. Applying the export setting to every frame individually before clicking Export tends to avoid it.

None of these failures mean the file is broken. They mean the export needs a smaller scope, the right permissions, or a second attempt after a refresh.

FAQ on How To Download Image From Figma

What Is the Difference Between Exporting an Image and Copying It as PNG in Figma?

Export saves a configurable file to disk, with format and scale set in advance.

Copy as PNG skips that step and pastes a raster image straight into your clipboard.

Use copy for a quick paste, export for anything worth keeping.

Is Figma Image Export Free, or Does It Require a Paid Plan?

Figma image export works on every plan, including the free tier, with no feature locked behind a paywall.

Free accounts get the same formats, scale, and batch export as paid ones.

Plan affects file limits and seats, not export capability.

Can You Export Directly From Figma’s Dev Mode Inspect Panel?

Yes. Select any node in Dev Mode, and the Export section opens in the right sidebar for that object.

Developers use it to grab production-ready assets alongside code specs, without switching to Design or asking a designer to send files.

Do Exported Images Update Automatically if the Design Changes Afterward?

No. An exported file is a static snapshot taken the moment you click Export.

Editing the original frame or component afterward has no effect on the saved file.

Export again to capture the latest version.

What Should You Decide First in How To Download Image From Figma?

Settle the output format before anything else. Format restricts which scale values are even available for SVG and PDF, so deciding scale first means occasionally undoing that choice. Scale comes next, and the selection scope comes last, once the file type and size are already fixed.

Vector formats remove the scale question entirely. SVG and PDF lock to one multiplier while PNG and JPG stretch across four, so the format choice quietly decides how much resolution control you actually get.

Committing to a raster format early trades future flexibility for a smaller, simpler file today. That’s a fair exchange for anything that will not need resizing later.

A vector export headed for the browser also benefits from a pass through SVG optimization, since Figma’s raw markup carries more nodes than a hand-tuned file needs.