Error writing Design tokens

[BarnDotCom]

We are suddenly unable to sync design tokens from Figma, and are getting the following error:

Error: Error: Error: Error: Error: Color has no "Fills" property

This is a new issue, we had no problems pulling the tokens before. I noticed that Figma itself was just updated, is that possibly related?

[mikaelvesavuori]

Hi!

The only place that should be throwing that error is here:

function makeColorToken(item: Frame, colors: Record<string, unknown>) {
  // @ts-ignore
  if (!item.fills) throw new Error(ErrorMakeColorTokensNoFills);
  if (!item.fills[0]) throw new Error(ErrorMakeColorTokensNoFills);

  const NAME = camelize(item.name);
  const FILLS = item.fills[0];

  if (FILLS.type === 'SOLID') colors[NAME] = createSolidColorString(FILLS);
  else if (FILLS.type === 'GRADIENT_LINEAR') colors[NAME] = createLinearGradientString(FILLS);
  else if (FILLS.type === 'GRADIENT_RADIAL') colors[NAME] = createRadialGradientString(FILLS);
}

This has been unchanged for 8-9 months. However, I have recently added work on the gradients you see above. Of course not impossible that some rippling effect has occurred, though your error comes before anything happens with new code.

Can you tell me more about your tokens, colors etc so I have some context? Are they gradients or solids? What version of Figmagic are you using?

[mikaelvesavuori]

Speculation: You don't happen to use colors with no fill? Because I can see how those would blow up according to the code above.

[BarnDotCom]

Thanks for the speedy response Mike. We are now using version 4.2.16 of Figmagic but were seeing the error with the older 4.1.2 version too. We are using all solid colors, and every layer has a fill assigned. Here is a grab: https://www.dropbox.com/s/44f211ptkn200yz/design-tokens-colors.png?dl=0

[mikaelvesavuori]

Trying to replicate but cannot. It works. Attempting to use your naming convention, and use lots of colors, but nothing breaks it...

As expected, removing the fill from a color breaks Figmagic.

Can you verify that you can pull tokens from the template document with FIGMA_URL=K39TRbltDVcWFlpzw9r7Zh?

My speculation is that this should logically be something in the Figma file gone awry. It's a really technical error that I never thought would actually be fired! :) Would be good if you could try to isolate the error by removing/adding the color swatches (individually, all, ...) and see if that does something.

[mikaelvesavuori]

I have a fix I could push out that simply ignores any design token "swatches" that have zero-length fills. It would be a quality of life improvement mostly, because while it won't kill the process, you would not get the color value either.

Would that suit your needs? If nothing else, you'd be able to see what is missing (i.e. was ignored).

[mikaelvesavuori]

This change is now being built and will be out shortly in version 4.2.17.

[BarnDotCom]

We are getting the same error with your URL, so we are doing a reinstall.

We will also try your latest version - thanks Mike!

[mikaelvesavuori]

4.2.17 is out. I'd be happy to have a short Google Meet if this does not resolve it.

Before installing, make sure you nuke the node_modules folder and the existing lockfile.

[BarnDotCom]

Yes, that build seems to have resolved the issue Mike, thank you. We get get all the color values imported with 4.2.17. We tried again with the earlier version just as a test, and still got the error, so the change you made appear to have fixed the issue.

[BarnDotCom]

We also noticed that we mistakenly had a couple of duplicate layers in the Color frame - layers with the exact same name in Figma, though with different color fills and different Figma styles assigned. Once we fixed those we were able to get all colors imported.

[mikaelvesavuori]

Brilliant! Glad to have been of service and sorry for whatever happened there.

Closing.