Asset export (PNG, SVG, PDF) in Figma - Step-by-Step Guide

Introduction

Exporting assets lets you save your designs as image files like PNG, SVG, or PDF. This helps you share visuals or use them in reports and presentations without needing the design tool.

When you want to include a chart or dashboard visual in a PowerPoint presentation.

When you need to send a logo or icon to a colleague who does not use Figma.

When you want to save a report page as a PDF to share with clients.

When you need a scalable vector image (SVG) for a website or app.

When you want to archive a snapshot of your dashboard design for documentation.

Steps

Step 1: Select the frame or object

- Canvas

The selected asset is highlighted with a blue outline

💡 You can select multiple objects by holding Shift and clicking each one

Step 2: Open the Export section

- Right sidebar under Design tab

The Export panel expands showing export options

Step 3: Click the '+' button

- Export section in the right sidebar

A new export setting line appears with default format PNG

Step 4: Choose the file format

- Format dropdown in the export setting line

The export format changes to PNG, JPG, SVG, or PDF as selected

Step 5: Set scale or suffix if needed

- Scale and suffix fields in the export setting line

The export will use the chosen scale (e.g., 1x, 2x) and filename suffix

Step 6: Click the Export button

- Export section in the right sidebar

A file save dialog opens to save the exported asset on your computer

Before vs After

Before

Selected frame on canvas with no export settings visible

After

Export panel shows PNG format selected with 1x scale and Export button ready

Settings Reference

Format

📍 Export section in right sidebar

Choose the file type for the exported asset

Default: PNG

Scale

📍 Export section in right sidebar

Set the size multiplier for the exported image

Default: 1x

Suffix

📍 Export section in right sidebar

Add text to the filename to differentiate exports

Default: None

Common Mistakes

Not selecting the frame or object before exporting

Figma cannot export anything if no asset is selected

Always click the frame or object on the canvas first to highlight it

Choosing the wrong file format for the use case

For example, exporting a logo as PNG loses scalability compared to SVG

Pick SVG for vector graphics, PNG for images with transparency, PDF for print-ready files

Forgetting to set the scale for high-resolution needs

Exporting at 1x scale may produce blurry images on retina screens

Use 2x or higher scale for sharper images on high-res displays

Summary

Asset export saves your selected design as PNG, SVG, or PDF files for sharing or use outside Figma.

You must select the object first, then set export format and scale before exporting.

Choose the right format and scale to match your use case for best quality.