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.

Practice

1. Which export format in Figma is best suited for sharing scalable vector graphics without losing quality?

easy

A. PNG

B. JPEG

C. PDF

D. SVG

Solution

1. Step 1: Understand vector vs raster formats

   SVG is a vector format that scales without losing quality, unlike PNG or JPEG which are raster images.

2. Step 2: Match format to use case

   For scalable graphics, SVG is ideal because it preserves sharpness at any size.

3. Final Answer:

   SVG -> Option D

4. Quick Check:

   Vector graphics = SVG [OK]

Hint: Choose SVG for sharp, scalable images [OK]

Common Mistakes:

• Confusing PNG as scalable
• Choosing PDF for images
• Selecting JPEG for vectors

2. Which of the following is the correct way to export a frame as a PNG in Figma?

easy

A. Drag frame to desktop > Save as PNG

B. Select frame > File > Save As > PNG

C. Right-click frame > Export > Choose PNG > Click Export

D. Select frame > Edit > Export as SVG

Solution

1. Step 1: Locate export option in Figma

   Right-clicking the frame and selecting Export is the standard way to export assets.

2. Step 2: Choose correct format and export

   After choosing PNG format, clicking Export saves the file correctly.

3. Final Answer:

   Right-click frame > Export > Choose PNG > Click Export -> Option C

4. Quick Check:

   Export via right-click > PNG [OK]

Hint: Right-click frame to export quickly [OK]

Common Mistakes:

• Using Save As instead of Export
• Dragging frame to desktop
• Choosing wrong export format

3. What will be the result if you export a vector icon as a PNG at 2x scale in Figma?

medium

A. A vector file that can be scaled infinitely

B. A raster image twice the size of the original icon

C. A PDF document with embedded vectors

D. An SVG file with double the resolution

Solution

1. Step 1: Understand PNG export behavior

   PNG exports a raster image, so scaling to 2x increases pixel dimensions, not vector quality.

2. Step 2: Confirm output type

   The output is a raster image twice as large in pixels, not a vector or PDF.

3. Final Answer:

   A raster image twice the size of the original icon -> Option B

4. Quick Check:

   PNG at 2x = bigger raster image [OK]

Hint: PNG scales pixels, not vectors [OK]

Common Mistakes:

• Expecting vector output from PNG
• Confusing SVG with PNG
• Thinking PDF is created

4. You tried exporting a frame as a PDF but the file is blank. What is the most likely cause?

medium

A. The export scale was set to 0

B. You exported the frame without selecting it first

C. You chose SVG format instead of PDF

D. The frame contains only raster images without vector layers

Solution

1. Step 1: Check export scale settings

   If the scale is set to 0, the exported file will have no visible content.

2. Step 2: Understand impact on PDF export

   PDF export respects scale; zero scale means blank output.

3. Final Answer:

   The export scale was set to 0 -> Option A

4. Quick Check:

   Zero scale = blank export [OK]

Hint: Ensure export scale is above zero [OK]

Common Mistakes:

• Not selecting frame before export
• Confusing SVG with PDF
• Assuming raster images cause blank PDF

5. You need to export a multi-page design as a single PDF document in Figma. Which approach should you take?

hard

A. Select all frames and export as PDF in one action

B. Export each frame as PNG and combine externally into a PDF

C. Export frames individually as SVG and merge in Figma

D. Use the 'Export selection' option to export all frames as separate PDFs

Solution

1. Step 1: Select all frames to export

   In Figma, selecting multiple frames allows exporting them together.

2. Step 2: Export as PDF in one action

   Choosing PDF format for multiple selected frames creates a single multi-page PDF.

3. Final Answer:

   Select all frames and export as PDF in one action -> Option A

4. Quick Check:

   Multi-frame PDF export = select all + export PDF [OK]

Hint: Select all frames, export PDF once [OK]

Common Mistakes:

• Exporting PNGs then merging
• Exporting SVGs expecting PDF
• Exporting frames separately as PDFs