Variables Figma vs Variables Code

[StefanSeliger]

Which generators are impacted?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

I got a ux/ui design in figma from our ux designer. It contained variables for font size, border, colors etc. Unfortunately the variables she is using are not the same as in the code (auto complete). The tokens differ. The order is different to be precise.

Also I find it almost impossible to find variables like colors. There is no list that includes all variables.

Expected Behaviour

The tokens she is using should be same as in the code. figma and code should be synced.

I'd also expect a simple overview, a list, with all variables available and all colors included.

Screenshots

Browser version

Chrome

Add any other context about the problem here.

No response

[StefanSeliger]

I just realized that we changed the variables from xs to md, but you can see that the order is still different. First screenshot is figma, second is from my editor (VSCode). The actual size is at the end.

[nmerget]

@StefanSeliger thanks for your issue.

I thought the problem with the order was fixed in Figma. We gonna look into this.

Lately, we found some solution for the problem with the autocomplete. It's not the very best, but it a good starting point. We will officially announce this in v0.6.0 but you can use it right now as well: https://db-ui.github.io/mono/review/main/foundations/ide

[mfranzke]

@StefanSeliger thanks for your issue.

I thought the problem with the order was fixed in Figma. We gonna look into this.

Lately, we found some solution for the problem with the autocomplete. It's not the very best, but it a good starting point. We will officially announce this in v0.6.0 but you can use it right now as well: https://db-ui.github.io/mono/review/main/foundations/ide

Additionally we're currently trying different approaches for an easier traceability in between figma and the code.