Skip to main content
Glama

Figma MCP Server

by toddle-edu

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.

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

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:

-
security - not tested
F
license - not found
-
quality - not tested

A server that converts Figma designs into pseudo-code structures optimized for LLMs to understand design context, allowing easy extraction of visual elements and code-like representations from Figma files.

  1. Features
    1. Setup in MCP clients
      1. For local development
        1. Prerequisites
        2. Install & Build
        3. Development Setup
      2. Usage
        1. Available MCP Tools
        2. Figma Links Example:
        3. Integration with MCP Clients
      3. Kudos:

        Related MCP Servers

        • A
          security
          F
          license
          A
          quality
          Enables seamless interaction with Figma via the Model Context Protocol, allowing LLM applications to access, manipulate, and track Figma files, components, and variables.
          Last updated -
          2
          106
          TypeScript
          • Apple
        • -
          security
          A
          license
          -
          quality
          A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
          Last updated -
          124
          6
          TypeScript
          MIT License
          • Linux
          • Apple
        • -
          security
          F
          license
          -
          quality
          A Model Context Protocol server that connects AI tools and LLMs to Figma designs, enabling them to extract design data, analyze design systems, and generate development documentation.
          Last updated -
          TypeScript
          • Apple
        • -
          security
          A
          license
          -
          quality
          Gives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.
          Last updated -
          44,047
          TypeScript
          MIT License

        View all related MCP servers

        MCP directory API

        We provide all the information about MCP servers via our MCP API.

        curl -X GET 'https://glama.ai/api/mcp/v1/servers/toddle-edu/figma-mcp-server'

        If you have feedback or need assistance with the MCP directory API, please join our Discord server