Figma To Code Mcp Server
About
Use this Figma MCP Server to convert Figma Design to pseudo-code like structure - simple yet efficient for LLMs to understand design context. Connect to Figma API and get pseudo-code for the given Design. For visual context, can also fetch images.
Details
- Author
- toddle-edu
- Downloads
- 392
- Categories
- Media, Frontend
Jump to
- Auto-extracts file key and node ID from Figma URLs.
- Generates pseudo-JSX + CSS code from Figma frames.
- Fetches PNG images of nodes as base64 data.
- Produces semantic HTML structure and readable formatting.
- Integrates design system components (accuracy depends on Figma library).
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
Figma To Code Mcp ServerCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
Share a Figma Design URL with an MCP client; the server automatically extracts the file key and node ID, then calls the appropriate tools. Two tools are provided: fetch_figma_node_image (returns a base64 PNG of a node) and generate_pseudo_code_from_figma_frame (returns formatted JSX, CSS, and semantic HTML). No additional configuration is required beyond the MCP client setup.
fetch_figma_node_image
Fetches a PNG image of a Figma node or frame using the file key and node ID. Returns the image as base64.
generate_pseudo_code_from_figma_frame
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.
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"figma to code mcp server": {
"figma MCP Server": {
"command": "npx",
"args": [
"figma-codegen-mcp",
"--figma_api_key=${input:FIGMA_API_KEY}"
]
}
}
}
}McpServers
{
"figma MCP Server": {
"command": "npx",
"args": [
"figma-codegen-mcp",
"--figma_api_key=${input:FIGMA_API_KEY}"
]
}
}Inputs
[
{
"id": "FIGMA_API_KEY",
"type": "promptString",
"description": "Paste your Figma Personal access Token here"
}
]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.
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)
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
