Figma Exporting Assets

Exporting turns Figma layers into image files that websites, apps, documents, and slides can use. Icons, logos, illustrations, and full screens all leave Figma through the same export panel.

Find the Export Panel

Select any layer or frame. Scroll to the bottom of the right panel and find the Export section. Click the plus icon to add an export setting.

Export
---------------------------------
Scale      Format      Suffix
1x         PNG         (none)
[ Export Home Screen ]

Choose the Right Format

Format   Best For                        Notes
------   -----------------------------   -------------------------
PNG      Screens, UI pieces              Supports transparency
JPG      Photos                          Small files, no transparency
SVG      Icons, logos, simple art        Sharp at any size
PDF      Print and documents             Keeps vector detail
WebP     Web images                      Small files, modern browsers

Pick SVG for anything built from shapes and lines. Pick JPG or WebP for photographs.

Understand Scale

Scale sets the output size relative to the layer. A 2x export of a 100-pixel icon produces a 200-pixel file. Modern phone screens pack extra pixels into the same space, so apps need larger copies.

Layer: 100 x 100 px

1x  →  100 x 100 px    Standard screens
2x  →  200 x 200 px    High-density screens
3x  →  300 x 300 px    Very high-density screens

Add several scales at once by clicking the plus icon again. Figma exports each size in a single action.

Export a Frame or Layer

  1. Select the frame or layer.
  2. Add an export setting with the plus icon.
  3. Choose scale and format.
  4. Click the export button.

The shortcut Ctrl + Shift + E (Cmd + Shift + E) opens export quickly. Select several layers to export them together.

Use Slices for Custom Areas

A slice exports a region that does not match any layer. Press S, drag a rectangle over the area, and add export settings to the slice.

Frame
+----------------------------+
|                            |
|     +------------+         |
|     |   Slice    |         |  ← exports only this area
|     +------------+         |
|                            |
+----------------------------+

Name Files for Developers

Layer names become file names. Clear names prevent confusion later.

Weak            Strong
-------------   --------------------
Vector 12       icon-search
Group 5         logo-primary
Frame 40        hero-banner-desktop

Use lowercase words and hyphens. Developers copy these names straight into code.

Platform Cheat Sheet

  • Websites: SVG for icons, WebP or JPG for photos, 1x and 2x scales.
  • iOS apps: 1x, 2x, and 3x PNG files.
  • Android apps: Several density sizes or a single SVG converted to a vector drawable.
  • Print: PDF for vector artwork.
  • Presentations: PNG at 2x for crisp slides.

Prepare Layers Before Export

  • Convert text to outlines when an SVG must display the same font everywhere.
  • Remove hidden or unused layers.
  • Check that the layer bounds fit the artwork tightly.
  • Test the exported file in the app or page that will use it.

Common Mistakes

  • Exporting photos as PNG and ending up with huge files.
  • Skipping the 2x scale and getting blurry images on phones.
  • Leaving default layer names that confuse the development team.

Practice Task: Export an Icon Kit

Draw three simple icons inside frames of 24 by 24 pixels. Name them icon-home, icon-search, and icon-user. Select all three frames and add an SVG export setting. Export them together and open one file in a browser to confirm the shape stays sharp when zoomed. Add a 2x PNG setting and compare the file sizes. The comparison shows why vector formats suit icons.

icon-home    → SVG + 2x PNG
icon-search  → SVG + 2x PNG
icon-user    → SVG + 2x PNG
Previous lesson
Back to course
Next lesson