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

**URL:** https://forum.builder.io/t/design-token-mapping-from-figma-to-builder-cli-in-the-develop-space-is-not-happening-as-expected/14205
**Category:** Technical Questions
**Tags:** react
**Created:** [April 4, 2025, 10:59am UTC](https://forum.builder.io/t/design-token-mapping-from-figma-to-builder-cli-in-the-develop-space-is-not-happening-as-expected/14205 "2025-04-04T10:59:22Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![tarachand-nuvama](https://avatars.discourse-cdn.com/v4/letter/t/b77776/32.png) [@tarachand-nuvama](https://forum.builder.io/u/tarachand-nuvama)
#### Post date: [April 4, 2025, 10:59am UTC](https://forum.builder.io/t/design-token-mapping-from-figma-to-builder-cli-in-the-develop-space-is-not-happening-as-expected/14205/1 "2025-04-04T10:59:22Z")

</div>

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](http://Builder.io) is using the raw hex color values from Figma instead of mapping them to design tokens, for example **color: #9999AB;**

---

<div class="post-metadata">

### Author: ![ParthSharma](https://avatars.discourse-cdn.com/v4/letter/p/a9adbd/32.png) [@ParthSharma](https://forum.builder.io/u/ParthSharma)
#### Post date: [April 7, 2025, 7:50am UTC](https://forum.builder.io/t/design-token-mapping-from-figma-to-builder-cli-in-the-develop-space-is-not-happening-as-expected/14205/2 "2025-04-07T07:50:31Z")

</div>

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)`.

```auto
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:

```auto
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:

```auto
:root {
  --nuvama-blue: #9999ab;
}

```

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

Thanks,