How to Connect Claude Code to Figma with MCP

Connecting Claude Code to Figma lets Claude read design context from a frame and turn it into code, and write back to the canvas: new files, diagrams and design layers built from live UI. Figma's remote server needs no desktop app, and Claude Code is on Figma's list of approved clients.

Checked against: Figma's remote server setup guide and Claude Code's MCP documentation on 28 October 2026. eSEOspace did not run these steps; menus can change, so follow the vendor's page if it differs.

Before you start

You need Claude Code installed and a Figma account. You can only use the MCP server with Figma files you already have access to.

Check your seat. Figma's rate limits page says:

Figma says limits apply to tools that read data, and some write tools are exempt. Figma may change these limits at any time.

Steps

Option A: Figma plugin (recommended)

Figma says the plugin includes the MCP server settings and Figma's skills for common workflows.

1. In your terminal, run:

claude plugin install figma@claude-plugins-official

1. If Claude Code is running, restart it.
2. In Claude Code, type /plugin and press Enter to open the plugin manager.
3. Press the right arrow key to go to the Installed tab.
4. Select the figma server and press Enter.
5. Press Enter again to start signing in. A browser page opens.
6. Click Allow access.
7. Type /plugin again. On the Installed tab, the figma server shows as connected.

Figma notes that if the install command fails, your organization may have blocked plugin installation. See Claude Code plugins and marketplaces.

Option B: Add the server by hand

This doesn't install Figma's skills.

1. In your terminal, run:

claude mcp add --transport http figma https://mcp.figma.com/mcp

To make it available in all your projects, Figma gives:

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

1. Start a new Claude Code session.
2. Type /mcp and select figma.
3. Select Authenticate. A browser page opens.
4. Click Allow access.
5. Back in Claude Code, you should see "Authentication successful. Connected to figma."

Check that it works

Figma says to type /mcp again to confirm the connection. To point Claude at a design, right-click a frame or layer in Figma, choose Copy link to selection and paste the link into your prompt.

Example prompts (from Figma's setup guide):

• "/figma-use can you help me create a new Figma design using my design system components? Place it in a new Figma file." (needs the plugin's skills)
• "Capture the UI of my app homepage as frames in <Figma file URL>."
• "Create a flowchart for the user authentication flow using the Figma MCP generate_diagram tool."

For a read-only start, paste a frame link and ask Claude to "get the design context for this frame and list the variables it uses." That uses get_design_context and get_variable_defs.

Permissions and safety

Figma's tools page splits tools into read and write. Write tools include create_new_file, generate_diagram, generate_figma_design, upload_assets and use_figma. Many are remote-only.

• File access. Figma says you can only use files you already have access to. Ask Claude to run whoami to see which account, plans and seats you're using.
• AI credits. Most tools don't use Figma AI credits. Figma says generate_image and send_prompt do, and Figma Weave tools use Weave credits.
• Approvals. Keep write tools on ask in Claude Code. Claude Code's permission rules let you allow read tools by name while writes still prompt. Plugin-provided servers use a longer rule prefix, described in those docs.
• Enterprise sign-in. Figma supports enterprise-managed authorization for Claude through Okta Cross App Access.

More guidance is in the MCP Security Center and MCP supply chain risks.

If it doesn't work

Figma's docs cover these cases:

• Plugin install fails. Your organization may block plugins. Contact your Claude administrator or add the server by hand.
• Permission errors on a file. Check the link is a Figma Design, FigJam or Figma Make file. Run whoami to check the account. Make sure that account belongs to the plan that owns the file.
• Rate limited. Upgrade the seat or plan. For example, a View or Collab seat is capped at 20 calls per month.
• Tools not loading or slow. Figma has separate troubleshooting pages for both in its MCP docs.

Next step

Read the Figma MCP server profile for the full tool list and the desktop server. More setups are in the connection guides hub, including Claude with Figma and Cursor with Figma.

Frequently asked questions