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

tamasratkai
January 4, 2022

Any update about this?

Danch
January 7, 2022

More of a workaround:

  1. move the variants outside from the main component.
  2. now you will have multiple components named something like main_component_name/variant_name.
  3. use Rename it plugin and choose 2.Find and Replace selected Layers.
  4. to Find add “man_component_name/”, leave Replace empty and click Rename
  5. now all components will have the clear name.
  • For multiple variant values you might need to do 4. multiple times to clean other //
Constantine_Zuev
January 7, 2022

On Mac you can use batch Rename to fix the names. Select all files then right click and pick Rename…

roge
New Member
March 31, 2022

Pretty cool workaround! I I made some changes by rename first property same as variant name. This has the advantage of avoiding conflicts with other assets prefixes when first property is the same.

Michele1
April 29, 2022

Hello guys. Any update on this?

I tried the two Figma plugins available (“Export Variants” and “Frame Exporter”). They do actually work but they apply only one resolution/format export mode at time. SO you are forced to do multiple export passes for each resolution and file format (I usually need to export 1x, 2x, 3x PNG + SVG) and adding custom suffix information. Totally unfeaseable for day to day jobs.

You got some news or update on this?

RJ_Clarke
New Participant
May 26, 2022

Just here to say how painful this STILL is, even after Config updates.

Murat_Dincer
June 30, 2022

Having the same issue and our developers are struggling with this a lot. Hope to see a solution soon.

Stephanie_Preuthen1
July 15, 2022

Same issues with our devs, Figma please fix this. 🥲

Sam_Kim
September 7, 2022

same here. why should I use figma if I have to rename all the resource files every time?

Taylor_Campbell
New Member
February 14, 2023

any update on this? I tried naming all of my Variants what I wanted their name to export as, which worked until I needed to adjust something in one of them and now they won’t update in other files, which is kind of the entire point of Variants…