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.
- 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)"
}
]
}
});
- 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"
- 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,