How do I rename exported images from Figma or Sketch?

Renaming exported images in Figma or Sketch involves setting custom filenames before generating asset files. Unlike simple saving, this process happens within the export dialogue using specific naming syntax and variables. Both platforms allow users to define templates incorporating elements like layer names, dimensions, scales, and custom text, automating consistent naming across multiple assets without manual post-export renaming.

WisFile FAQ Image

In Figma, select layers, open the export panel (right sidebar), click the settings icon next to the format, and enter a name using variables like {layer_name}, {scale}, or {width}x{height} (e.g., icon-{layer_name}-{width}.png). Sketch offers similar functionality: in the export preview sidebar, click the export preset dropdown, choose "Rename Layers", and define patterns using variables such as %layer, %scale, or %prefix for contextual filenames.

This templated approach ensures naming consistency across teams (e.g., mobile UI teams) and simplifies asset management for developers. However, complex naming rules can be cumbersome to define, and multi-select exports might not always merge variable contexts perfectly. Adoption relies on understanding the platform-specific syntax, but significantly enhances workflow efficiency compared to manually altering filenames post-export.

How do I rename exported images from Figma or Sketch?

Renaming exported images in Figma or Sketch involves setting custom filenames before generating asset files. Unlike simple saving, this process happens within the export dialogue using specific naming syntax and variables. Both platforms allow users to define templates incorporating elements like layer names, dimensions, scales, and custom text, automating consistent naming across multiple assets without manual post-export renaming.

WisFile FAQ Image

In Figma, select layers, open the export panel (right sidebar), click the settings icon next to the format, and enter a name using variables like {layer_name}, {scale}, or {width}x{height} (e.g., icon-{layer_name}-{width}.png). Sketch offers similar functionality: in the export preview sidebar, click the export preset dropdown, choose "Rename Layers", and define patterns using variables such as %layer, %scale, or %prefix for contextual filenames.

This templated approach ensures naming consistency across teams (e.g., mobile UI teams) and simplifies asset management for developers. However, complex naming rules can be cumbersome to define, and multi-select exports might not always merge variable contexts perfectly. Adoption relies on understanding the platform-specific syntax, but significantly enhances workflow efficiency compared to manually altering filenames post-export.

Still wasting time sorting files byhand?

Meet WisFile

100% Local & Free AI File Manager

Batch rename & organize your files — fast, smart, offline.