How to Download an Image from Figma: Quick Guide

You’ve finished your design in Figma. Now you need to get it out.

Learning how to download image from Figma is one of those skills that seems simple until you’re staring at the interface wondering where the save button went.

Figma stores everything in the cloud. There’s no traditional “Save As” option like Photoshop or Sketch.

Instead, you’ll use the export system to download PNG, JPG, SVG, or PDF files to your computer.

This guide walks you through four export methods: standard layer export, copy as PNG, the Slice tool, and bulk download. You’ll also learn how to extract original image fills and troubleshoot common export issues.

Takes about 2 minutes to master.

How to Download an Image from Figma

Download image from Figma is the process of exporting design assets, layers, frames, or components from Figma’s cloud-based interface to your local storage.

Output formats include PNG, JPG, SVG, and PDF.

Designers need this when preparing assets for web development, sharing mockups with clients, creating marketing materials, or archiving project files outside of Figma’s cloud environment.

This guide covers 4 primary methods requiring 2 to 5 minutes and a Figma account with at least view access.

Prerequisites

Before you start exporting, make sure you have these in place:

• Figma account (Free, Professional, or Organization plan)
• Figma desktop app for macOS or Windows, or a supported web browser (Chrome, Firefox, Safari, Edge)
• View or Edit access to the target Figma file
• Sufficient local storage for exported files
• Time estimate: 2 to 5 minutes per export session

Edit access unlocks the Slice tool. View access still allows standard exports unless the file owner has restricted copying.

Step One: How Do You Select the Image or Layer You Want to Download?

Click directly on the image, layer, frame, or component on the canvas to select it.

You can also use the Layers panel in the left sidebar to click the target layer name.

For batch selection, hold Shift and click multiple items. This prepares them for bulk export later.

Canvas Selection Method

Click any visible element on the canvas. A blue bounding box confirms your selection.

Nested elements require clicking through parent frames. Double-click to drill into groups.

Layers Panel Selection Method

Open the left sidebar. Expand frame hierarchies to locate specific layers.

Click the layer name to select it. The canvas view automatically centers on your selection.

Multi-Select for Batch Export

Hold Shift while clicking to add items to your selection.

Hold Command (Mac) or Ctrl (Windows) to toggle individual items. Selected layers highlight in the Layers panel.

Step Two: Where Do You Find the Export Settings in Figma?

The Export section lives in the right sidebar under the Design tab.

Scroll down past Fill, Stroke, and Effects. You’ll find it near the bottom.

Click the + icon to add an export configuration. Multiple configurations can exist on a single layer.

Right Sidebar Location

Select any layer. Look at the right sidebar’s Design tab.

The Export section appears below layer properties. No export options show until you click the + icon.

Keyboard Shortcut Access

Press Shift + Command + E (Mac) or Shift + Ctrl + E (Windows).

This opens the bulk export modal showing all layers with export settings applied. Faster than navigating menus.

Adding Export Configurations

Click the + icon in the Export section. A new row appears with format and scale options.

Add multiple rows for different formats. Export PNG at 1x and 2x simultaneously from the same layer.

Step Three: How Do You Choose the Right Image Format and Scale?

Click the format dropdown to choose between PNG, JPG, SVG, or PDF.

Each format serves different purposes. Your choice depends on transparency needs, file size requirements, and final use case.

PNG Format

PNG supports transparency and lossless compression. File sizes run larger than JPG.

Best for: logos, icons, user interface elements, graphics with text, anything needing transparent backgrounds.

Figma exports 32-bit PNGs using the RGBA color model by default.

JPG Format

JPG uses lossy compression for smaller file sizes. No transparency support.

Best for: photographs, images without transparency, web assets where loading speed matters.

Compression can affect text readability. Avoid for graphics with sharp edges or text overlays.

SVG Format

SVG is an XML-based vector format. Scales to any size without quality loss.

Best for: icons, illustrations, responsive design assets, anything that needs to scale across viewport sizes.

You can embed SVG directly in HTML or animate SVG with CSS. Consider SVG optimization for production use.

PDF Format

PDF preserves vectors, text, and images in a fixed layout. Platform-independent viewing.

Best for: presentations, print materials, iOS development assets, multi-page exports.

