Skip to main content
Dan2
New Participant
March 11, 2021

Control variant export naming (especially for icons)

  • March 11, 2021
  • 55 replies
  • 13525 views

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?

55 replies

Alyssa_Klein
March 12, 2021
  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

Dan2
Dan2Author
New Participant
April 8, 2021

Has anyone else cup up with a workaround for this?

Would ❤️ to hear from a Figma support dev!

Shane
April 8, 2021

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.

Tina_Kim
May 13, 2021

Don’t get why this issue hasn’t gotten more votes!
Variants are awesome. But trying to mass-export them is another issue.
Right now, Figma doesn’t let you export variant assets with structural naming, which is a huge problem for our dev team right now. :’(
Hope this reddit thread helps you get a workaround.

reddit

Figma team, please have a look into this issue. 🙏

Lukas_Oppermann
May 21, 2021

Yep, big issue for us as well. It would already help if the main component (variant parent) name would be added

davemakes
June 10, 2021

Agreed. I really love the component variant system for working within Figma, and it would be great if I could configure exports to use the component, property, and variant names I’ve entered in a configurable syntax when exporting so that info is useful outside of Figma as well.

Jonathan_Roy
New Participant
September 28, 2021

At lest include the component name (treating path elements as sub-folders) in the output file name for each variant. Otherwise, two components might very well have identical properties and values, and those would clash on export.

TEAM23_Design
September 30, 2021

This is a huge issue for icon exports.
Please let us configure the export naming somehow.

If the component is named ‘menu’ and the variant is Size=16, i would like some way to export ‘menu-16.svg’ for example.

Aleksander_Djordjevic
September 30, 2021

I’ve been using this plugin called Export Variants ( Figma - Export Variants | Easily export your variants to SVG. Figma variants are neat however they can be frustrating to ... ). It does a lot of what you are asking for here.

I still believe this should be handled natively by Figma, but it has been a good substitute for me at least

Vitor_Goncalves
New Member
November 25, 2021

This plugin is a major progress in this regard, but we can’t customize file names or choose to export in a different file format.