# How to set up the Figma MCP server

> **Governing MCP across your organization?**
> Speakeasy's [AI control plane](/product/ai-control-plane) connects, secures, and observes every agent and MCP server from one entry point — with SSO, RBAC, runtime guardrails, and a full audit trail.

Figma has an official MCP server, hosted by Figma at `https://mcp.figma.com/mcp`. It lets an AI agent read the frames and layers in your Figma files and turn them into code, and it can also create files, capture web pages as designs, and generate FigJam diagrams.

This guide shows you how to connect the Figma MCP server to Claude Code and Codex. You'll add the server to your agent, sign in to Figma to approve access, and try it with a prompt that builds code from a Figma frame and one that creates a FigJam diagram.

## Prerequisites

To follow along, you'll need:

- A Figma account. The Figma MCP server works on every plan, including the free Starter plan, but on Starter you get 20 tool calls a month. See [Figma MCP rate limits](#figma-mcp-rate-limits).
- [Claude Code](https://code.claude.com/docs) or [Codex CLI](https://developers.openai.com/codex) installed

## Copy a link to a Figma frame

The Figma MCP server uses links to know which design to work with. To point your agent at a frame or layer, open your file in Figma, right-click the frame in the **Layers** panel or on the canvas, and select **Copy/Paste as** → **Copy link to selection**.

![The Figma layer context menu with Copy/Paste as and Copy link to selection highlighted](/assets/mcp/using-mcp/figma-mcp/copy-link-to-selection.png)

You'll paste this link into your prompt later. It includes a `node-id` parameter that tells the server which layer to read.

## Connect your agent to the Figma MCP server

Follow the instructions for the agent you use: [Claude Code](#claude-code) or [Codex](#codex). For any other agent, see [Connect other MCP clients](#connect-other-mcp-clients).

Both agents sign in to Figma with OAuth, so you don't need to create or copy a token. Your agent gets the same access to files that you have in Figma.

### Claude Code

Add the Figma MCP server to Claude Code:

```bash
claude mcp add --transport http --scope user figma https://mcp.figma.com/mcp
```

The `--scope user` option makes the server available in all your projects.

Then sign in to Figma:

```bash
claude mcp login figma
```

Claude Code opens Figma's consent page in your browser. Click **Agree & Allow Access**.

![Figma's consent page asking to let Figma MCP in Claude Code access your account, with the Agree & Allow Access button highlighted](/assets/mcp/using-mcp/figma-mcp/figma-consent-screen.png)

The terminal confirms the sign-in:

```text
Authenticated with "figma". Its tools are now available in Claude Code.
```

Check that the server connects:

```bash
claude mcp list
```

The `figma` server shows as **Connected**:

```text
figma: https://mcp.figma.com/mcp (HTTP) - ✔ Connected
```

Figma also offers a Claude Code plugin that adds the same server along with Figma's skills. To use it instead, run `claude plugin install figma@claude-plugins-official`.

Start Claude Code with `claude` in your project folder and ask it to build the frame you copied, for example:

```text
Build this Figma frame as a React component with Tailwind in SignUpCard.tsx: https://www.figma.com/design/G1hHoxrPK15VZ3Btl2w9iF/Northwind-sign-up?node-id=1-2
```

Replace the link with the one you copied.

If Claude Code asks for permission to use a Figma tool or write the file, select **Yes**.

Claude Code reads the frame's design context from Figma, writes the component, and summarizes what it built.

![Claude Code calling the Figma MCP server twice, writing SignUpCard.tsx, and summarizing the component's layout, form behavior, and differences from the Figma output](/assets/mcp/using-mcp/figma-mcp/claude-code-answer.png)

### Codex

Add the Figma MCP server to Codex:

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

Codex detects that the server uses OAuth and starts the sign-in straight away:

```text
Added global MCP server 'figma'.
Detected OAuth support. Starting OAuth flow…
```

Your browser opens Figma's consent page for **Figma MCP in Codex**. Click **Agree & Allow Access**. The terminal then shows `Successfully logged in.`

Check the server's configuration:

```bash
codex mcp list
```

The `figma` row shows OAuth as its authentication method:

```text
Name   Url                        Bearer Token Env Var  Status   Auth
figma  https://mcp.figma.com/mcp  -                     enabled  OAuth
```

Start Codex with `codex` and enter `/mcp`. The `figma` server shows as `connected (45 tools)`.

Ask Codex to create something in Figma, for example:

```text
Create a FigJam flowchart of the Northwind sign-up flow: sign-up form, verify email, create workspace, invite teammates, dashboard
```

If Codex asks for permission to run a Figma tool, select **Allow**.

Codex loads Figma's diagram skill, generates the flowchart, and returns a link to the new FigJam file.

![Codex calling figma.whoami and figma.generate_diagram and returning a link to the Northwind sign-up flowchart in FigJam](/assets/mcp/using-mcp/figma-mcp/codex-answer.png)

The flowchart opens in FigJam as an editable diagram.

![The Northwind sign-up flow in FigJam: Sign-up form, Verify email, Create workspace, Invite teammates, and Dashboard connected by arrows](/assets/mcp/using-mcp/figma-mcp/codex-diagram-in-figjam.png)

## Figma MCP rate limits

Figma limits how many tool calls you can make, based on your plan and seat:

| Seat | Starter | Professional | Organization | Enterprise |
|---|---|---|---|---|
| View, Collab | 20 per month | 20 per month | 20 per month | 20 per month |
| Full, Dev | Not available | 200 per day, 10 per minute | 200 per day, 15 per minute | 600 per day, 20 per minute |

The limits apply to tools that read data from Figma, such as the design context Claude Code fetched above. Tools that write to Figma files are exempt, including `create_new_file`, `generate_figma_design`, `add_code_connect_map`, and `whoami`. For the latest numbers, see Figma's [rate limits and access](https://developers.figma.com/docs/figma-mcp-server/rate-limits-access/) page.

The Claude Code prompt in this guide used two of those calls, so on a free Starter account, plan your prompts. Writing to the canvas with the `use_figma` tool needs a Professional, Education, Organization, or Enterprise plan.

## Connect other MCP clients

Figma only accepts clients listed in its [MCP catalog](https://www.figma.com/mcp-catalog/), such as VS Code, Cursor, Claude Code, and Codex. If your client is in the catalog, add a remote server with these values:

| Setting | Value |
|---|---|
| Server URL | `https://mcp.figma.com/mcp` |
| Transport | Streamable HTTP |
| Authentication | OAuth. The client opens Figma's consent page. |

## Troubleshooting

### Claude Code shows `Needs authentication`

If `claude mcp list` shows this line, Claude Code has the server but isn't signed in to Figma:

```text
figma: https://mcp.figma.com/mcp (HTTP) - ! Needs authentication
```

`claude mcp add` saves the server without signing in, so you see this until you complete the sign-in. Run the login command and approve access in your browser:

```bash
claude mcp login figma
```

If the consent page opens in a browser where you aren't signed in to Figma, run `claude mcp login figma --no-browser` instead. Claude Code prints the sign-in URL, and you can open it in the browser you use for Figma.

## Next steps

You now have the Figma MCP server connected to your agent. You added the server to Claude Code or Codex, approved access in Figma, and tried a prompt that turns a Figma frame into code and one that creates a FigJam diagram. Your agent can read your designs, generate code from them, and create new files and diagrams in Figma.

To keep going:

- Connect more services to your agent with the other guides in [Connect popular MCP servers](/mcp/using-mcp/mcp-server-providers).
- Learn how to get better results from your agent's tools in [Best practices for using MCP tools](/mcp/using-mcp/using-tools).
- See what teams build with MCP in [MCP use cases](/mcp/using-mcp/use-cases).

---

Index of every Speakeasy page for agents: [llms.txt](https://www.speakeasy.com/llms.txt). AI control plane and MCP gateway content in one file: [llms-full.txt](https://www.speakeasy.com/llms-full.txt). Any page is available as markdown by appending `.md` to its URL or by requesting it with `Accept: text/markdown`.