Figma exports to PDF 1.7 format. Text exports as glyphs, so you can select but not edit it afterward.

Scale Settings

Scale multipliers control output resolution:

• 1x: Standard resolution, 72 DPI for web use
• 2x: High-resolution displays, Retina screens
• 3x: Extra high-density mobile screens
• Custom: Enter specific pixel dimensions or suffix values

For print work, export at higher scales. Web assets typically need 1x and 2x versions.

Quality and Resampling Options

JPG and PDF exports offer quality sliders. Higher quality means larger files.

Image resampling options include Detailed (bicubic sampling) for photographs and Basic (nearest neighbor) for pixel art and icons.

Access these through the Advanced export settings dropdown.

Step Four: How Do You Export and Save the Image to Your Computer?

Click the Export [layer name] button at the bottom of the Export section.

A save dialog appears. Choose your destination folder and confirm.

Browser users: files download to your browser’s default location. Desktop app users: you pick the folder each time.

Export Button Location

The Export button sits below your export configurations in the right sidebar. It displays the layer name you’re exporting.

File Naming

Figma uses your layer name as the filename by default.

Slash-separated names create nested folders. A layer named “icons/social/twitter” exports into icons > social > twitter folder structure.

Download Location

Desktop app prompts you to choose a folder. Browser version sends files to your default downloads directory.

Check your browser settings if exports aren’t appearing where expected.

Alternative Method: Copy as PNG

Need something faster? Skip the export dialog entirely.

Select any layer or frame. Right-click and choose Copy/Paste as > Copy as PNG.

Keyboard shortcut: Command + Shift + C (Mac) or Ctrl + Shift + C (Windows).

Paste directly into Slack, email, or any application that accepts images. Exports at 1x resolution only.

When to Use Copy as PNG

Quick shares via chat or email. No need for specific formats or higher resolutions.

Not suitable for production assets or when you need 2x/3x versions.

Method Comparison

• Standard Export: Full control over format, scale, quality; saves to disk
• Copy as PNG: Instant clipboard copy; 1x only; no format options

Alternative Method: Using the Slice Tool

The Slice tool exports specific canvas regions independent of layer boundaries.

Press S on your keyboard or find it under the Region tools dropdown in the toolbar.

Creating a Slice

Click and drag to draw a slice around any canvas region. Blue boundaries show what gets exported.

Resize by dragging handles. Move by dragging the center.

Slice Export Settings

Apply export configurations to slices just like any layer. Add multiple formats and scales.

Slices give you precise padding control. Layer exports calculate padding from shape bounds automatically.

Slice Use Cases

Exporting content spanning multiple layers or frames. Creating screenshots of specific design areas. Capturing regions that don’t align with existing frame boundaries.

Bulk Export: How Do You Download Multiple Images at Once?

Add export settings to each layer you want to export. Then use the bulk export feature to download everything in one action.

Setting Up Bulk Export

Select each target layer individually. Add export configurations through the + icon in the Export section.

Repeat for all layers you need. Time-consuming setup, but saves time on repeated exports.

Using the Export Modal

Go to File > Export or press Shift + Command + E (Mac) / Shift + Ctrl + E (Windows).

The modal displays every layer with export settings on the current page. Check or uncheck items as needed.

Batch Download Output

Click Export. Multiple items download as a ZIP archive.

Single items download directly. Folder structure follows your layer naming conventions.

Downloading Original Image Fills

Sometimes you need the source image used in a layer fill, not the cropped or masked version.

Standard export gives you the visible result. These methods extract the original file.

Dev Mode Method

Requires a paid Figma plan. Switch to Dev Mode in the right sidebar.

Select the layer with the image fill. Find the green image link in the Inspect panel. Click to download the original source file.

Plugin Method

Free alternative using Figma Community plugins.

Search for “Export Original Images” in Resources > Plugins. Install, select layers with image fills, run the plugin.

Exports original source files without cropping or masking applied.

TinyImage Plugin

Another option for bulk image fill extraction.

Open TinyImage, navigate to the Downsizer feature, click “Export Figma Image Fills.” Downloads all source images as a ZIP.

Verification

Confirm your export worked correctly:

