Design

Exportateur de Tokens Figma

Collez un JSON de variables Figma / Tokens Studio et exportez vers Tailwind, variables CSS shadcn, Style Dictionary ou SCSS. Préserve les tokens de couleur, d'espacement et de police avec inférence de type.

html· Résultat HTMLOuvrir l'outil

Démarrage rapide

Appelez cet outil depuis votre code en trois langages.

cURL

curl -X POST 'https://api.elysiatools.com/fr/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"}'

Référence de l'API

Envoyez une requête POST avec vos entrées en JSON. Les paramètres de type fichier nécessitent un upload préalable.

Point d'accès

HTTP

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

Paramètres

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

Format de réponse

Résultat HTML

JSON

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

Intégration MCP

Ajoutez cet outil à votre serveur Model Context Protocol pour que les agents IA puissent le lister et l'appeler.

Configuration du serveur

Ajoutez ce bloc à la configuration de votre client MCP :

mcp.json

{
  "mcpServers": {
    "elysiatools-figma-tokens-export": {
      "name": "figma-tokens-export",
      "description": "Collez un JSON de variables Figma / Tokens Studio et exportez vers Tailwind, variables CSS shadcn, Style Dictionary ou SCSS. Préserve les tokens de couleur, d'espacement et de police avec inférence de type.",
      "baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=figma-tokens-export",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Lister les outils disponibles

Après connexion au point d'accès SSE, listez les outils exposés :

tools/list

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

Appeler cet outil

Appelez l'outil par son id ; les arguments sont construits à partir de ses paramètres :

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"
}
  }
}

Parcourir les outils Ouvrir l'outil

curl -X POST 'https://api.elysiatools.com/fr/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"}'

Nom

Type

Requis

Description

json

textarea

Oui

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

target

select

Non

Which target format to export the tokens to.

colorFormat

select

Non

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": "Collez un JSON de variables Figma / Tokens Studio et exportez vers Tailwind, variables CSS shadcn, Style Dictionary ou SCSS. Préserve les tokens de couleur, d'espacement et de police avec inférence de type.", "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" } } }