Allows for the creation, capture, and management of Figma designs, including tools to read file structures, nodes, and styles, as well as write operations to create frames, shapes, and text.
Enables the extraction of components and design tokens from React codebases to compare or sync them with Figma design files.
Click on "Install 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., "@figmad-mcpCreate a mobile login screen with email and password fields"
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.
figmad-mcp
Figma Design MCP Server - Create, capture, and manage Figma designs via AI agents.
Features
Read Operations: Get files, nodes, components, styles, variables, export images
Write Operations: Create frames, shapes, text; apply auto-layout; update nodes (requires plugin)
Capture & Reconstruct: Screenshot webpages and recreate them in Figma
Generate UI: Create UI designs from text prompts
Setup
1. Install Dependencies
npm install2. Configure Environment
cp .env.example .env
# Edit .env and add your FIGMA_ACCESS_TOKENGet your token at: https://www.figma.com/developers/api#access-tokens
3. Build
npm run build4. Install Plugin (for write operations)
cd plugin
npm install
npm run buildThen in Figma:
Menu → Plugins → Development → Import plugin from manifest
Select
plugin/manifest.json
Usage
With Claude Desktop
Add to claude_desktop_config.json:
{
"mcpServers": {
"figmad": {
"command": "node",
"args": ["/path/to/figmad-mcp/dist/index.js"],
"env": {
"FIGMA_ACCESS_TOKEN": "your-token-here"
}
}
}
}Available Tools
Read Operations (REST API - always available)
Tool | Description |
| Get Figma file structure |
| Get specific nodes by ID |
| List components in a file |
| Get color/text/effect styles |
| Get design tokens/variables |
| Export node as PNG/SVG/PDF |
Write Operations (Plugin required)
Tool | Description |
| Create a new frame |
| Create a rectangle shape |
| Create text node |
| Modify node properties |
| Apply auto-layout to frame |
| Set fill colors |
| Delete a node |
| Get current selection |
| Check if plugin is connected |
Orchestrated Tools
Tool | Description |
| Screenshot and analyze a webpage |
| Recreate captured page in Figma |
| Generate UI from text description |
| Extract components and design tokens from code |
| Compare/sync tokens between Figma and code |
Example Prompts
Get the structure of my Figma file: [paste figma URL]
Create a landing page with a header, hero section with headline and CTA button, three feature cards, and a footer
Capture https://example.com and recreate it in Figma
Export the frame "Hero Section" as a PNG
Analyze my React codebase at /path/to/project and extract design tokens
Compare design tokens between my Figma file and codebaseArchitecture
┌─────────────┐ ┌─────────────────┐ ┌──────────────────┐
│ AI Agent │────▶│ figmad-mcp │────▶│ Figma Plugin │
│ (Claude) │stdio│ (MCP Server) │ ws │ (runs in Figma) │
└─────────────┘ └────────┬────────┘ └──────────────────┘
│
├──▶ Figma REST API (read operations)
└──▶ Playwright (web capture)Development
npm run dev # Watch mode
npm run typecheck # Type checking
npm run lint # Linting
cd plugin
npm run watch # Watch plugin changesLicense
MIT
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.