Figma To Code Mcp Server

Created By
toddle-edua year ago
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.
Overview

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

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)

Server Config

{
  "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"
    }
  ]
}
Project Info
Hosted
Created At
a year ago
Updated At
a year ago
Author Name
toddle-edu
Star
-
Language
-
License
-
Category

Recommend Servers

View All
Gpt Scrambler

12 hours ago
Intentions

15 hours ago
Tavily Mcp
@tavily-ai

JavaScript
a year ago