Figma MCP Server
Provides integration with Figma's API, enabling access to design files, projects, and other Figma resources through the Model Context Protocol
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Figma MCP Servershow me the latest designs in my team project"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
figma-mcp-server
This project runs a Model Context Protocol (MCP) server for Figma integration using the figma-developer-mcp package.
Prerequisites
Node.js v20 or higher
A Figma Personal Access Token (API key)
Related MCP server: Figma MCP Server
Installation
Install dependencies:
npm installRunning the Server
Option 1: Using Podman Compose
This project includes containerization support using Red Hat Universal Base Image (UBI) for both Apple Silicon (ARM64) and Linux (AMD64) architectures.
Prerequisites
Podman installed
A Figma Personal Access Token (API key)
Steps
Create a
.envfile in the project root:FIGMA_API_KEY=your_figma_personal_access_token_hereStart the service:
podman-compose up -dStop the service:
podman-compose down
Option 2: Using Podman Directly
Building the Container
Using the Build Script
./build-container.shBuild with Podman
# For current architecture
podman build -t quay.io/balki404/figma-mcp-server:1.0 .
# For specific architecture
podman build --platform linux/amd64 -t fquay.io/balki404/figma-mcp-server:1.0-amd64 .
podman build --platform linux/arm64 -t quay.io/balki404/figma-mcp-server:1.0-arm64 .Running the Container
# Run with environment variable
podman run -e FIGMA_API_KEY=your_figma_api_key_here quay.io/balki404/figma-mcp-server:1.0-arm64
# Run in detached mode with port mapping
podman run -d --name figma-mcp -p 3333:3333 -e FIGMA_API_KEY=your_figma_api_key_here quay.io/balki404/figma-mcp-server:1.0-arm64
# Run with restart policy and port mapping
podman run -d --restart=unless-stopped --name figma-mcp -p 3333:3333 -e FIGMA_API_KEY=your_figma_api_key_here quay.io/balki404/figma-mcp-server:1.0-arm64Option 3: Direct Node.js
You can start the server directly with your Figma API key using the following command:
npx figma-developer-mcp --figma-api-key <YOUR_FIGMA_API_KEY>Replace <YOUR_FIGMA_API_KEY> with your actual Figma Personal Access Token.
Features
Environment-based configuration: Easy API key management through environment variables
SSE endpoint: Server-Sent Events available at
http://localhost:3333/sse
This server cannot be deployed
Maintenance
Related MCP Connectors
The Figma MCP server brings Figma design context directly into your AI workflow.
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…
A Model Context Protocol server for Wix AI tools
Enable secure connectivity between Sentry issues and debugging data, and LLM clients, using a Model Context Protocol (MCP) server.
Related MCP Servers
- AlicenseBqualityDmaintenanceEnables seamless interaction with Figma via the Model Context Protocol, allowing LLM applications to access, manipulate, and track Figma files, components, and variables.21,225 npm150MIT
- FlicenseBqualityDmaintenanceEnables AI assistants to interact with Figma files through the ModelContextProtocol, allowing viewing, commenting, and analyzing Figma designs directly in chat interfaces.51,589 npm213-
- FlicenseBqualityDmaintenanceA Model Context Protocol server that integrates with Figma's API, allowing interaction with Figma files, comments, components, projects, and webhook management.51,589 npm-
- AlicenseNot gradedqualityDmaintenanceModel Context Protocol server that bridges design and development, giving AI assistants complete access to Figma for extraction, creation, debugging, and bidirectional token sync.15,625 npmMIT