Suggestions for variable naming continuity between design and front-end? 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 pre