Figma Support Forum

Need to control variant export naming (especially for icons)

When exporting variant names, the file name becomes a combination of all the variant properties.

There is no way to control the variant export name, which is especially difficult for developer hand-off.

In this example, I have a back icon variant group (Named “Back”) containing both an Apple and an Android variant of the back icon.

If I then go to export the Apple variant as an SVG,

The variant export name then defaults to “OS Type=Apple.svg”
Screen Shot 2021-03-11 at 8.35.40 AM

It would be even worse if I had multiple properties. For example, having two more properties could result in a variant name export as “OS Type=Apple, Direction=Left, Style=Line.svg”

This is a very poor naming convention, especially for icons. What I would like to have is the ability to control the name given to each variant export.

In the above example, I would like the Apple icon to export as the name “back.ios.svg” and the Android icon to export as “back.android.svg”. This way, our developers can export assets as needed directly from Figma without having to figure out what name to give each icon — further bringing together the designer/developer handoff.

Anyone else having this problem or have found a workaround?

3 Likes
  1. When exporting assets for dev teams, if I have an icon as a component, with variants, the file names are wild! I have to rename assets by hand and manually update the json files, or I have to detach the instance and rename and then export.

There has to be a better way.

Thanks!

Alyssa Klein
Product Designer @ Teladoc

1 Like

Has anyone else cup up with a workaround for this?

Would :heart: to hear from a Figma support dev!

Definitely a workaround, but I create an “export sheet” beside the component sheet. It has an instance of every asset variant I want exported on it, named as I want the export to be named. One pro of this approach is I often create two copies with different names (or folder path) and different export settings. So you get a folder of svg’s and a folder of png’s, for example.