Figma MCP Server
The official Figma Dev Mode MCP server exposes design context — layout, variables, styles, components, and Code Connect mappings — directly to AI agents so they can generate code that matches your designs. It can extract selection metadata, screenshots, and motion data, and generate new Figma files and diagrams.
Install Figma
- Published by
- Official (vendor)
- Transport
- Remote (HTTP)
- Authentication
- OAuth
Claude Desktop, Claude Code and Cursor
Add this to the mcpServers object in your client's
config file, then restart the client.
{
"mcpServers": {
"figma": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}VS Code uses a different key — show that config
Identical entry, filed under servers rather than
mcpServers. Put it in
.vscode/mcp.json for one workspace.
{
"servers": {
"figma": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}Before it will answer
Figma documents both a remote server and a desktop one that runs inside the Figma desktop app; the remote endpoint below is the one Figma recommends. The desktop server needs the app open on the file you are asking about.
Tools
add_code_connect_map
Add a mapping between a Figma node and a code component.
create_new_file
Create a blank Figma Design, FigJam, or Slides file in drafts.
download_assets
Download rendered exports and original source images from a file.
generate_diagram
Turn Mermaid or natural language into an interactive FigJam diagram.
generate_figma_design
Send live UI as design layers into a Figma file or clipboard.
get_code_connect_map
Map selected Figma node IDs to their Code Connect components.
get_code_connect_suggestions
Suggest mappings of Figma components to code components.
get_design_context
Get design context for a layer or selection in a chosen framework.
get_figjam
Convert a FigJam diagram, such as a workflow, into XML.
get_libraries
Return the subscribed and available design libraries for a file.
get_metadata
Return a sparse XML representation of the selection's properties.
get_motion_context
Return keyframe animation data so agents can recreate motion.
get_screenshot
Capture a visual screenshot of the selection for layout fidelity.
get_variable_defs
Return the variables and styles used in the current selection.
search_design_system
Search connected libraries for components, variables, and styles.