• Check destination folder for the downloaded file
• Open the image in a viewer or browser
• Verify dimensions match your scale setting (1x, 2x, 3x)
• Confirm format matches selection (PNG, JPG, SVG, PDF)
• Test transparency (PNG only) displays correctly

If something looks wrong, check your export settings and try again.

Troubleshooting

Export Button is Grayed Out

Problem: Can’t click the Export button.

Fix: Click the + icon in the Export section first. The button activates only after adding at least one export configuration.

Image Quality is Poor After Export

Problem: Exported image looks blurry or pixelated.

Fix: Increase scale from 1x to 2x or 3x. For JPG exports, set quality to High in Advanced export settings.

Background Color Appears in PNG Export

Problem: PNG has unexpected background color instead of transparency.

Fix: In the Fill section of the right sidebar, uncheck “Show in exports” to exclude frame fill from the exported PNG.

Cannot Export from Shared File

Problem: Export options unavailable or restricted.

Fix: Check file permissions. The owner may have restricted copying and sharing. Request edit access if needed.

Exported SVG Looks Different Than Design

Problem: SVG export doesn’t match the original design.

Fix: Check for unsupported effects like background blur. Flatten complex effects before exporting. Some blend modes don’t translate to SVG format.

Related Processes

Continue building your Figma skills with these related guides:

• How to crop in Figma
• How to mask in Figma
• How to export Figma to PDF
• How to export GIF from Figma
• How to export Figma to HTML
• How to scale in Figma
• How to make a frame in Figma
• How to use components in Figma
• How to blur in Figma
• Converting PNG to SVG for vector workflows
• Converting SVG to PNG for raster outputs

FAQ on How To Download Image From Figma

How do I download an image from Figma to my computer?

Select the layer or frame you want to export. Go to the right sidebar, find the Export section, click the + icon, choose your format (PNG, JPG, SVG, PDF), and click Export.

What image formats can I export from Figma?

Figma supports four export formats: PNG for transparency and lossless quality, JPG for compressed photographs, SVG for scalable vector graphics, and PDF for print materials and presentations.

Can I download images from Figma without edit access?

Yes. View access allows exports unless the file owner has restricted copying and sharing. You won’t have access to the Slice tool, but standard layer exports work fine.

How do I export multiple images from Figma at once?

Add export settings to each layer individually. Then press Shift + Command + E (Mac) or Shift + Ctrl + E (Windows) to open the bulk export modal. Select items and export as a ZIP file.

Why is my exported image blurry or low quality?

You’re likely exporting at 1x scale. Increase to 2x or 3x for higher resolution. For JPG exports, check Advanced export settings and set quality to High instead of default.

How do I export a Figma image with a transparent background?

Export as PNG format, which supports transparency. If your frame has a fill color, go to the Fill section in the right sidebar and uncheck “Show in exports” before exporting.

What is the keyboard shortcut to copy an image from Figma?

Select your layer, then press Command + Shift + C (Mac) or Ctrl + Shift + C (Windows). This copies the selection as a PNG to your clipboard at 1x resolution.

How do I download the original source image from a Figma fill?

Use Dev Mode (paid plans) and click the green image link in the Inspect panel. Free alternative: install the “Export Original Images” plugin from Figma Community.

Where do exported Figma files go?

Desktop app users choose the destination folder during export. Browser users find files in their default downloads directory. Check your browser settings if exports aren’t appearing where expected.

Can I export Figma designs as code instead of images?

Figma doesn’t export production-ready code directly. However, you can turn Figma designs into code using Dev Mode’s inspect features or third-party plugins that generate HTML and CSS.

Conclusion

Knowing how to download image from Figma removes friction from your design workflow. You now have four solid methods to get assets out of Figma and onto your computer.

Standard export handles most situations. Copy as PNG works for quick shares. The Slice tool targets specific canvas regions. Bulk export saves time on large projects.

Format choice matters. Use PNG for UI design elements needing transparency. JPG compresses photographs. SVG scales without quality loss for responsive design work.

Don’t forget about resolution. Export at 2x or 3x for high-density displays and Retina screens.

The export panel becomes second nature after a few uses. Start with a single layer export, then explore batch downloads as your projects grow.