Hi Figma Friends!
I was wondering if anyone has had any ideas or workarounds when dealing with the dev-side of things for color variables. Currently we have a primitive color collection that is cross referenced with our semantic colors collection. Inside of the variable collection interface, we use groups to keep things organized and easy to use for our designers, but it seems like on the dev-mode side, Figma is translating the group names to individual variables.
So for example, we have a variable called “bg-neutral-primary,” which is inside of the “Backgrounds/Primary” group in our semantic collection. In Figma, this is great because the group name appears as a heading above all the variables in that group and since the variables themselves have a predictable naming structure, we can quickly search through them in the color panel. However, in dev-mode the variable name becomes “–Background-Neutral-bg-neutral-primary” which is too long and less than ideal. It also prevents our devs from using plugins like variables2css as they have to rename them one by one each time. The easy fix is to just call the variable inside of the group “primary” (instead of “bg-neutral-primary”), but then in Figma we have a bunch of variables that just show up as “primary” which makes them much more difficult to find and parse when working on and looking over a design. Curious if anyone has any suggestions for how they approach naming variable within collection groups that makes sense in both the design and dev context, or any plugins that do a better job of exporting variables in the way that they are structured in Figma? Thank you!!