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-mcp Create 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.
Figma Design MCP Server - Create, capture, and manage Figma designs via AI agents.
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
Related MCP server: Figma MCP Server
npm installcp .env.example .env
# Edit .env and add your FIGMA_ACCESS_TOKENGet your token at: https://www.figma.com/developers/api#access-tokens
npm run buildcd plugin
npm install
npm run buildThen in Figma:
Menu → Plugins → Development → Import plugin from manifest
Select plugin/manifest.json
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"
}
}
}
}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 |
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 |
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 |
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 codebase┌─────────────┐ ┌─────────────────┐ ┌──────────────────┐
│ AI Agent │────▶│ figmad-mcp │────▶│ Figma Plugin │
│ (Claude) │stdio│ (MCP Server) │ ws │ (runs in Figma) │
└─────────────┘ └────────┬────────┘ └──────────────────┘
│
├──▶ Figma REST API (read operations)
└──▶ Playwright (web capture)npm run dev # Watch mode
npm run typecheck # Type checking
npm run lint # Linting
cd plugin
npm run watch # Watch plugin changesMIT
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Connect AI coding agents to Anima Playground, Figma, and your design system.
SaaS intelligence for AI agents. 5 unified tools cover 1,000+ services with 91-96% token savings.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/toro1221/figmad-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server