[Request/Question] Possibility to add figma tokens/variables in the simpified response.

[UhriG]

First of all thanks for the great work on the Figma MCP Server! It’s been incredibly helpful for me with Cursor, especially for one-shotting designs with Figma data.

I’ve noticed that the simplified response doesn’t include Figma variables, even though the raw response shows boundVariables with variable IDs. I’d love to get variable references in the output. Could you guide me on what’s needed to include these?

Figma Styles:

• color: var(--text-text-primary, #FFF);
• font-family: var(--font-font-family-title, Futura);
• font-size: var(--font-font-size-3xl, 40px);
• font-style: normal;
• font-weight: 500;
• line-height: 120%; /* 48px */

What We Get

• Raw:

  "children": [
    {
      "id": "726:30785",
      "name": "Heading",
      "type": "TEXT",
      "boundVariables": {
        "fills": [{"type": "VARIABLE_ALIAS", "id": "VariableID:1116:94605"}],
        "fontFamily": [{"type": "VARIABLE_ALIAS", "id": "VariableID:1085:140079"}],
        "fontSize": [{"type": "VARIABLE_ALIAS", "id": "VariableID:1092:105397"}],
        "fontStyle": [{"type": "VARIABLE_ALIAS", "id": "VariableID:1092:105386"}]
      },
      "style": {
        "fontFamily": "Futura",
        "fontSize": 40,
        "color": {"r": 1, "g": 1, "b": 1, "a": 1}
      }
    },
    {
      "id": "726:30786",
      "name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "type": "TEXT",
      "boundVariables": {
        "fills": [{"type": "VARIABLE_ALIAS", "id": "VariableID:1116:94605"}],
        "fontFamily": [{"type": "VARIABLE_ALIAS", "id": "VariableID:1091:101902"}],
        "fontSize": [{"type": "VARIABLE_ALIAS", "id": "VariableID:1092:105392"}],
        "fontStyle": [{"type": "VARIABLE_ALIAS", "id": "VariableID:1092:105385"}]
      },
      "style": {
        "fontFamily": "Nunito",
        "fontSize": 16,
        "color": {"r": 1, "g": 1, "b": 1, "a": 1"}
      }
    }
  ]
  

• Simplified:

  "children": [
  {
  "id": "726:30785",
  "name": "Heading",
  "type": "TEXT",
  "text": "Lorem Ipsum Dolor",
  "textStyle": {
    "fontFamily": "Futura",
    "fontWeight": 500,
    "fontSize": 40,
    "lineHeight": "1.2em",
    "textAlignHorizontal": "LEFT",
    "textAlignVertical": "TOP"
  },
  "fills": [{"type": "SOLID", "hex": "#FFFFFF", "opacity": 1}],
  "color": "#FFFFFF"
  },
  {
  "id": "726:30786",
  "name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  "type": "TEXT",
  "text": "Get to know the talented individuals behind our company.",
  "textStyle": {
    "fontFamily": "Nunito",
    "fontWeight": 400,
    "fontSize": 16,
    "lineHeight": "1.5em",
    "textAlignHorizontal": "LEFT",
    "textAlignVertical": "TOP"
  },
  "fills": [{"type": "SOLID", "hex": "#FFFFFF", "opacity": 1}],
  "color": "#FFFFFF"
  }
  ]
  

• Desired Simplified Response:

  {
  "children": [
   {
     "id": "726:30785",
     "name": "Heading",
     "type": "TEXT",
     "text": "Lorem Ipsum Dolor",
     "textStyle": {
       "fontFamily": "var(--font-font-family-title, Futura)",
       "fontWeight": "500",
       "fontSize": "var(--font-font-size-3xl, 40px)",
       "lineHeight": "120%", 
       "textAlignHorizontal": "LEFT",
       "textAlignVertical": "TOP"
     },
     "fills": [
       {
         "type": "SOLID",
         "color": "var(--text-text-primary, #FFFFFF)"
       }
     ],
     "color": "var(--text-text-primary, #FFFFFF)"
   },
   {
     "id": "726:30786",
     "name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
     "type": "TEXT",
     "text": "Get to know the talented individuals behind our company.",
     "textStyle": {
       "fontFamily": "var(--font-font-family-title, Nunito)",
       "fontWeight": "400",
       "fontSize": "var(--font-font-size-3xl, 16px)",
       "lineHeight": "150%", 
       "textAlignHorizontal": "LEFT",
       "textAlignVertical": "TOP"
     },
     "fills": [
       {
         "type": "SOLID",
         "color": "var(--text-text-primary, #FFFFFF)"
       }
     ],
     "color": "var(--text-text-primary, #FFFFFF)"
   }
  ]
  }
  

[GLips]

I'd love to support this, but unfortunately the API to retrieve variables is only available to Figma enterprise plan subscribers—i.e. not me, and probably not too many users.

I am looking into alternative methods for grabbing (or more likely, generating) style tokens though.

[UhriG]

Thanks for the update and the insight, GLips! I appreciate you looking into this and considering alternative methods for handling style tokens. Looking forward to any further developments! 😊👍

[Dwite]

Is this similar to cases where you see data like "textStyle": "style_6VB804", which refers to styles defined within design components? I'm not very familiar with Figma's terminology.

[mineclover]

Variables are accessible through plug-ins, but response to remote variables, styleNodes, and libraries is still challenging

[tianmuji]

one possible way to solve this is to let ai locate the color scheme file and replace color afterwards

BTW, I tried to get color token through rest api, it says

{
"status": 403,
"error": true,
"message": "Invalid scope(s): current_user:read, file_content:read, file_code_connect:read, file_code_connect:write, file_comments:read, file_comments:write, file_dev_resources:read, file_dev_resources:write, file_versions:read, library_assets:read, library_content:read, projects:read, team_library_content:read, webhooks:read, webhooks:write. This endpoint requires the file_variables:read scope"
}

I am enterprise subscriber. I guess admin should grant more access

[saltires]

I would like to ask, under the current solution, that is, when boundVariables is not parsed by FigmaServer, will some details of the design be lost?

[Chinwike1]

My fix for this was exporting my variables and design tokens in JSON and feeding that context to the LLM. It stopped making up values after that. See Variable visualizer