Design

Figma Tokens Export

Paste a Figma / Tokens Studio variables JSON and export to Tailwind, shadcn CSS variables, Style Dictionary, or SCSS. Preserves color, spacing and font tokens with type inference.

html· HTML resultOpen tool

Quick start

Call this tool from your code in three languages.

cURL

curl -X POST 'https://api.elysiatools.com/en/api/tools/figma-tokens-export' \
  -H 'Content-Type: application/json' \
  -d '{"json":"{\n  \"color\": {\n    \"brand\": {\n      \"primary\": { \"$value\": \"#2563eb\", \"$type\": \"color\" },\n      \"secondary\": { \"$value\": \"#9333ea\", \"$type\": \"color\" }\n    }\n  },\n  \"spacing\": {\n    \"md\": { \"$value\": \"16px\", \"$type\": \"spacing\" }\n  }\n}","target":"tailwind","colorFormat":"hex"}'

API reference

Send a POST request with your inputs as JSON. File parameters require a separate upload first.

Endpoint

HTTP

POST https://api.elysiatools.com/en/api/tools/figma-tokens-export

Parameters

Name	Type	Required	Description
json	textarea	Yes	Figma variables or Tokens Studio JSON. Accepts $value/$type, value/type, plain nested values, or Figma REST rgba objects.
target	select	No	Which target format to export the tokens to.
colorFormat	select	No	How to re-render color tokens in the output. HSL space-separated is the shadcn convention.

Response format

HTML result

JSON

{
  "result": "<div>Processed HTML content</div>",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}

MCP integration

Add this tool to your Model Context Protocol server so AI agents can list and call it.

Server configuration

Add this block to your MCP client configuration:

mcp.json

{
  "mcpServers": {
    "elysiatools-figma-tokens-export": {
      "name": "figma-tokens-export",
      "description": "Paste a Figma / Tokens Studio variables JSON and export to Tailwind, shadcn CSS variables, Style Dictionary, or SCSS. Preserves color, spacing and font tokens with type inference.",
      "baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=figma-tokens-export",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

List available tools

After connecting to the SSE endpoint, list the exposed tools:

tools/list

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/list"
}

Call this tool

Invoke the tool by its id, passing arguments built from its parameters:

tools/call

{
  "jsonrpc": "2.0",
  "id": 2,
  "method": "tools/call",
  "params": {
    "name": "figma-tokens-export",
    "arguments": {
  "json": "{\n  \"color\": {\n    \"brand\": {\n      \"primary\": { \"$value\": \"#2563eb\", \"$type\": \"color\" },\n      \"secondary\": { \"$value\": \"#9333ea\", \"$type\": \"color\" }\n    }\n  },\n  \"spacing\": {\n    \"md\": { \"$value\": \"16px\", \"$type\": \"spacing\" }\n  }\n}",
  "target": "tailwind",
  "colorFormat": "hex"
}
  }
}

Chain multiple tools in one session with a comma-separated toolId list, e.g. /mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp (max 20).

Browse tools Open tool

curl -X POST 'https://api.elysiatools.com/en/api/tools/figma-tokens-export' \ -H 'Content-Type: application/json' \ -d '{"json":"{\n \"color\": {\n \"brand\": {\n \"primary\": { \"$value\": \"#2563eb\", \"$type\": \"color\" },\n \"secondary\": { \"$value\": \"#9333ea\", \"$type\": \"color\" }\n }\n },\n \"spacing\": {\n \"md\": { \"$value\": \"16px\", \"$type\": \"spacing\" }\n }\n}","target":"tailwind","colorFormat":"hex"}'

Name

Type

Required

Description

json

textarea

Yes

Figma variables or Tokens Studio JSON. Accepts $value/$type, value/type, plain nested values, or Figma REST rgba objects.

target

select

Which target format to export the tokens to.

colorFormat

select

How to re-render color tokens in the output. HSL space-separated is the shadcn convention.

{ "mcpServers": { "elysiatools-figma-tokens-export": { "name": "figma-tokens-export", "description": "Paste a Figma / Tokens Studio variables JSON and export to Tailwind, shadcn CSS variables, Style Dictionary, or SCSS. Preserves color, spacing and font tokens with type inference.", "baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=figma-tokens-export", "command": "", "args": [], "env": {}, "isActive": true, "type": "sse" } } }

{ "jsonrpc": "2.0", "id": 2, "method": "tools/call", "params": { "name": "figma-tokens-export", "arguments": { "json": "{\n \"color\": {\n \"brand\": {\n \"primary\": { \"$value\": \"#2563eb\", \"$type\": \"color\" },\n \"secondary\": { \"$value\": \"#9333ea\", \"$type\": \"color\" }\n }\n },\n \"spacing\": {\n \"md\": { \"$value\": \"16px\", \"$type\": \"spacing\" }\n }\n}", "target": "tailwind", "colorFormat": "hex" } } }