Figma MCP Server
Connects to the Figma API, allowing AI tools to access and interact 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.
Servidores relacionados
Alpha Vantage MCP Server
patrocinadorAccess financial market data: realtime & historical stock, ETF, options, forex, crypto, commodities, fundamentals, technical indicators, & more
Flame MCP Server
Provides live, up-to-date documentation for the Flame game engine.
Remote MCP Server (Authless)
An authentication-free remote MCP server deployable on Cloudflare Workers.
CIE - Code Intelligence Engine
Local code analysis MCP server with 25+ tools: semantic search, call graph tracing, dependency analysis, and symbol navigation. Built with Tree-sitter and CozoDB. Supports Go, Python, JS, TS.
MAXential Thinking MCP
Gives Claude explicit tools for reasoning: adding thoughts, branching to explore alternatives, revising earlier thinking, and navigating thought history. 11 focused tools designed for how Claude actually thinks
VideoDB
Server for advanced AI-driven video editing, semantic search, multilingual transcription, generative media, voice cloning, and content moderation.
WordPress Feel Chatbot Plugin
A WordPress plugin that transforms a WordPress site into an MCP server, allowing direct access to its content.
BCMS MCP
Give me a one - two sentence description of the BCMS MCP # MCP The BCMS Model Context Protocol (MCP) integration enables AI assistants like Claude, Cursor, and other MCP-compatible tools to interact directly with your BCMS content. This allows you to create, read, and update content entries, manage media files, and explore your content structure—all through natural language conversations with AI. ## What is MCP? The [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) is an open standard developed by Anthropic that allows AI applications to securely connect to external data sources and tools. With BCMS MCP support, you can leverage AI assistants to: - Query and explore your content structure - Create new content entries with AI-generated content - Update existing entries - Manage your media library - Get intelligent suggestions based on your content model --- ## Getting Started ### Prerequisites 1. A BCMS account with an active instance 2. An MCP key with appropriate permissions 3. An MCP-compatible client (Claude Desktop, Cursor, or any MCP client) ### Step 1: Create an MCP Key 1. Navigate to your BCMS dashboard 2. Go to Settings → MCP 3. Click Create MCP Key 4. Configure the permissions for templates you want the AI to access:GET: Read entries 5. POST: Create entries 6. PUT: Update entries 7. DELETE: Delete entries Note: Right now, MCP only supports creating, reading and updating content. ### Step 2: Configure Your MCP Client You can find full instructions for integrating BCMS with your AI tools right inside BCMS, on the MCP page. But in general, installing BCMS MCP works in a standard way: ``` { "mcpServers": { "bcms": { "url": "https://app.thebcms.com/api/v3/mcp?mcpKey=YOUR_MCP_KEY" } } } ``` ## Available Tools Once connected, your AI assistant will have access to the following tools based on your MCP key permissions: ### Content Discovery #### list_templates_and_entries Lists all templates and their entries that you have access to. This is typically the first tool to call when exploring your BCMS content. Returns: - Template IDs, names, and slugs - Entry IDs with titles and slugs for each language Example prompt: "Show me all the templates and entries in my BCMS" --- ### Entry Management #### list_entries_for_{templateId} Retrieves all entries for a specific template with full content data. A separate tool is generated for each template you have access to. Returns: - Complete entry data including all meta fields - Content in all configured languages - Entry statuses Example prompt: "List all blog posts from my Blog template" --- #### create_entry_for_{templateId} Creates a new entry for a specific template. The input schema is dynamically generated based on your template's field structure. Input: - statuses: Array of status assignments per language - meta: Array of metadata for each language (title, slug, custom fields) - content: Array of content nodes for each language Example prompt: "Create a new blog post titled 'Getting Started with BCMS' with a brief introduction paragraph" --- #### update_entry_for_{templateId} Updates an existing entry for a specific language. Input: - entryId: The ID of the entry to update - lng: Language code (e.g., "en") - status: Optional status ID - meta: Updated metadata - content: Updated content nodes Example prompt: "Update the introduction paragraph of my 'Getting Started' blog post" --- ### Media Management #### list_all_media Lists all media files in your media library. Returns: - Media IDs, names, and types - File metadata (size, dimensions for images) - Parent directory information Example prompt: "Show me all images in my media library" --- #### list_media_dirs Lists the directory structure of your media library. Returns: - Hierarchical directory structure - Directory IDs and names Example prompt: "Show me the folder structure of my media library" --- #### create-media-directory Creates a new directory in your media library. Input: - name: Name of the directory - parentId: Optional parent directory ID (root if not specified) Example prompt: "Create a new folder called 'Blog Images' in my media library" --- #### request-upload-media-url Returns a URL you use to upload a file (for example via POST with multipart form data), which avoids pushing large binaries through the MCP tool payload. You still need a valid file name and MIME type when uploading, as described in the tool response. Availability: Only when the MCP key has Can mutate media enabled. Example prompt: “Give me an upload URL for a new hero image, then tell me how to upload it.” Input: - fileName: Name of the file with extension - fileData: Base64-encoded file data (with data URI prefix) - parentId: Optional parent directory ID Example prompt: "Upload this image to my Blog Images folder" --- ### Linking Tools #### get_entry_pointer_link Generates an internal BCMS link to an entry for use in content. Input: - entryId: The ID of the entry to link to Returns: - Internal link format: entry:{entryId}@*_{templateId}:entry Example prompt: "Get me the internal link for the 'About Us' page entry" --- #### get_media_pointer_link Generates an internal BCMS link to a media item for use in content. Input: - mediaId: The ID of the media item Returns: - Internal link format: media:{mediaId}@*_@*_:entry Example prompt: "Get the link for the hero image so I can use it in my blog post" --- ## Content Structure ### Entry Content Nodes When creating or updating entries, content is structured as an array of nodes. Supported node types include: Type Description paragraph Standard text paragraph heading Heading (h1-h6) bulletList Unordered list orderedList Numbered list listItem List item codeBlock Code block with syntax highlighting blockquote Quote block image Image node widget Custom widget with props ### Example Content Structure ``` { "content": [ { "lng": "en", "nodes": [ { "type": "heading", "attrs": { "level": 1 }, "content": [ { "type": "text", "text": "Welcome to BCMS" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "This is your first paragraph." } ] } ] } ] } ``` ## Security & Permissions ### MCP Key Scopes Your MCP key controls what the AI can access: - Template Access: Only templates explicitly granted in the MCP key are visible - Operation Permissions: Each template can have independent GET/POST/PUT/DELETE permissions - Media Access: Media operations are controlled separately ### Best Practices 1. Principle of Least Privilege: Only grant the permissions needed for your use case 2. Separate Keys: Create different MCP keys for different purposes or team members 3. Regular Rotation: Periodically rotate your MCP keys ## Use Cases ### Content Creation Workflows Blog Post Creation "Create a new blog post about the benefits of headless CMS. Include an introduction, three main benefits with explanations, and a conclusion. Use the Blog template." Product Updates "Update the price field for all products in the Electronics category to apply a 10% discount" ### Content Exploration Content Audit "List all blog posts that don't have a featured image set" Translation Status "Show me which entries are missing German translations" ### Media Organization Library Cleanup "Show me all unused images in the media library" Folder Setup "Create folder structure for: Products > Categories > Electronics, Clothing, Home" ## Troubleshooting ### Common Issues #### "MCP key not found" - Verify your MCP key format: keyId.keySecret.instanceId - Ensure the MCP key hasn't been deleted or deactivated - Check that you're using the correct instance #### "MCP key does not have access to template" - Review your MCP key permissions in the dashboard - Ensure the required operation (GET/POST/PUT/DELETE) is enabled for the template #### Session Expired - MCP sessions may timeout after periods of inactivity - Simply start a new conversation to establish a fresh session ### Getting Help - Documentation: [thebcms.com/docs](https://thebcms.com/docs) - Support: [[email protected]](mailto:[email protected]) - Community: [Join BCMS Discord](https://discord.com/invite/SYBY89ccaR) for community support ## Technical Reference ### Endpoint POST https://app.thebcms.com/api/v3/mcp?mcpKey={MCP_KEY} ### Transport BCMS MCP uses the Streamable HTTP transport with session management. Sessions are maintained via the mcp-session-id header. ### Response Format All tools return structured JSON responses conforming to the MCP specification with: - content: Array of content blocks - structuredContent: Typed response data ## Rate Limits MCP requests are subject to the same rate limits as API requests: - Requests are tracked per MCP key - Contact support if you need higher limits for production workloads
Testomat.io
Integrate Testomat.io API with AI assistants for test management.
Command Executor
Execute pre-approved shell commands securely on a server.
MCP Java Dev Tools
Bridges agentic coding tools and live Java runtime behavior through a lightweight sidecar agent.