Chapter 6 › Lesson 34

34. Export Individual Assets

Skills: Select element → Export panel; Choose format: PNG, SVG, JPG, PDF; Set scale: 1x, 2x, 3x; Add export suffix naming; Click Export button

Exporting individual assets from Figma is straightforward. You select a layer, configure export settings, and click Export. You can export in multiple formats and scales simultaneously.

34. Export Individual Assets
Figure: The Export panel showing format options (PNG, SVG, JPG, PDF), scale settings (1x, 2x, 3x), and suffix naming.

Step-by-step

  1. Select the element you want to export (a layer, component, or frame)
  2. In the Design panel, scroll all the way down to the Export section
  3. Click the + next to Export to add an export setting
  4. Choose the format: PNG for raster images (icons, screenshots), SVG for vector assets (logos, icons), JPG for photos, PDF for documents
  5. Set the scale: 1x for standard res, 2x for Retina, 3x for high-density displays
  6. Add a Suffix like @2x or @3x so exported files are named correctly (e.g. icon@2x.png)
  7. Click the Export button at the bottom of the panel
  8. Choose a location to save the exported file
  9. To add multiple scales: click the + icon again and add another export setting with a different scale
  10. Preview: Figma shows a preview of your export at the selected scale before you export

Pro tip

Pro tip: Use SVG for icons and simple graphics — they stay crisp at any size and developers prefer them. Use PNG for complex graphics with gradients or shadows that don't compress well to SVG.