How to Export Assets from Figma

Exporting assets from Figma comes down to three things: naming your layers so exports are easy to find later, setting the right export format and scale for where the asset is going, and doing a final check so nothing renders blurry or oversized once it hits your storefront. Get those three right and export becomes a five-minute task instead of a recurring headache. This guide walks through the full process, including the settings that matter most if you are exporting design assets for an e-commerce build like one of our Figma themes.

Figma is where most modern storefront design work happens before a single line of code gets written, and at some point every project reaches the same moment: you need to get an icon, a logo, a hero banner, or a full page mockup out of the canvas and into a real build. That handoff is where a surprising number of small mistakes creep in — a logo exported at 1x that looks soft on a retina screen, a PNG where an SVG would have been smaller and sharper, or a folder of forty identically named exports nobody can sort through six months later. None of this is complicated once you know the steps, but it is easy to skip them under deadline pressure. This tutorial covers the export workflow end to end, from preparing your file to picking formats to organizing what comes out the other side.

Before You Export: Prepare the File

A clean export starts before you ever open the export panel. A few minutes of setup here saves far more time later, especially on a file with dozens of assets.

Name your layers and frames clearly

Figma uses your layer name as the default export filename, so rename layers before you export, not after. A layer called Frame 214 becomes Frame 214.png; a layer called icon-cart-outline becomes icon-cart-outline.png. If you are exporting a batch of icons or product images, a consistent naming convention (lowercase, hyphenated, prefixed by type — icon-, banner-, logo-) makes the exported folder self-explanatory instead of a puzzle.

Group or frame what you want exported as one unit

Export settings apply to layers, groups, frames, and components — whatever object you select. If a logo is made of three separate shapes, group them first (or wrap them in a frame) so a single export produces one clean file rather than three disconnected pieces. This also protects you if someone nudges one of the shapes later; the export target stays intact as long as the group boundary does.

Check for hidden or off-canvas elements

Figma frames can extend beyond what is visually shown, and hidden layers inside a group sometimes get included in a bounding-box export even when invisible. Before exporting anything you have not touched recently, expand the layer panel and confirm nothing stray is tucked inside the frame boundary — a common cause of unexpectedly large file sizes or oddly cropped exports.

Setting Up Export Presets

With the Export panel open (select a layer, then look for the Export section at the bottom of the right-hand properties panel), you will choose a format and scale for each export. Here is how to think through both.

Choosing a format: SVG, PNG, or JPG

• SVG is the right choice for icons, logos, and any flat vector graphic. It scales to any size with no quality loss and is usually a smaller file than an equivalent PNG. If your asset is built from shapes and paths rather than photos, export it as SVG.
• PNG is the right choice for anything with transparency, photographic detail, or effects like shadows and blurs that do not translate cleanly to vector paths — think product photography cutouts, complex illustrations, or a hero banner with a soft gradient overlay.
• JPG is worth using only for large photographic images with no transparency, where file size matters more than a small amount of compression artifacting — a full-bleed lifestyle photo, for example, rather than a UI element.

Choosing a scale (1x, 2x, 3x)

Scale controls the pixel density of a raster export (SVG ignores this, since it is resolution-independent). A 1x export matches the pixel dimensions you designed at, which will look soft on high-density retina displays. For any asset going into a live storefront, add a 2x export as a minimum, and add 3x for anything that might be viewed large on a high-resolution phone or tablet. In the Export panel, click the + next to the Export heading to add multiple scale variants of the same layer in one pass — Figma will export 1x, 2x, and 3x versions in a single click once all three are configured.

Naming the export suffix

Figma lets you set a suffix per export size (for example @2x, @3x), which is worth using consistently if your codebase or theme expects that naming pattern for responsive image handling. Check the convention your storefront setup expects before exporting a large batch, so you are not renaming dozens of files afterward.

Exporting a Single Asset

