Figma integration fails with multiple collections and variables modes

[Sylvain Marcadal (Ram)]

The figma integration seems to fail when an alias variable contains multiple modes but references a primitive without the same mode.

Tested with this file ¹
https://www.figma.com/community/file/1299749257125559105/remarkable-ui

Error

 Exception has occurred: Error: 📦 Common.Neutral.Lowest#Light: can’t find {color.light.100#Light}

Details

The file contains a color.light.100 but no color.light.100#Light because the primitives collection does not have Light mode

Figma API extract

[{
  id: "VariableID:214:71",
  name: "📦 Common/Neutral/Lowest",
  remote: false,
  key: "08ce2f5577343ea6f9d68ecba3c0ea63737224b0",
  variableCollectionId: "VariableCollectionId:203:4",
  resolvedType: "COLOR",
  description: "",
  hiddenFromPublishing: false,
  valuesByMode: {
    "203:0": {
      type: "VARIABLE_ALIAS",
      id: "VariableID:26:314",
    },
    "1104:1": {
      type: "VARIABLE_ALIAS",
      id: "VariableID:25:24",
    },
  },
  scopes: [
    "ALL_SCOPES",
  ],
  codeSyntax: {
  },
},
{
  id: "VariableID:26:314",
  name: "color/light/100",
  remote: false,
  key: "a7c4fb23a941ed6a9ee9c98dbbf7bf8025e05495",
  variableCollectionId: "VariableCollectionId:16:9",
  resolvedType: "COLOR",
  description: "",
  hiddenFromPublishing: false,
  valuesByMode: {
    "16:1": {
      r: 1,
      g: 1,
      b: 1,
      a: 1,
    },
  },
  scopes: [
    "ALL_SCOPES",
  ],
  codeSyntax: {
  },
}]

Footnotes

1. I removed % sign in variable names on my copy to be sure it was not the source of the problem but same issue. ↩

[Sylvain Marcadal (Ram)]

For reference tokens-bruecke/figma-plugin#7
Same issue in the plugin I currently use and wanted to remove from the workflow by using directly figma API.

[Drew Powers]

Ah hm. How would you recommend we solve this? Maybe if a mode doesn’t exist, just grab the first mode available (in this example, Value)? Should this throw a warning, or just be the silent default behavior?

[Sylvain Marcadal (Ram)]

A mode can exist only in one collection and collection-mode can be mixed to compose the final result.
Example : Primitive (Theme1, Theme2), Variant (Light, Dark)

would result in 4 possible combinaison Theme1-dark, Theme1-light, Theme2-dark, Theme2-light.

I don't know if the existing plugins currently handle such scenarios. I created my own plugin for Fast components.
I use the first mode in the collection as default value then each applied mode overrides the relevant variables values.

One possible implementation with CSS is described here : tokens-bruecke/figma-plugin#7 (comment)

[Drew Powers]

Ah I see. If Figma’s collections are synonymous with a theme, there’s not really a parallel in DTCG currently. I felt confident extending DTCG with modes because there was enough loose consensus to take a guess. But with themes there’s still debate (e.g. is a theme merely the sum of all modes? or is it a different concept entirely?).

But we could, say, just treat each collection as the root-level group, and iterate through the modes as you composed. This is kinda how Tokens Studio’s format works.

[Sylvain Marcadal (Ram)]

I know the issue on DTCG group is still under discussion.
I uses modes for theming but some are using them for variant like phone/desktop sizes.

But we could, say, just treat each collection as the root-level group, and iterate through the modes as you composed. This is kinda how Tokens Studio’s format works.

Yes, I think modes are related to their own collection and should not be globals. It would be to the plugins to figure out how to handle compositions and mixing collection/modes together.

[Rami Ejleh]

Any updates or solutions for this issue? I'm currently facing exactly the same struggle in handling references that don't share the same mode so any input would be highly appreciated

[Drew Powers]

@ramiejleh Improved Figma integration is on the roadmap! As a temporary workaround until that lands, the Tokens Brücke plugin is a good solution for exporting variables to JSON.