How to Export Assets from Figma

Asset export is a delivery decision. First identify whether an element should be code, text, a vector, a raster image, or purely decorative. Then select the smallest suitable format and document how it behaves in the product.

Key Takeaways

• Classify the asset before selecting an export format.
• Preserve source masters and record licenses and ownership.
• Optimize through the repository pipeline rather than trusting export alone.
• Verify appearance, replacement, loading, and accessible treatment in context.

How should you classify every candidate asset?

Figma’s “Export static designs from Figma” lists four export scopes: selected objects, a slice, an entire page canvas, or a whole file. Classify before downloading: semantic interface, informative media, decoration, icon, illustration, photograph, animation, video, or document. Anything that belongs in HTML or CSS should stay out of the asset manifest.

Consider a product badge: live price copy and status remain code, the logo may be SVG, and its flourish may need no accessible output. Record that split in the Dev Mode handoff guide so developers receive purpose, ownership, and behavior instead of a folder of visually adjacent layers.

Record where the asset appears, intended dimensions, supported modes, crop or focal behavior, and whether it changes by product variant or locale. Remove unused candidates. Exporting everything in a frame creates duplicate files and makes it harder for developers to identify the approved source.

How do you choose what should be an asset?

Figma’s “Export formats and settings for static designs” describes four formats—PNG, JPG, SVG, and PDF—with different transparency, compression, scaling, and editability tradeoffs. Choose an asset only when the interface cannot reproduce its meaning or appearance more faithfully as text, layout, a native control, or a reusable code component.

A catalog photograph warrants a raster source; a chevron may warrant SVG; a heading and add-to-cart control do not warrant files at all. The design-to-development handoff guide provides the natural place to name who owns each approved export after it leaves Figma and enters the build pipeline.

• Separate decorative and informative media.
• Preserve editable source.
• Check licensing and attribution.

How should you prepare vector assets?

W3C’s “Scalable Vector Graphics (SVG) 2” defines two descriptive elements: title for a short alternative and desc for more detail. Before export, inspect paths, strokes, masks, view box, hidden layers, color inheritance, and accessible-name intent; simplify geometry only after visual comparison confirms the icon still aligns and communicates correctly.

Export a search icon and a promotional illustration as separate test cases. The icon needs predictable bounds and may inherit current color; the illustration may preserve fixed fills and richer detail. Before turning either into a file, use the semantic HTML and CSS guide to decide whether browser-controlled markup is the more maintainable representation.

Review SVG output as code when it enters the application. Remove unsafe or unnecessary metadata through the established pipeline and check licensing. Icons that communicate meaning need accessible names in context; the exported file name is not a substitute for implementation semantics.

How should you prepare raster product and editorial media?

Shopify’s “Product media” distinguishes images plus three richer paths: hosted video, external YouTube or Vimeo video, and 3D models. That mix makes one raster-export recipe unsafe. Preserve approved masters, then define each placement’s crop, aspect ratio, focal point, transparency, color treatment, and variant mapping before producing derivatives.

For a shoe, keep color-accurate angle shots tied to the selected variant while allowing an editorial banner to crop more aggressively. Neither should imply accessories that are not included. The Figma-to-Shopify guide follows those approved masters into Shopify’s product data, theme markup, responsive image generation, and storefront delivery.

Export a suitable source rather than dozens of arbitrary scales when the application's image service produces derivatives. Check alpha needs, photographic detail, and current pipeline support before choosing a format. Preserve enough resolution for intended zoom without sending the master to every card.

How should you set asset names and folder conventions?

Figma’s “Export static designs from Figma” demonstrates a three-part slash-separated name—button/pill/default—that becomes nested folders on export. Use that behavior deliberately: stable lowercase terms should describe role and variant, while repository paths remain authoritative. Avoid coordinates, “final-final,” or mode suffixes when the downstream system can express variation in code.

A name such as product-card/badge/sale survives a canvas rearrangement; layer-42-red does not. Check the repository before creating folders, and reserve file-level mode names for genuinely separate outputs. The accessible Figma design guide adds the related requirement to document whether each named asset is informative, functional, or decorative.

Maintain a manifest or clear handoff list for large deliveries, including source frame, export choice, owner, license, and destination. Detect duplicate content with different names. Stable naming makes cache behavior, review, and replacement more predictable.

How should you configure exports intentionally?

Figma’s “Export formats and settings for static designs” defines two image-resampling options, Detailed and Basic, and restricts SVG and PDF scaling to 1x. Configure format, scale, suffix, bounds, color profile, overlap handling, and resampling together. Preview representative outputs before batching because settings suited to a crisp icon can damage photography or inflate delivery.

Run one transparent logo, one detailed product photograph, and one print-oriented document through the proposed matrix. Compare edges, gradients, text treatment, alpha, and file size before approving the batch. The editable PoloThemes Figma bundle supplies realistic commerce artwork for rehearsing that review without experimenting on production assets.

Use slices sparingly when the asset boundary cannot be expressed by the layer itself. Avoid exporting text with imagery unless it is an inseparable graphic and alternatives are planned. Confirm that hidden layers, shadows, and clipping render as expected in the output rather than only on canvas.

How should you hand off accessibility intent?

W3C’s “Web Content Accessibility Guidelines (WCAG) 2.2” makes non-text content a Level A requirement in Success Criterion 1.1.1. Handoff must therefore state purpose, not merely filename: explain the facts an informative image conveys, identify decorative media, and provide longer adjacent explanation for diagrams whose meaning cannot fit a concise alternative.

