Colors are only NaN

[bodograumann]

Description

I am looking into a way to export Design Tokens from Figma to a tailwind css config. This plugin looks really cool already, but unfortunately it fails to export colors correctly.

Steps to reproduce

• Open a figma document with same color variables.
• Open the plugin
• Select hex colors (as an example, the same problems occurs with the other formats)
• Click "Generate"

Now all the colors are filled with NaN, e.g.:

theme: {
  colors: {
    "bg": {
      01/container: "#NANNANNAN",

Additional context

Another small thing I noticed, not sure if it warrants a separate ticket: Special characters in keys are not replaced / escaped. Same example, the 01/container should be put in quotes and I think the / needs to be replaced with some other character.

Figma Version

Web 2024-05-27

Plugin Version

Latest as of 2024-05-27

Design or Dev Mode?

Both

Please confirm that you have searched existing issues in the repo.

• [X] Yes

[bodograumann]

I think I have found the cause for issue. When using variables of type COLOR, those might still be aliases. So then .r, .g and .b don't exist. Can we add a dereferencing step?

while (colorStyle.type === 'VARIABLE_ALIAS') {
  colorStyle = figma.variables.getVariableById(colorStyle.id)
}