Export Figma layers as WebP, PNG, JPG or SVG

Goal

Get web-ready image files from Figma in a modern format such as WebP, which is usually much smaller than PNG.

Before you start

• Optimizely installed from Figma Community.
• The layers or frames you want to export, selected on the canvas.

Steps

1. Select the layers Select one or more frames, groups, components, shapes or text layers on the canvas. Only the layers you select directly count, not layers nested inside them.
2. Open the Export tab Run Optimizely. The Export tab shows a card for each layer; layers that share the same image are combined into one card with a count such as 3×.
3. Choose format and scale Pick PNG, JPG, WebP (the default) or SVG, and a scale of 0.5x, 1x (the default), 2x or 3x. Scale does not apply to SVG. Older versions also list AVIF, which saves PNG data under an .avif name: use WebP instead.
4. Pick the cards Every card starts selected. Click a card to leave it out, or use the export button on a card to export just that one.
5. Export Click Export Selected Images. One layer downloads as a single file, several as a ZIP called export-<number>.zip. When it is done, Optimizely says "Export completed! N items exported successfully."

Tips

• After an export, the layers get an Open Optimizely button in Figma's right panel to reopen the plugin.

Result

Image files named after your layers, for example Hero Image becomes hero_image.webp.

If something goes wrong

• The WebP files in my ZIP are as big as PNGs or will not open as WebP. In the current version, a ZIP of several items holds PNG data even when the files end in .webp. Export WebP images one at a time with each card's own export button until this is fixed.
• "Exported <name> as PNG fallback" The conversion to WebP failed for that layer, so Optimizely saved it as PNG instead.
• Two files are missing from the ZIP. Files are named after their layers, so layers with the same name overwrite each other. Give them different names and export again.
• Some cards are locked with "That's a wrap for today". The free plan exports 6 items a day; the rest unlock tomorrow, or with Pro.

Related guides

• ICONS & SPRITES
  Export favicons and app icons for web, iOS, Android, Windows and macOS Pick a platform preset on the Icons & Sprites tab and get a ZIP with every PNG size, plus a combined favicon.ico or AppIcon.icns where the platform uses one.
  →
• COMPRESSION
  Shrink heavy images inside a Figma file On the Compression tab, set a maximum size per image and Optimizely scales down every larger image fill in your selection, or everywhere that image is used.
  →