Figma
Claude connectorGenerate diagrams and better code from Figma context
The Figma MCP server helps you pull in Figma context and generate high-quality code that aligns with your codebase and design intent. Use the MCP server to retrieve code resources from Figma Design or Make files, and turn your ideas into production apps.
Key features:
- Generate code from selected frames or nodes - Select a frame in Figma or provide a node URL to have an AI agent turn your design into code.
- Extract design context from layers - Pull out variables, components, and layouts from a design to ensure builds adhere to design patterns.
- Code smarter with Code Connect - Boost output quality by reusing your actual components, the MCP server informs AI agents about existing components derived from Code Connect information.
- Map your flows with diagrams - The Figma MCP server can turn your Claude prompts into flow charts, Gantt charts, or other diagrams in FigJam.
Note: The get_screenshot tool is currently limited to returning a descripton of screenshots in Figma when called in Claude and Claude Code. See developer term here
- Tools
- 9
exposed by this connector
Movement
From our daily snapshots over the last 30 days.
Rank by popularity
Rank by trending score
Popularity score
Trending score
In its category
How this connector compares with others in the same category. Positions are counted within the category, not across the whole directory.
Creative1st of 533 by popularity · 35th of 263 by trending score
| # | Connector | Popularity | Trending | 7d |
|---|---|---|---|---|
| 1 | 22,222 | 46,343 #35 | 0 | |
| 2 | 20,884 | 42,423 #40 | 1places down | |
| 3 | 20,230 | 30,174 #77 | 1places down | |
| 4 | 19,999 | 33,836 #67 | 1places down | |
| 5 |  vidIQ | 18,706 | 47,424 #33 | 3places up |
| # | Connector | Trending | Popularity | 7d |
|---|---|---|---|---|
| 33 | vidIQ | 47,424 | 18,706 #5 | 15places up |
| 34 | 46,500 | 6,781 #239 | 149places down | |
| 35 | 46,343 | 22,222 #1 | 32places down | |
| 36 | 44,405 | 5,426 #309 | — | |
| 37 | 43,923 | 6,044 #279 | 1,825places up |
Also on other marketplaces
Screenshots
Example prompts
- “Can you visualize the proposed data flow in part 2?”
- “Visualize how these React components would be structured”
Install
claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp
Tools
- generate_diagram
- get_design_context
- get_screenshot
- get_metadata
- create_design_system_rules
- get_variable_defs
- get_code_connect_map
- get_figjam
- whoami
- Categories
- Sign-in
- Required
- Connector URL
- https://mcp.figma.com/mcp
- Transport
- Streamable HTTP
- Permissions
- Read
- Works with
- Claude, Claude API, Claude Code
- Acts on
- Designs & media, Code
- Department
- Design
- Added
- November 12, 2025
- More info
- Sponsorship
- Promote this connector