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

Technical Questions
1

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;

2

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,