Export Figma Assets: Names, Formats and Scale
Select the intended asset, choose an appropriate export format and scale, then verify the exported file outside Figma. A clear naming convention and a real import check are more useful than sending a folder of visually similar versions.
Before you start: Have file access that permits export and agree on the destination platform. Ask the developer which files should remain vectors and which need raster sizes before configuring exports.
Worked example: For a settings screen, deliver a vector settings icon and a raster illustration at the required density. Keep the screenshot used for review separate from the assets intended to ship.
Step-by-step guide
Inventory the deliverables
List the individual icons and illustrations required by the screen. Exclude review frames and background decoration that the application already draws through code or existing components.
Name source layers clearly
Use names that describe the asset’s purpose and state. Keep density or theme suffixes consistent with the repository so a developer can identify the intended file without opening every export.
Choose format deliberately
Use vector or raster output according to the consuming component. Check transparency and text handling with the developer instead of assuming every visible object should become a PNG.
Configure the export
Select the asset and add the required export settings. Check scale and suffix for each raster output; do not multiply vector exports simply to imitate raster density conventions.
Inspect outside the editor
Open the exported files, inspect their dimensions and place them against the target background. Confirm that clipping, unexpected padding or an opaque background has not changed the intended result.
Import a sample into the app
Have the developer use one asset through the normal build pipeline. If rendering or optimization changes it, fix the export contract before delivering the remaining set.
Common mistakes
Exporting the review frame
A screenshot of the entire screen is not a usable icon or illustration. Export only the implementation asset’s intended bounds.
Renaming only downloaded files
Future exports revert to confusing source names. Maintain the contract in the Figma layer names and export settings.
Assuming scale means layout size
Raster density and displayed dimensions are different decisions. Agree on both with the consuming application.
Tips
Keep review screenshots and shipping assets in separate folders.
Test transparent assets against both light and dark backgrounds.
Record the consuming component beside unusual export requirements.
Sources and verification
Based on product documentation checked on 2026-10-24. This is a documentation-based guide, not a hands-on benchmark. Features and availability can change.