Design token mapping from Figma to Builder CLI in the Develop space is not happening as expected

We are facing challenges with mapping design tokens, particularly for colors and typography.
We have already registered the colors within the builder-registery.js file, but the tokens are not mapping properly when converting designs to code.
Builder.register(“editor.settings”, {
** designTokens: {**
** colors: [**
** { name: “Nuvama-Blue”, value: “var(–nuvama-blue, #9999ab)” }**
** ]**
** },**
});

We are expecting to directly use Figma variables in the generated CSS, such as: color: var(–nuvama-blue);

Builder.io is using the raw hex color values from Figma instead of mapping them to design tokens, for example color: #9999AB;

Hi Tarachand​,

Here are a few steps you can check to troubleshoot the problem.

  1. Make sure the CSS variable syntax is correct. You may have long dashes (–) instead of regular hyphens (-) in var(–nuvama-blue).
Builder.register("editor.settings", {
  designTokens: {
    colors: [
      {
        name: "Nuvama-Blue",
        value: "var(--nuvama-blue, #9999ab)"
      }
    ]
  }
});
  1. Use Tokens That Match Figma Style Names Exactly

The name "Nuvama-Blue" must exactly match the name of the color style in Figma.

For example, if in Figma your color is called "Primary/Nuvama Blue" or "Nuvama Blue", you should either:

  • Rename the Figma token to match "Nuvama-Blue" (recommended),
  • Or use the exact name in Builder like:
name: "Primary/Nuvama Blue"
  1. Add a :root CSS Block for Tokens in Your Global Styles. Even if registered, make sure the variable is defined somewhere in CSS:
:root {
  --nuvama-blue: #9999ab;
}

I hope the above steps will solve your problem. Please let me know if you need further assistance.

Thanks,