Giters

tokens-studio / figma-plugin

Official repository of the plugin 'Tokens Studio for Figma' (Figma Tokens)

Home Page:https://www.figma.com/community/plugin/843461159747178978

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Order of tokensets in theme export is different to the one in the sidebar

Lippe opened this issue · comments

commented

Describe the bug
When looking at the $themes.json the order of the token sets of a theme seem to be coming from the order in which the token set were activated or added to a theme. This doesn't match the order in $metadata.json.

We stumbled upon this because after converting the tokens to CSS through styledictionary tokens were overwritten only partially by our customertheme. Within Figma the ordering and overwriting of tokens worked as expected, this only affected the export to CSS.
We were able to fix it ad hoc by removing the customer theme token set from the theme, saving the theme, and re-adding the customer theme token set.

How a theme in the $themes.json was ordered like when pushed to gitlab:

  • defaulttheme.json
  • feature1.json
  • feature2.json
  • customertheme.json
  • feature3-AfterCustomerThemeWasCreated.json

This led to some tokens of defaulttheme, feature1 and feature2 being rightfully overwritten by customertheme after export/conversion to CSS, while tokens in feature3-AfterCustomerThemeWasCreated were not overwritten even though they were added to customertheme. After removing and readding customertheme from the theme the order looked like this:

  • defaulttheme.json
  • feature1.json
  • feature2.json
  • feature3-AfterCustomerThemeWasCreated.json
  • customertheme.json

Now for all tokens the values from customertheme were used, just like it was visible before in Figma.

In the plugin gui in Figma our token sets are ordered differently:

  • defaulttheme
  • Atoms/feature1
  • Atoms/feature2
  • Molecules/feature3-AfterCustomerThemeWasCreated
  • Themes/customertheme

To Reproduce
Steps to reproduce the behavior:

  1. Create multiple token sets
  2. Add several token sets to a theme
  3. Create another token set, which is ordered higher than your last token set that was added to the theme
  4. Push to gitlab
  5. Compare order of token sets in $metadata.json and $themes.json

Expected behavior
To have the same order of the token sets in the exported theme as in the left sidebar of the plugin (which is also the same order in the theme tokenset selector).

initial thread on Slack
https://tokens-studio.slack.com/archives/C02DLQXNY6Q/p1717768662160129