mohammeduvaiz_figma-mcp-server
If you are the rightful owner of mohammeduvaiz_figma-mcp-server and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.
A Model Context Protocol (MCP) server that connects to Figma's API, allowing AI tools and LLMs to access and work with your Figma designs.
Figma MCP Server
A Model Context Protocol (MCP) server that connects to Figma's API, allowing AI tools and LLMs to access and work with your Figma designs.
Features
- Design Data Extraction: Extract components, styles, and text from your Figma designs
- Design System Analysis: Analyze design system consistency and patterns
- UI Content Management: Extract and organize all UI copy from designs
- Development Handoff: Generate comprehensive documentation for developers
- Seamless AI Integration: Connect your designs to AI tools like Claude, Cursor, and other MCP-compatible clients
Getting Started
Prerequisites
- Node.js 16 or higher
- Figma Personal Access Token (Get it from your Figma account settings)
Installation
-
Clone the repository:
git clone https://github.com/yourusername/figma-mcp-server.git cd figma-mcp-server -
Install dependencies:
npm install -
Create a
.envfile in the project root:FIGMA_API_TOKEN=your_figma_personal_access_token API_KEY=your_secure_api_key TRANSPORT_TYPE=stdio -
Build the server:
npm run build -
Start the server:
npm start
Connecting to Clients
Claude for Desktop
-
Open or create the Claude for Desktop configuration file:
- macOS:
~/Library/Application Support/Claude/claude_desktop_config.json - Windows:
%APPDATA%\Claude\claude_desktop_config.json
- macOS:
-
Add the following configuration:
{ "mcpServers": { "figma": { "command": "node", "args": ["/absolute/path/to/figma-mcp-server/build/index.js"], "env": { "FIGMA_API_TOKEN": "your_figma_personal_access_token", "TRANSPORT_TYPE": "stdio" } } } } -
Restart Claude for Desktop
Cursor
Global Configuration
Create or edit Cursor's MCP configuration file:
- macOS:
~/Library/Application Support/Cursor/mcp.json - Windows:
%APPDATA%\Cursor\mcp.json
{
"mcpServers": {
"figma-mcp": {
"url": "http://localhost:3000/sse",
"env": {
"API_KEY": "your_secure_api_key"
}
}
}
}
Project-Specific Configuration
-
Create a
.cursordirectory in your project root:mkdir -p .cursor -
Create an
mcp.jsonfile inside that directory:{ "mcpServers": { "figma-mcp": { "url": "http://localhost:3000/sse", "env": { "API_KEY": "your_secure_api_key" } } } }
Available Tools
| Tool | Description |
|---|---|
get-file-info | Get basic information about a Figma file |
get-nodes | Get specific nodes from a Figma file |
get-components | Get component information from a Figma file |
get-styles | Get style information from a Figma file |
get-comments | Get comments from a Figma file |
search-file | Search for elements in a Figma file by type, name, etc. |
extract-text | Extract all text elements from a Figma file |
Available Prompts
analyze-design-system- Analyze design system components and styles for consistencyextract-ui-copy- Extract and organize all UI copy from designsgenerate-dev-handoff- Generate development handoff documentation based on designs
Usage Examples
Using with Claude:
Can you analyze the design system in my Figma file with key abc123? Look for consistency in color usage and typography.
Using with Cursor:
Generate React components for the buttons from my Figma file with key abc123, using tailwind CSS.
Environment Variables
| Variable | Description | Default |
|---|---|---|
FIGMA_API_TOKEN | Your Figma Personal Access Token | (Required) |
API_KEY | Security key for API authentication | (Required) |
TRANSPORT_TYPE | Transport method (stdio or sse) | stdio |
PORT | Port for SSE transport | 3000 |
Architecture
This MCP server:
- Connects to the Figma API using your personal access token
- Exposes a standardized interface following the Model Context Protocol
- Provides tools, resources, and prompts that LLMs can use to interact with your Figma designs
- Supports both stdio transport (local connections) and SSE transport (remote connections)
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
