Ability to specify format of Variables Code Syntax

I was very surprised to see the code syntax for variables require editing every single variable one by one… like many folks, we are mapping to our design tokens and use programmatically transformed naming.

Using regular expressions (or any other kind of replace and format) for syntax would solve for:

  • namespacing before the transform (which definitely should be able to be aliased to a string variable — could even be at the collection level)
  • moving a variable’s grouping doesn’t change its syntax automatically, I see no way to deal with this currently except to delete and rename in the syntax every single time (while hoping you don’t miss any)
  • specifying the separator
  • potential to rearrange the group order, exclude levels of grouping from the syntax name, etc.
  • ability to make other format changes that may be wanted in the future.

At the very least I was expecting some form of control over what the separator is, but it’s just “/“ (which doesn’t even match the behavior of the transformation to CSS in Figma’s inspect panel).

I’d be happier writing /?([^/]+) once than to manually edit every single generated syntax name.