Figma

Provides automatic conversion of Figma designs to pseudo-code and images for clear design-to-code communication.

typescript

5

GitHub Stars

typescript

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "toddle-edu-figma-mcp-server": {
      "command": "npx",
      "args": [
        "-y",
        "figma-codegen-mcp",
        "--figma_api_key",
        "<YOUR-FIGMA-PERSONAL-ACCESS-TOKEN>"
      ],
      "env": {
        "FIGMA_API_TOKEN": "<YOUR-FIGMA_API_TOKEN>"
      }
    }
  }
}

You can run a Figma MCP Server to automatically extract design context from Figma URLs and convert designs into readable pseudo-code and images for easier communication with large language models. This server makes it simple to generate semantic HTML/CSS-like structures and JSX representations from your designs, helping you prototype and document design systems quickly.

How to use

You use the server with an MCP client by providing a Figma design URL. The client will automatically extract the fileKey and nodeId from the URL and call one or both tools to fetch a visual context image or generate pseudo-code. You can fetch PNG images of specific Figma nodes or frames and generate JSX/CSS-like pseudo-code that maps the design to semantic HTML, CSS, and JSX components. These capabilities are especially helpful for design-to-code workflows, rapid prototyping, and design documentation.

How to install

Prerequisites: Node.js (v22) and npm.

Install & Build the MCP Server

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

Usage example and configuration

You can run the MCP server client with the following configuration snippet. This starts the server via npx and provides your Figma API key placeholder.

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

Development and local run

For development with hot reloading, follow these steps to set up the environment and start the server locally.

# 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

Available tools

fetch_figma_node_image

Fetches a PNG image of a Figma node or frame and returns it as base64 data. Provides a visual context by downloading a PNG image of any design element.

generate_pseudo_code_from_figma_frame

Generates JSX and CSS pseudo-code for a Figma design. Outputs CSS styles, JSX structure, semantic HTML elements, and readable code formatting for rapid prototyping.