# Figma

> Lets your agent turn Figma designs into code, pull variables and components, and create or edit designs and FigJam boards in Figma.

Figma's own MCP server brings your Figma files into your agent. Paste a link to a frame or layer and your agent gets its design context (layout, variables, components and a screenshot), so it can build the design in your codebase. With the remote server, your agent can also write back to Figma: create and edit frames, components, variables and auto layout using your design system, make FigJam diagrams, and turn the live UI of your web app into editable design layers.

What you can do with it
- Generate code from a frame, in React and Tailwind by default or in the framework you ask for
- Pull the variables and styles a design uses, such as colours, spacing and typography
- Reuse your real components through Code Connect mappings
- Download the images and icons in a design
- Create and edit designs, components, variants, variables and styles in Figma Design, FigJam and Figma Slides
- Search your design libraries for components, variables and styles to reuse
- Generate FigJam diagrams, such as flowcharts, Gantt charts and sequence diagrams, from a description or Mermaid
- Send the live UI of your web app or site to Figma as design layers (in select agents)
- Bring in context from FigJam boards, Figma Make files and Figma Specs

How it connects
Figma hosts the remote server at https://mcp.figma.com/mcp, and you sign in with your Figma account the first time you connect. Where your agent has one, Figma recommends its plugin: it adds the server along with Figma's skills for common workflows, such as implementing designs, connecting components with Code Connect and writing to the canvas. In Claude Code, run claude plugin install figma@claude-plugins-official; in Cursor, /add-plugin figma; Gemini CLI installs it as an extension with gemini extensions install https://github.com/figma/mcp-server-guide. Figma also offers a desktop server that runs through the Figma desktop app, meant for specific organization and enterprise needs; it needs a Dev or Full seat on a paid plan and has fewer tools.

Good to know
- It only reaches files your Figma account can already open.
- Tools that read from Figma are rate-limited by plan and seat. View and Collab seats and the Starter plan get a small monthly allowance; Full and Dev seats on paid plans get daily and per-minute limits.
- Writing to the canvas needs the remote server, and a Full seat to write outside your drafts. It's free during the beta and will become a usage-based paid feature.
- Generating images uses Figma AI credits, and your agent asks before it does.

- Type: Plugin
- Made by: Figma
- Category: Design
- Formats: Remote MCP, Claude plugins, Extensions
- Version: latest
- Website: https://github.com/figma/mcp-server-guide
- Source: https://github.com/figma/mcp-server-guide
- Page: https://pluginboard.ai/plugins/figma-mcp-server

## Works with

- ChatGPT
- Claude
- Muse
- Grok Bot
- Gemini
- Grok
- GitHub Copilot
- Cursor
- Claude Code
- Codex
- Antigravity
- Gemini CLI
- Replit
- OpenClaw
- OpenCode
- Hermes Agent

## Install

### ChatGPT

In ChatGPT on the web: Plugins → + → Add custom MCP server, then paste https://mcp.figma.com/mcp under Connection. Business and Enterprise plans; Pro can add read-only servers.

### Claude

In Claude (web or desktop): Customize → Plugins → Add → Add marketplace, enter anthropics/knowledge-work-plugins, then add figma

### Muse

In Muse: In a Muse chat, ask it to create a custom connector for the MCP server at https://mcp.figma.com/mcp. Then tap Connect on the card it shows and sign in, or add your key.

### Grok Bot

In Grok Bot: In a chat with your Bot, say "Add this MCP server: https://mcp.figma.com/mcp". It confirms the details with you and sets it up, and the tools are ready from your next message.

### Gemini

In Gemini: At gemini.google.com: Settings → Connected Apps → Add a custom app, then paste https://mcp.figma.com/mcp

### Grok

In Grok on the web: At grok.com/connectors: New Connector → Custom, then enter https://mcp.figma.com/mcp and sign in if it asks.

### GitHub Copilot

Add to VS Code: vscode:mcp/install?%7B%22name%22%3A%22figma%22%2C%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2Fmcp.figma.com%2Fmcp%22%7D

Copilot CLI:

```shell
copilot mcp add --transport http figma https://mcp.figma.com/mcp
```

### Cursor

Add to Cursor: cursor://anysphere.cursor-deeplink/mcp/install?name=figma&config=eyJ1cmwiOiJodHRwczovL21jcC5maWdtYS5jb20vbWNwIn0%3D

Add to .cursor/mcp.json:

```json
{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}
```

### Claude Code

In Claude Code:

```text
/plugin marketplace add anthropics/knowledge-work-plugins
/plugin install figma@knowledge-work-plugins
```

### Codex

Run in your terminal:

```shell
codex mcp add figma --url https://mcp.figma.com/mcp
```

### Antigravity

Add to ~/.gemini/config/mcp_config.json:

```json
{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}
```

### Gemini CLI

Run in your terminal:

```shell
gemini extensions install https://github.com/figma/mcp-server-guide
```

### Replit

In Replit: At replit.com/integrations, open MCP Servers → + Add MCP server, paste https://mcp.figma.com/mcp (add any headers under Advanced settings), then click Test & save.

### OpenClaw

Run in your terminal:

```shell
openclaw mcp add figma --url https://mcp.figma.com/mcp --transport streamable-http
```

If it needs a key or sign-in: For https://mcp.figma.com/mcp, add --header NAME=value for each header it needs, or --auth oauth and then run openclaw mcp login figma.

### OpenCode

Run in your terminal:

```shell
opencode mcp add figma --url https://mcp.figma.com/mcp
```

If it needs a key: For https://mcp.figma.com/mcp, add --header 'NAME=value' for each header it needs. Add --global to use it in every project.

### Hermes Agent

Run in your terminal:

```shell
hermes mcp add figma --url https://mcp.figma.com/mcp
```

Add to ~/.hermes/config.yaml:

```json
{
  "mcp_servers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}
```

If it signs in with OAuth: If https://mcp.figma.com/mcp asks you to sign in, add --auth oauth to the command, or auth: oauth to its entry.

---
From Pluginboard (https://pluginboard.ai).