Figma Context MCP

convert-figma-to-code

Fetches a Figma node and converts it into a code block, enabling AI to generate production-level frontend code from design files.

Instructions

Fetches a Figma node and its rendered image from the Figma API and converts it to a code block. Requires FIGMA_ACCESS_TOKEN environment variable to be set.

Tool call template

Replace each placeholder with a value matching the input schema. Only required parameters are included; add optional parameters as needed.

{
  "id": 1,
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": {
    "arguments": {
      "figmaNodeUrl": "<figmaNodeUrl>"
    },
    "name": "convert-figma-to-code"
  }
}

Input Schema

Name	Required	Description	Default
`figmaNodeUrl`	Yes	The URL of the Figma node (e.g., https://www.figma.com/design/fileKey/fileName?node-id=123-456)

Schema Changelog

Changes observed during successful MCP inspections.

First observedv1.0.4Jul 10, 2026

TDQS

A3.8/5.0

Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries full burden. It discloses the required environment variable and the basic action (fetch, convert), but does not cover behavioral details like rate limits, output format specifics, error handling, or side effects. The description is adequate but not rich.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two short sentences, front-loaded with the main action and then the prerequisite. Every sentence is valuable with no wasted words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple tool with one parameter and no output schema, the description covers the essential action and a key prerequisite. It could mention the output code language or format, but overall it is fairly complete given the low complexity.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Input schema covers 100% of the single parameter with a clear description and example. The tool description adds the prerequisite but does not add additional meaning beyond the schema. Baseline 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Description clearly states the tool fetches a Figma node and its rendered image, then converts to a code block. Verb and resource are specific, and no sibling tools exist to differentiate, so high clarity.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Description mentions the prerequisite (FIGMA_ACCESS_TOKEN) but provides no guidance on when to use this tool versus alternatives, nor any when-not-to-use context. Since no siblings exist, the lack of differentiation is not critical, but usage guidance is minimal.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Deploy Server

Other Tools

convert-figma-to-codeA