Skip to main content
Glama
toddle-edu

Figma MCP Server

by toddle-edu
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Remote

Figma MCP Server

MCP Server to convert Figma Design to pseudo-code like structure - simple yet efficient for LLMs to understand design context.

Features

  • Connect to Figma API and get pseudo-code for the given Design. For visual context, can also fetch images.

  • Supports generating pseudo-code for design system components & semantic HTML content.

  • Just share Figma Design URL with MCP client and it will extract the file key and node ID automatically, calls the appropriate tools to fetch the pseudo-code and/or image.

Related MCP server: Figma MCP Server

Setup in MCP clients

    "Figma MCP Server": {
      "command": "npx",
      "args": ["-y", "figma-codegen-mcp", "--figma_api_key=<YOUR-FIGMA-PERSONAL-ACCESS-TOKEN>"]
    }

For local development

Prerequisites

  • Node.js (v22)

  • npm

Install & Build

git clone <repository-url>
cd figma-mcp-server
npm install
npm run build

Development Setup

For development with hot reloading:

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env
# Edit .env and add your FIGMA_API_TOKEN

# Start development server with hot reloading
npm run dev

# Or build for production
npm run build

# Start production server
npm start

Usage

This Figma MCP Server provides two main tools for interacting with Figma designs:

Available MCP Tools

1. fetch_figma_node_image

Fetches a PNG image of a Figma node or frame and returns it as base64 data.

Description: Downloads a visual representation of any Figma design element (frame, component, layer, etc.) as a PNG image.

Parameters:

  • fileKey (string, required): The key of the Figma file. Can be found in Figma URLs like figma.com/(file|design)/<fileKey>/...

  • nodeId (string, required): The ID of the specific node to capture. Found as URL parameter like node-id=<nodeId>

Returns: Base64-encoded PNG image and MIME type.

Example Use Cases:

  • Getting visual context of design components

  • Creating documentation with actual design screenshots

2. generate_pseudo_code_from_figma_frame

Generates JSX and CSS pseudo-code for a Figma design.

Description: Analyzes Figma design elements and generates corresponding Pseudo HTML + CSS code. The generated code includes semantic HTML structure, CSS properties, and Pseudo-React JSX components based on your figma component library.

Parameters:

  • fileKey (string, required): The key of the Figma file. Can be found in Figma URLs like figma.com/(file|design)/<fileKey>/...

  • nodeId (string, required): The ID of the frame/component to convert. Found as URL parameter like node-id=<nodeId>

Returns: Formatted text containing:

  • CSS styles

  • JSX component structure

  • Semantic HTML elements

  • Clean, readable code formatting

Example Use Cases:

  • Converting Figma designs to Pseudo - React components

  • Providing a better code-like representation of figma design to LLM

  • Integrates design system ( accuracy & quality depends on Figma component library )

  • Rapid prototyping from designs

  • Helper in Design-to-code workflow automation

Figma Links Example:

When sharing Figma designs, the URL contains the required parameters:

https://www.figma.com/design/ABC123XYZ/My-Design?node-id=1200%3A23&t=randomstring
                              ↑                          ↑
                          fileKey                      nodeId (URL encoded)

  • File Key: ABC123XYZ (the part after /design/ or /file/)

  • Node ID: 1200 (from the node-id parameter, URL decoded)

Integration with MCP Clients

These tools are designed to work with MCP-compatible clients. Simply provide a Figma design URL, and the client can automatically extract the fileKey and nodeId to call the appropriate tools for fetching images and/or generating code.

Kudos:

Available Tools

2 tools
fetch_figma_node_imageB

Fetches a PNG image of a Figma node or frame using the file key and node ID. Returns the image as base64.