The same file may need different treatment in different contexts. A product photograph can identify an item beside sparse text, yet become redundant beside a complete caption; an icon inside a labeled button may need no repeated name. Record the intended page context, then verify the implemented accessible name and reading order.

Do not write the same alt text for every product angle or repeat nearby captions mechanically. Variant imagery must map to the selected product accurately. Verify accessible names and reading order in code because Figma annotations alone do not affect the delivered page.

How should you optimize in the delivery pipeline?

Shopify’s “Performance best practices for Shopify themes” requires a minimum average Lighthouse performance score of 60 across three route types for Theme Store acceptance. Treat that as a measurement prompt, not an export preset: use the established pipeline to generate responsive derivatives, preserve dimensions, prioritize the LCP candidate, and compare delivered bytes with visible quality.

A product hero and its gallery thumbnails should not receive the same loading priority or pixel dimensions. Process each through existing image and SVG tooling, inspect the generated markup and diff, then measure representative routes. A second optimizer adds maintenance risk unless it demonstrably improves the project’s current output.

Reserve layout dimensions, choose loading priority, and test slow and failed media. Check visual quality on representative displays and modes. Optimization is a balance between sufficient evidence and transfer cost; there is no universal export scale that solves every placement.

How should you prepare consistent exports?

Figma’s “Export formats and settings for static designs” maps five format-specific settings across PNG, JPG, SVG, and PDF. Consistency means applying an agreed matrix by asset class, not giving every layer identical settings. Define naming, tight bounds, scale, color profile, resampling, and approved variants, then sample the batch for hidden debris or unexpected flattening.

Write the matrix as a short decision table: icons, logos, photographs, illustrations, and documents each get an owner and expected output. Export one known edge case from every row before releasing the set. Downstream image services may create additional derivatives, so distinguish source consistency from final delivery encoding.

• Define naming convention.
• Export approved variants only.
• Avoid embedding untrusted metadata or unnecessary dimensions.

How do you integrate and verify?

W3C’s “Understanding Success Criterion 1.4.10: Reflow” tests horizontal content at 320 CSS pixels, equivalent to 400% zoom from 1,280 pixels. After integration, inspect rendered dimensions, source selection, crop, color, and alternative behavior across that stress case and representative displays; an export preview cannot prove browser layout or responsive delivery.

Place a logo, product image, and functional icon in their real components. Toggle light and dark modes, load narrow and wide layouts, block each request, and inspect high-density output. Verification should reveal whether fallbacks preserve meaning and space, not merely whether the files can be imported.

• Check actual rendered dimensions.
• Verify SVG safety and color inheritance.
• Test missing and slow-loading media states.

How should you test replacement and cache behavior?

HTTP Archive’s 2024 “HTTP” chapter reports that CDNs served 54% of more than 1.3 billion observed requests. That scale makes replacement testing part of asset QA: update one product image, one icon, and one mode-specific logo through the real pipeline, then check every URL, derivative, cache layer, layout reservation, and rollback path.

Stable paths and content-hashed filenames fail differently. With a stable path, confirm invalidation reaches browsers and edge caches; with hashes, confirm every consumer points to the new artifact and old variants can retire safely. Record the project convention and rehearse restoration so a bad export is reversible.

Verify and maintain assets

Inspect every asset in the running route for crop, color, sharpness, alignment, theme mode, accessibility, and responsive choice. Confirm unused files are not shipped and that source and generated outputs have clear ownership. Visual approval in Figma does not prove browser rendering.

When replacing an asset, preserve stable paths where appropriate or update all consumers deliberately. Track licenses and original masters, remove superseded derivatives through the repository's normal process, and rerun visual and performance checks after material changes.

Verify assets in the delivery context

Create an export manifest listing every asset’s purpose, source layer, format, dimensions or density, crop behavior, color treatment, transparency, accessible alternative, and destination. Export logos, illustrations, interface icons, and decorative media accordingly. Filenames should remain stable and meaningful enough for a developer or editor to identify replacements without opening Figma.

Place assets in actual responsive components before approval. Inspect sharpness and file size on standard and high-density screens, cropping at narrow and wide ratios, dark and light backgrounds, browser zoom, slower networks, and failure to load. Confirm icons inherit color when intended, SVGs have appropriate view boxes, raster images avoid unnecessary pixels, and decorative files are excluded from assistive output.

Record optimization after export as part of the pipeline. Compare delivered bytes and rendered quality, retain license or attribution details, and make ownership of replacement explicit. The manifest should let somebody reproduce an export without relying on one designer’s memory. Acceptance belongs to the implemented page because a pristine file can still be mis-sized, mislabeled, or misused.

Implementation checklist

• Each exported file has a purpose and owner.
• Format matches content and delivery support.
• Names, bounds, and variants are consistent.
• Optimization and accessibility are verified in product.

Conclusion

A clean export workflow delivers fewer, better assets. The goal is not to reproduce every canvas layer—it is to give the product the media it needs in a form it can load, understand, and maintain.

Frequently asked questions

Should icons be SVG or PNG?

SVG is often appropriate for simple scalable icons, but the implementation must account for SVG safety, styling, and rendering needs. Use raster output when the artwork or pipeline requires it.

Does exporting at multiple scales guarantee responsive images?

No. The application must still choose sources and sizes correctly, reserve layout space, optimize delivery, and provide meaningful alternatives.