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

djv
Figmate
Community Support
February 22, 2024

Hey All, thanks for the feedback!

This isn’t on our immediate roadmap, but we’ll pass this onto the team for future consideration.

Steve13
New Participant
February 29, 2024

I am newer to Figma (long time sketch user) and just ran into this issue… I searched around the internet figuring there was a simple method that I was just missing and surprised to see that isn’t the case. I guess for now I can group the contents of each variant and make that exportable instead of the variants themselves. Kind of means you are naming things twice, but I guess it works…

Tim_Daff
March 8, 2024

This plugin helps a lot:

Figma
Nikhil6
April 4, 2024

@Shane This is the best method i agree hands down. I do it the same way. Export Sheet works well. One thing to keep noted is that we copy the icons as a separate component so updating a variables of Main component in Component sheet becomes a 2x job. But manageable. 🙂

David_Brien_Swann
New Participant
April 11, 2024

Figma Please address this.

Yulia7
April 12, 2024

+1. Impossible do a proper handover, we need specifically naming like “icons/size24/feature/ic_home”. Now it’s exporting like “icons/size24/ic=home, property=feature”. If I manuallyrename it — I’m loosing properties. Aboslute nonsense 😦

Julia57
Active Member
May 16, 2024

Bumping to keep this issue alive. This feels like…a really basic use case in a design library. It blows my mind that this is even an issue.

Yuxin
August 21, 2024

Bumping up this issue! This has caused design<>front-end hand off so painful. Please fix

Michael_Staton
New Participant
August 31, 2024

I’ve been looking for a guide on Figma layer, component, variant naming… I have a pretty good system that makes sense to our developers. However, a lot of the JavaScript style syntax doesn’t export. Quite a number of the characters get converted to something… I suppose more safe? …

I agree it would be good to have control over export name syntax.

It would also be good if Figma just made it clear what filename any given object (layer, component, variant) would be exported as.

September 3, 2024

I find it incomprehensible this issue has been opened over three years ago and hasn’t been fixed yet.

I like to keep my icons as variants of the icon component. I guess if each icon variant was a separate component and you wrapped them in a section, you’d be able to mass export the icons with their names. But then you’d have to do instance swap when changing the icon. My gut feeling is that people find variants much more intuitive than separate components and instance swapping. So either this is a UX issue or a missing feature. In either case, having control over export name syntax would be a big relief.