Figma (Oficial)
The Figma MCP server brings Figma directly into your workflow by providing important design information and context to AI agents generating code from Figma design files.
Ads
Overview
The Figma MCP server brings Figma directly into your workflow by providing important design information and context to AI agents generating code from Figma design files. > [!NOTE] > Rate limits apply to Figma MCP server tools that read data from Figma. Some tools, such as those that write to Figma files, are exempt from the rate limits. > <br><br> > Users on the Starter plan or with View or Collab seats on paid plans will be limited to up to 6 tool calls per month. > <br><br> > Users with a Dev or Full seat on the Professional, Organization, or Enterprise plans have per minute rate limits, which follow the same limits as the Tier 1 Figma REST API. As with Figma’s REST API, Figma reserves the right to change rate limits.
Installation
claude mcp add --transport http figma https://mcp.figma.com/mcp
Configuration
{
"mcpServers": {
"figma": {
"url": "https://mcp.figma.com/mcp"
}
}
}Capabilities
- Generate code from selected frames
Ask your assistant to turn a Figma frame into production-ready code for any framework or styling system.
- Extract design context
Pull variables, components, and layout data into your IDE to inform component-based workflows via `get_design_context`.
- Write to the canvas
Create and modify native Figma content like frames, components, and auto layout directly from your MCP client.
- Reuse components with Code Connect
Keep generated code consistent with your codebase by linking Figma components to your existing code.
- Fetch variable definitions
Retrieve color, spacing, and typography tokens from a selection using `get_variable_defs` for token-based code generation.
- Generate designs from web pages
Capture or convert a web page into a Figma design directly from your AI coding agent.
Tags
- figma
- design
- design-to-code
- development
- ai-agent
Related MCP servers
Context7 MCP
OfficialOfficial Context7 MCP server that brings up-to-date, version-specific library documentation and code examples into AI coding prompts.
Chrome DevTools MCP
OfficialOfficial Chrome DevTools MCP server for controlling and inspecting a live Chrome browser from coding agents such as Gemini, Claude, Cursor, and Copilot.
Mastra/mcp
OfficialClient implementation for Mastra, providing seamless integration with MCP-compatible AI models and tools.
GitHub MCP Server
OfficialConnect your AI assistant to GitHub repositories, issues, pull requests, and search.