
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.

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.

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.
Quick Article Links
Can I open Office files in browser without installing apps?
Browser-based Office file handling refers to viewing and editing Microsoft Word, Excel, PowerPoint, and other documents ...
What is a .zip file?
A .zip file is a digital archive format that bundles one or more files or folders into a single, compressed container. I...
Can I batch rename files with colored tags?
File tagging systems assign visual color labels to files as part of the operating system's metadata (like macOS Tags or ...