The variant export name then defaults to “OS Type=Apple.svg”
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?
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.
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.
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.
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.
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.
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.
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.