Feature suggestion: Option to omit collection names as top-level groups

[james-nash]

I see that Tokens Brücke wraps tokens in top-level groups based on the Figma variable collection name or type of style (e.g. "Typography").

In my case, I don't need those top-level names so an option to omit them and just place tokens from all collections into a single top-level group would be useful. References would of course need to be updated accordingly too.

I guess there may be cases where there's a clash - e.g. multiple variable collections contain variables with the exact same path. Perhaps Tokens Brücke just keep the last one it encounters and display a warning to let users know there was a clash. Or it could be treated as an error. I don't really have a strong preference either way.

[dev-nicolaos]

What pain is having the top level collection groups present in the structure causing? If the idea is just allowing consumers to type one fewer word when referencing a token, I'm not sure that its worth implementing. Here is my reasoning:

• I worry the increasing number of export options in this plugin could start to make maintenance and debugging tricky, and may not be worth implementing.
• As you point out, this also has the capacity to cause errors or a loss of data if there's a collision. Those are both pretty bad user experiences the plugin would need to try and explain for users who flip on the option without understanding the potential consequences. Today that just isn't a problem.
• Most people likely won't be using this plugin's raw output directly anyway, and I believe tools like Cobalt and Style Dictionary that consume the output allow you to implement custom transformers where the same affect could be achieved.

[james-nash]

What pain is having the top level collection groups present in the structure causing?

Not a huge amount, to be honest. In my case I'm using Cobalt UI to generate CSS custom properties from the DTCG file that Tokens Brücke exports out of Figma. By default, those top-level groups get included in the names, so I get stuff like:

:root {
  --collectionName-groupName-nestedGroupName-varName: #123456;
}

However, when designers select color vars in Figma, the collection name is not shown. They just see something like: "groupName/nestedGroupName" followed by a list of variable names. E.g.:

(those variables are all in a collection called "Theme", but that's not visible in the variable picker - at least for colors. The collection names do seem to show up for other types)

In order to better align what our designers and devs see, we therefore want to strip off the collection name in the CSS, so that developers would get something like:

  --groupName-nestedGroupName-varName: #123456;

  /* e.g. */
  --color-background-brand-subtlest-default: #654321;

We've already configured Cobalt to do that (as you had suggested).

However, it just got me thinking it might be nice if it could all just work without needing to do that custom config. Hence the feature suggestion.

Happy for this to be closed though since it's quite niche and probably doesn't justify the effort needed to implement this.

[mryechkin]

Happy for this to be closed though since it's quite niche and probably doesn't justify the effort needed to implement this.

On the contrary, I would love to see this feature be implemented. I don't agree with the sentiment that this could result in bad user experience - in fact it's absence is what's making that user experience worse for me personally, because now I have to write my own custom transformer instead of using off-the-shelf ones that Style Dictionary already provides (which is all I need).

I see something like this as an "advanced" feature, and perhaps it should come with a warning to the user - if there are collisions, then that's on the user, not the plugin.

Anyway, just my opinion. I have no horse in this race, just something I immediately noticed when checking out this plugin. It's a great tool otherwise, and if I didn't already have my own code for exporting variables, I would most likely use it instead.