Skip to main content
Question

Import JSON file in Variable

  • February 17, 2026
  • 1 reply
  • 82 views

D-sine

Hi everyone,

I have been trying to import JSON file in Figma variables, But run into error all the time.
This is my JSON code, what I’m doing wrong? is there any documentation for JSON format?

[
{
"name": "neutral/50",
"type": "COLOR",
"value": "#F6F5F4",
"description": "Page backgrounds, app canvas"
},
{
"name": "neutral/600",
"type": "COLOR",
"value": "#796F6B",
"description": "Tertiary text, metadata"
},
{
"name": "neutral/700",
"type": "COLOR",
"value": "#5E5652",
"description": "Body text alternative"
},
{
"name": "neutral/800",
"type": "COLOR",
"value": "#453E3B",
"description": "High-emphasis body text"
},
{
"name": "neutral/900",
"type": "COLOR",
"value": "#2D2825",
"description": "Primary text (≈ Encre)"
},
{
"name": "neutral/950",
"type": "COLOR",
"value": "#1D1A18",
"description": "Maximum contrast text"
}
]

 

1 reply

Doug Crissman

Did you ever find an answer to this? There doesn’t seem to be any documentation. Here is what I have figured out so far…structure needs to be like this (these are the minimum properties necessary to not get that import error):
 

​​​​​​​{
  "gray-0": {
    "$type": "color",
    "$value": {
      "colorSpace": "srgb",
      "components": [1, 1, 1],
      "hex": "#FFFFFF"
    }
  },
  "gray-50": {
    "$type": "color",
    "$value": {
      "colorSpace": "srgb",
      "components": [0.9764706, 0.98039216, 0.9843137],
      "hex": "#F9FAFB"
    }
  }
}

If you’re doing something fancy like light/dark/other modes, each mode needs to be a separate file. For example Light.token.json and Dark.token.json and you select both files in the file dialogue when importing.​​​​​​​

You can also reference existing variables like this (below). Some oddities about this method - when imported, Figma correctly connects to the right variable via “targetVariableName” and “targetVariableSetName”; however, the hard-coded properties in “$value” still need to be included to avoid import errors.

{
"text-primary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.06666667014360428,
0.08627451211214066,
0.12156862765550613
],
"alpha": 1,
"hex": "#11161F"
},
"$extensions": {
"com.figma.aliasData": {
"targetVariableName": "gray-900",
"targetVariableSetName": "color"
}
}
},
"text-secondary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.21568627655506134,
0.2549019753932953,
0.3176470696926117
],
"alpha": 1,
"hex": "#374151"
},
"$extensions": {
"com.figma.aliasData": {
"targetVariableName": "gray-700",
"targetVariableSetName": "color"
}
}
}
}