ParametersJSON Schema
NameRequiredDescriptionDefault
fileKeyYesThe key of the Figma file to fetch, Can be found in a provided URL like `figma.com/(file|design)/<fileKey>/...
nodeIdYesThe ID of the node to fetch, can be found as URL parameter like `node-id=<nodeId>`, Must use if provided.

TDQS

B3.3/5.0
Behavior2/5

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

No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the action ('Fetches') and output format ('base64'), but lacks critical details such as authentication requirements, rate limits, error conditions, or whether the operation is idempotent. For a tool with no annotation coverage, this leaves significant behavioral gaps.

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?

The description is a single, efficient sentence that front-loads the core action and output. Every word serves a purpose—specifying the resource, parameters, and return format—with no redundant or vague phrasing, making it highly concise and well-structured.

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

Completeness3/5

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

Given the tool's moderate complexity (2 required parameters, no output schema, no annotations), the description covers the basic purpose and output but lacks depth. It doesn't address authentication, error handling, or usage context, which are important for a tool that interacts with an external API. While adequate for simple use, it falls short of being fully comprehensive.

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?

The schema description coverage is 100%, with both parameters well-documented in the input schema. The description adds minimal value by mentioning the parameters ('file key and node ID') but doesn't provide additional context beyond what the schema already covers, such as format specifics or edge cases. This meets the baseline for high schema coverage.

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?

The description clearly states the specific action ('Fetches a PNG image'), the resource ('of a Figma node or frame'), and the mechanism ('using the file key and node ID'). It distinguishes itself from the sibling tool 'generate_pseudo_code_from_figma_frame' by focusing on image retrieval rather than code generation, making the purpose unambiguous and well-differentiated.

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

Usage Guidelines2/5

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

The description provides no guidance on when to use this tool versus alternatives or any prerequisites. While it mentions the required parameters, it doesn't explain scenarios where fetching an image is appropriate compared to other Figma operations or the sibling tool, leaving usage context entirely implicit.

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

generate_pseudo_code_from_figma_frameB

It will generates JSX and CSS pseudo-code for a Figma frame or node, given its file key and node ID. Useful for converting Figma designs to code. Can also be used to generate code for specific components or frames in Figma.

ParametersJSON Schema
NameRequiredDescriptionDefault
fileKeyYesThe key of the Figma file to fetch, Can be found in a provided URL like `figma.com/(file|design)/<fileKey>/...`
nodeIdYesThe ID of the node to fetch, can be found as URL parameter like `node-id=<nodeId>`, Must use if provided.

TDQS

B3.1/5.0
Behavior2/5

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

No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool generates pseudo-code but does not describe output format, quality, limitations, or any side effects (e.g., rate limits, authentication needs). This leaves significant gaps for an agent to understand the tool's behavior beyond its basic function.

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

Conciseness4/5

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

The description is concise and front-loaded with the core purpose in the first sentence. The second sentence adds useful context without redundancy, though it could be slightly more structured (e.g., separating use cases). Overall, it avoids unnecessary details and is efficiently written.

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

Completeness2/5

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

Given the tool's complexity (code generation from design assets) and lack of annotations and output schema, the description is incomplete. It does not address what the output looks like (e.g., format, structure), potential errors, or how to interpret the generated pseudo-code, leaving critical gaps for an agent to use the tool effectively.

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?

Schema description coverage is 100%, so the schema already documents both parameters (fileKey and nodeId) adequately. The description adds no additional parameter semantics beyond what the schema provides, such as examples or constraints, resulting in a baseline score of 3.

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

Purpose4/5

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

The description clearly states the tool's purpose: 'generates JSX and CSS pseudo-code for a Figma frame or node' with specific resources (Figma file key and node ID). It distinguishes from the sibling tool 'fetch_figma_node_image' by focusing on code generation rather than image fetching, though the distinction could be more explicit.

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?

The description implies usage context ('Useful for converting Figma designs to code') and mentions applicability to 'specific components or frames', but lacks explicit guidance on when to use this tool versus alternatives or any prerequisites. No clear exclusions or comparisons with the sibling tool are provided.

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

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 2 tool updatesv1.0.11
    • First observedfetch_figma_node_image
    • First observedgenerate_pseudo_code_from_figma_frame
Deploy Server
One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

TDQS

B3.2/5.0

Scored across 2 tools

Disambiguation5/5

The two tools have clearly distinct purposes: one fetches an image of a Figma node, while the other generates pseudo-code from a Figma frame. There is no overlap or ambiguity in their functions, making it easy for an agent to select the correct tool based on the task.

Naming Consistency4/5

The tool names follow a consistent verb_noun pattern (fetch_figma_node_image, generate_pseudo_code_from_figma_frame), but there is a minor deviation in verb tense ('fetches' vs 'generates') and slight length variation. Overall, the naming is predictable and readable, with only small inconsistencies.

Tool Count2/5

With only two tools, the server feels thin and under-scoped for a Figma integration. While the tools cover image fetching and code generation, a Figma MCP server would typically benefit from more operations, such as listing files, accessing design properties, or managing comments, making this set incomplete for the domain.

Completeness2/5

The tool surface is significantly incomplete for a Figma server. It lacks basic CRUD operations like listing files or nodes, updating designs, or accessing metadata. The two tools provided are useful but do not cover core workflows, leaving obvious gaps that could cause agent failures in common Figma-related tasks.

Resources

Related MCP Connectors

Related MCP Servers

Appeared in Searches