1. Select the layer, group, frame, or component you want to export in the layers panel or directly on the canvas.
2. Scroll to the Export section in the right-hand properties panel and click the + to add an export setting.
3. Choose the format (SVG, PNG, or JPG) from the dropdown next to the export row.
4. If exporting a raster format, set the scale (1x, 2x, 3x) — add multiple rows for multiple scales.
5. Click Export [layer name] at the bottom of the panel, or use the keyboard shortcut, and choose a destination folder.

Exporting Multiple Assets at Once

When you need a whole set of icons, product thumbnails, or banner variants, exporting one at a time is slow. Figma supports batch export directly from the layers panel: select multiple layers with Shift-click or Command/Ctrl-click, and each one that already has an export setting configured will appear stacked in the Export panel at the bottom. Click Export All to generate every file in one pass, each keeping its own layer name and any per-layer scale settings you configured earlier.

This is where the naming-and-grouping prep from earlier pays off. If every icon in a set is already named and framed consistently, a 30-icon batch export takes the same five clicks as a single one, and the output folder is already organized by filename rather than needing a manual sort afterward.

Exporting a Full Page or Frame as an Image

Sometimes you need a full page mockup as a single flattened image — for a client review, a style guide, or a reference screenshot rather than a production asset. Select the top-level frame (not an individual element inside it), add a PNG export at 2x for a crisp result, and export as usual. For very large frames, keep in mind that export time and file size scale with both the frame dimensions and the export scale, so a full desktop-width page at 3x can take noticeably longer and produce a large file than the same frame at 2x.

Where This Fits Into a Storefront Build

If you are designing a storefront from a Figma file — whether that is a custom design or one of our Figma themes such as Optics, Medical, Wosa, Course Whiz, or Electronix — asset export is the bridge between the design file and whatever you build or hand to a developer. Each of these Figma theme files is organized into components and frames, which makes them straightforward to work through with the batch export process above: rename anything you plan to reuse, group compound elements, set SVG for icons and logos, and PNG at 2x minimum for photography and banners.

If you would rather skip the export-and-rebuild step entirely, our Optics bundle and Course Whiz bundle pair a Figma source file with a ready-to-use Shopify build, so the assets are already implemented rather than needing to be exported and wired up by hand. That is worth considering if your goal is a live store rather than a design file to hand off — export skills stay useful either way, for icon tweaks, marketing banners, and anything you add after launch.

Common Export Mistakes to Avoid

• Exporting icons as PNG instead of SVG — this bloats file size and causes blurriness at larger display sizes for no benefit.
• Forgetting the 2x/3x variant — a 1x-only export looks visibly soft on any modern phone or laptop screen.
• Exporting an ungrouped multi-shape logo — check that everything you need is inside a single frame or group before exporting, or you will end up with disconnected pieces.
• Skipping a rename pass — Frame 87.png tells you nothing six months later; a five-second rename before export saves real time down the line.
• Ignoring color profile mismatches — if colors look slightly off after export, check that your Figma file and export settings are not mixing color profiles; keeping everything in sRGB avoids most of this.

Frequently Asked Questions

Can I export directly to a specific pixel size rather than a scale multiplier?

Figma's export panel works in scale multipliers (1x, 2x, 3x) rather than exact pixel dimensions, but you can achieve a specific pixel size by resizing the frame or object itself to match, then exporting at 1x, or by calculating the multiplier needed relative to your current frame size.

Why does my exported PNG look blurry even at 2x?

This is usually a display or browser scaling issue rather than an export problem — check the image is being rendered at its native resolution and not stretched larger by CSS. It can also happen if the original layer itself contains a blurred effect or was already a low-resolution placeholder image pasted into the file.

Is there a size limit on Figma exports?

Very large frames at high scale multipliers can fail or time out, particularly full-page exports at 3x or 4x. If an export is failing, try reducing the scale, exporting in smaller sections, or exporting as SVG if the content is vector-based rather than raster.

Should I export assets myself, or ask a developer to pull them from the Figma file directly?

Either works. Developers can also use Figma's Dev Mode or the inspect panel to copy CSS values and pull assets directly without a manual export step, which is often faster for a large ongoing build. Manual export is generally the better fit for one-off assets, marketing materials, or when handing finished files to someone without Figma access.