Skip to main content

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?

I resolved the issue by creating an Apple Automator Workflow that converts the Figma variant “=” to “_”. Additionally, it exports all the filenames to a CSV file. Our developer can then take the CSV file containing the filenames and import them into their array.


The Apple Automator Workflow file can be downloaded at: Dropbox - Figma to CSV.workflow.zip - Simplify your life


+1 on this issue.


+1 for the topic, the naming convention is completely lost


Agree this is kind of outrageous it hasn’t been addressed yet, especially with the paid dev mode seats now in full effect. Icons exported from dev mode only carry the component name and lose the variant name, adding even more confusion to this mess. Can you please get this sorted asap Figma. We looked into connecting icon libraries to Git and it’s just a huge pain trying to get icons out of Figma without so many extra steps or loss of information (variant names)


still waiting for this…


Hey All, thanks for the feedback!


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


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…


This plugin helps a lot:


Figma

@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. 🙂


Figma Please address this.


+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 😦


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.


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


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.


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.


I figured the best solution currently is probably to bulk rename afterwards. From the export, I got files such as “variant=user.png”. On PowerShell you can bulk rename the exported files like so:


cd >path to the folder]

ls * | Rename-Item -NewName {$_.name -replace “variant=”, “”}


which essentially removes the “variant=” from the file names. I hope someone finds this helpful.


This really saved the day for me and my engineers. Cheers!


Hello, could this please be flagged and escalated in the roadmap? This is still an important issue.


I personally love bulk exporting, and then digging through a series of folders and sub-folder to rip them all out, and rename everything by hand. Really cool system.


+1

Please Figma. I’m tired of policing both designers and developers from project to project when we could just maintain one Figma file for core elements.


Reply