README.md•3.93 kB
# 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
```json
"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
```bash
git clone <repository-url>
cd figma-mcp-server
npm install
npm run build
````
### Development Setup
For development with hot reloading:
```bash
# 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:
- Inspired by [Figma-Context-MCP](https://github.com/GLips/Figma-Context-MCP)