Control variant export naming (especially for icons)

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:

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

Bumping this issue because we’re dealing with it as well - Sketch does this better and that’s saying something.

Hello! I had the same issue with the names of SVGs from Figma, so I created a free tool to quickly clean and rename SVG icons. You can try it out here: https://idgrafico.com/svg-tool.html. It’s a beta version, so any feedback would be greatly appreciated. Hope it helps!