Figma MCP Catalog: Connect Claude Code, Codex, Cursor, Devin

The Figma MCP catalog (https://www.figma.com/mcp-catalog/) is Figma's official catalog page, the entry point for connecting the Figma MCP server to major AI coding tools (MCP clients). Its stated concept is to "add design-to-code context everywhere," and it lists 19 clients: Claude Code, Claude, Cursor, VS Code, Codex (OpenAI), Windsurf, Kiro (Amazon), Replit, Warp, Firebender, Factory, Augment, Google Gemini CLI, Atlassian Studio, Android Studio, Amazon Q, OpenHands, Zed, and ServiceNow build agents. Each client's page shows support status for Figma Design, Figma Make, and FigJam, as well as whether it connects to the remote or local (desktop) server.

At its Config 2026 conference on June 24, 2026, Figma announced a set of MCP-related enhancements, including MCP connections for design agents and export features for Motion (animation). Canvas write access via the Figma MCP server itself traces back to a February 2026 partnership with Claude Code — initially exclusive to Claude Code before Cursor and Windsurf later joined with beta support. The underlying problem is that context tends to get lost between design files and code implementation, and the push to route a design's structural information straight into AI coding tools via MCP is an attempt to close that gap.

The Figma MCP server comes in two forms: a remote server reached over HTTP with OAuth authentication (https://mcp.figma.com/mcp), and a desktop (local) server provided by the Figma desktop app (http://127.0.0.1:3845/mcp). Its main capabilities are as follows.

- Generating code from a selected frame
- Extracting design context (variables, components, layout data)
- Writing to the Figma Design/FigJam canvas (creating and updating frames, components, variables, and auto layout — remote-only, beta, currently free, with usage-based pricing planned for the future)
- Reusing real components through Code Connect integration
- Fetching resources from FigJam/Make files
- Skills (agent-facing guides that package recommended sequences of MCP tool calls)

The recommended approach is installing the official plugin.

To set it up manually, add the remote server with the following command.

Add --scope user if you want the setting shared across all projects. To connect to the local server provided by the Figma desktop app, add it under a separate name like this.

After setup, run the /mcp command, choose Authenticate to complete OAuth, and confirm the connection. For a deeper look at how to configure MCP more broadly, see Claude Code's MCP integration guide.

The recommended approach is adding the figma plugin in the Codex app's Plugins section and granting OAuth permission. To add it manually from the CLI, use the following command.

The recommended approach is running the following command in agent chat.

To set it up manually, open Cursor's MCP settings from the deep link listed in the Figma catalog, install it, and complete OAuth authentication.

Devin isn't listed in Figma's official MCP catalog, but Figma's official remote server is available in Devin's own MCP Marketplace. To set it up, go to Settings > Connections > MCP servers, find Figma in the marketplace, select "Enable," and complete OAuth authentication in the browser. When using it, you must always pass Devin the URL of the Figma file — the design assumes link sharing as a prerequisite. Administrators can also add any STDIO, SSE, or HTTP MCP server through "Add a custom MCP."

In contract development and small teams, bridging the gap between a design comp and its implementation tends to eat up hours. Because the Figma MCP server can pass a design's variables, components, and layout information directly to an AI coding tool, it can help streamline generating implementation code from a selected frame or reusing components while keeping them consistent with an existing design system. Code Connect integration in particular lets you link a component in Figma to its real code counterpart, which makes it easier to keep design and code from drifting apart. Figma has also been expanding its surrounding ecosystem, including bringing Payload CMS under its umbrella — a move covered in our explainer on Payload CMS, now part of Figma.

The Figma MCP catalog is the official entry point for connecting the Figma MCP server to 19 different AI coding tools, letting you see each client's setup steps and support scope at a glance. The remote server works on every plan and seat and is the option Figma itself recommends. Some features, like the desktop server and canvas write access, come with plan and client restrictions. Since setup methods, commands, and authentication flows differ across clients like Claude Code, Codex, Cursor, and Devin, it's worth checking each tool's official documentation for the latest steps.