AI Marketplaces Leaderboard

Figma

Claude connectorPartner — verifiedFeatured by the directory

Generate diagrams and better code from Figma context

View in Claude directory
Tools
9

exposed by this connector

Movement

From our daily snapshots over the last 30 days.

Rank by popularity

#7of 5,183024h07d
#7Sep 13Sep 19Sep 25Oct 1Oct 7Oct 12

Rank by trending score

#274of 2,4548places down24h75places down7d
#147#211#275#339Sep 13Sep 19Sep 25Oct 1Oct 7Oct 12

Popularity score

22,005024h+867d
21,78521,84521,90521,96522,025Sep 13Sep 19Sep 25Oct 1Oct 7Oct 12

Trending score

57,331+17024h+2,5587d
36,95442,51248,07053,628Sep 13Sep 19Sep 25Oct 1Oct 7Oct 12

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 386 by popularity · 32nd of 201 by trending score
Order by

All 388 Creative connectors

Also on other marketplaces

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

Screenshots

  • Figma screenshot
  • Figma screenshot

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
Made by
Figma · Website
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