Support variables from styles?

[pkaush1212]

Hi all,

is there a way to get variables extracted from the styles?

For example, I have:

border-radius: var(--border-radius-token, 12px)

Figma MCP returns borderRadius: 12px, but is there a way to get the actual variable used "border-radius-token" instead?

@GLips

[non25]

Hello! 🙂

First, thanks to GLips for building this! You're 🪨 ⭐

And then I'll contribute a bit of information that might be helpful. 🙂

---

I've tested on tetrisly-based figma UI kit, downloaded what figma API is providing by using this shell script, and then flattened the json for easier search using gron CLI utility:

Details

#!/bin/bash
# Usage:
#   ./get-figma.sh "https://www.figma.com/design/FILE_KEY/Some-Name?node-id=123-456"

set -euo pipefail

FIGMA_URL="$1"
FIGMA_TOKEN="<your_token_here>"

# Extract file key (between /file/ or /design/ and the next slash)
FILE_KEY=$(echo "$FIGMA_URL" | sed -E 's#https://www\.figma\.com/(file|design)/([^/]+)/.*#\2#')

if [[ -z "$FILE_KEY" ]]; then
  echo "Error: could not parse file key from URL"
  exit 1
fi

# Extract node-id param if present
NODE_ID=$(echo "$FIGMA_URL" | grep -oE 'node-id=[0-9]+-[0-9]+' | sed 's/node-id=//' | sed 's/-/:/')

if [[ -n "$NODE_ID" ]]; then
  echo "Downloading node $NODE_ID from file $FILE_KEY..."
  OUTFILE="${FILE_KEY}_${NODE_ID}.json"
  curl -s -H "X-Figma-Token: $FIGMA_TOKEN" \
       "https://api.figma.com/v1/files/$FILE_KEY/nodes?ids=$NODE_ID" \
       -o "$OUTFILE"
else
  echo "Downloading full file $FILE_KEY..."
  OUTFILE="${FILE_KEY}.json"
  curl -s -H "X-Figma-Token: $FIGMA_TOKEN" \
       "https://api.figma.com/v1/files/$FILE_KEY" \
       -o "$OUTFILE"
fi

echo "Saved to $OUTFILE"

it appears that there's some variable references, but I couldn't find those ids when inspecting the network tab for both design based on UI kit and the UI kit file itself. Also tried clicking things in the UI so maybe that would trigger fetch of those variables that you can clearly see being shown on the right, but unfortunately nothing interesting in the network tab.

json.nodes["772:85964"].document.fills[0].boundVariables = {};
json.nodes["772:85964"].document.fills[0].boundVariables.color = {};
json.nodes["772:85964"].document.fills[0].boundVariables.color.id = "VariableID:fc951abfb5b1493df3eca9e4d2937626cbb2e387/4001:1426";
json.nodes["772:85964"].document.fills[0].boundVariables.color.type = "VARIABLE_ALIAS";
json.nodes["772:85964"].document.fills[0].color = {};
json.nodes["772:85964"].document.fills[0].color.a = 1.0;
json.nodes["772:85964"].document.fills[0].color.b = 1.0;
json.nodes["772:85964"].document.fills[0].color.g = 0.98039215803146362;
json.nodes["772:85964"].document.fills[0].color.r = 0.98823529481887817;
json.nodes["772:85964"].document.fills[0].type = "SOLID";

Official figma mcp provides those tokens, but it also gives code instead of just providing proper context to the LLM to re-build the design in whatever stack you wanted, making it hard to match components for example, unless you tank more expensive plans to have Code Connect, so I much prefer Framelink's approach.

So happy to see this after asking for a dev mode seat. 😁

  figma-dev-mode-mcp-server - get_code_connect_map (MCP)(nodeId: "1055:107274", clientFrameworks: "react,tailwind", clientLanguages: "typescript,javascript")
  ⎿  Error: Code Connect is only available on the Organization and Enterprise plans

The remedy I'll probably end up using is having post-process search & replace script of some sorts with a value->tokens reverse map, that would map inlined colors and spacing to possible design tokens, which then would be used for LLM to decide which semantic token to pick based on the context it's used in.

Who would've thought that fetching design tokens is an organizational level feature. 🤷‍♂️

[pkaush1212]

Hi @non25, thanks for the details! I had similar findings. The variables don't seem to be exposed by Figma API currently. There is a set of endpoints to resolve variables available for Enterprise Users that I suspect may be able to parse VariableID->Style (available here) but could not get a valid response back.

having post-process search & replace script of some sorts with a value->tokens reverse map

This is my current approach too, however, it's not a great remedy since there are values that can be similar across multiple tokens... or it could be a design which has a new token altogether that doesn't exist yet

Hopefully there is some other way to do this

[GLips]

I've looked into variable support a few times and unfortunately, I think the only way to get actual data about variables is from Figma's variable endpoints, which as you've both found are only available to users on the Enterprise plan.

If you've found a way to reverse variable data in a reliable and potentially generic way, I'd love to hear about it. Would be very nice to support in addition to styles.