[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! 😊👍