Figma MCP

Reviewed 2026-10-07codingMCP Server# figma # mcp # design-to-code # code-connect # ui

Figma's official MCP server: gives AI coding agents design context from Figma frames, variables and Code Connect; remote server can also write to the canvas.

Security Reviewed

Official hosted server with Figma OAuth; the guide repo has no server code but bundles skills with scripts, and the remote tools can write to your Figma files.

Install Figma MCP in Google Antigravity

Antigravity reads MCP servers from ~/.gemini/config/mcp_config.json (all projects) or .agents/mcp_config.json (one project) (official docs).

EasiestOption 1: paste this to your Antigravity agent

Install the "Figma MCP" MCP server for Google Antigravity.
Follow the steps at https://www.antigravityskills.org/install/figma-mcp.md (source: https://github.com/figma/mcp-server-guide).
Before running anything, show me what you will download and whether it includes scripts, and wait for my OK.
Ask me for any keys or paths it needs. When done, check that it is listed under Installed MCP Servers.

The agent reads the install file, shows you what it will download and waits for your OK.

Option 2: install it yourself

1. Open the Antigravity MCP config
Global: ~/.gemini/config/mcp_config.json. This project only: .agents/mcp_config.json. In Antigravity 2.0 you can also go to Settings → Customizations → Add MCP and search the MCP Store first.
2. Add this server under "mcpServers"
```
{
  "mcpServers": {
    "figma-desktop": {
      "serverUrl": "http://127.0.0.1:3845/mcp"
    }
  }
}
```
This is the configuration the server's own README documents; Antigravity uses the same "mcpServers" format. Replace placeholder paths and keys with your own.
3. Check that it loaded
Open Settings → Customizations → Installed MCP Servers; the server should be listed and switched on.

MCP servers are not skills: they do not go in .agents/skills/. Antigravity reads them from mcp_config.json.

Using Claude Code, Cursor or Codex? See other assistants below.

What is Figma MCP?

The Figma MCP server is Figma's official Model Context Protocol server. It lets an AI agent read design context from Figma (frames, variables, components, layout, screenshots) to generate code, and, on the remote server, write native content back to the canvas. The repo figma/mcp-server-guide is Figma's setup guide plus bundled agent skills; the server itself is hosted by Figma at https://mcp.figma.com/mcp.

How to use Figma MCP?

Connect your client to the server and sign in with Figma's OAuth flow. Then copy a link to a frame or layer in Figma and ask the agent to implement it; the README says the client extracts the node-id from the link. Name your framework and target files in the prompt for better results.

Key features of Figma MCP

✓Remote server at https://mcp.figma.com/mcp (Streamable HTTP, OAuth sign-in); the README also describes a desktop server run through the Figma desktop app
✓Reads: get_design_context (React + Tailwind representation of a selection), get_variable_defs, get_metadata, get_screenshot and more
✓Writes to Figma files (remote only): e.g. use_figma, generate_figma_design, create_new_file, generate_diagram
✓Code Connect tools to map Figma components to your codebase components
✓Make resources: fetch files from a Figma Make project (clients that support MCP resources)
✓Repo ships 14 Figma agent skills plus two standalone workflow skills

When to use Figma MCP

1Turning a selected Figma frame into code in your own framework
2Pulling design tokens (variables and styles) into a codebase
3Reusing real components through Code Connect instead of letting the model guess
4Creating or updating Figma content from an agent (remote server, beta)

Installation & Setup Guide

MCP Server Integration

Follow these steps (taken from the project's own docs) to configure Figma MCP in your development environment.

Step 1: Claude Code plugin (README)claude

claude plugin install figma@claude-plugins-official

Recommended by the README; includes MCP settings and Figma skills.

Step 2: Claude Code manual (README)claude

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

Then start a new session, run /mcp, choose figma and Authenticate (developer docs).

Step 3: Cursor plugin (README)cursor

/add-plugin figma

Type it in Cursor's agent chat. Manual config in Cursor: {"mcpServers":{"figma":{"url":"https://mcp.figma.com/mcp"}}}.

Step 4: Codex CLI (developer docs)codex

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

Authenticate when prompted.

Step 5: Antigravity: desktop server (translation of Figma docs, not documented by Figma)antigravity

In the Figma desktop app open a Design file, switch to Dev Mode (Shift+D) and click "Enable desktop MCP server" in the inspect panel. Then add mcpConfig (serverUrl http://127.0.0.1:3845/mcp) to ~/.gemini/config/mcp_config.json or .agents/mcp_config.json. Read-only per Figma's catalog.

Usage Example & Verification

Prompt / Request Example

README example: "Add this to src/components/marketing/PricingCard.tsx" (after pasting a Figma frame link); other README examples: "Generate iOS SwiftUI code from this frame", "Use Chakra UI for this layout".

Security Review

Static review

Reviewed Date

2026-10-07

Audited Ref / Commit

2b85b7d27bd6ee124667fcfe88856f6b1f81671a

Reviewer

antigravityskills.org (static code review)

Official hosted server with Figma OAuth; the guide repo has no server code but bundles skills with scripts, and the remote tools can write to your Figma files.

Full review: scope, findings, risks

Audit Scope:Cloned figma/mcp-server-guide at commit 2b85b7d27bd6ee124667fcfe88856f6b1f81671a (2026-10-14). Read README.md, server.json, gemini-extension.json, plugin manifests, figma-power/mcp.json, skills-figquery/README.md, and grepped the skills for commands and network calls. Read Figma developer docs pages (overview, tools and prompts, remote and local server installation, rate limits and access), the Figma MCP catalog and a Figma forum thread. The hosted server itself is not in the repo and was not reviewed.

Key Findings:The repo contains documentation, JSON manifests pointing at https://mcp.figma.com/mcp, 14 skill folders (in skills/ and a variant tree skills-figquery/), 2 workflow skills and 189 markdown files. Executable files: 16 .js, 5 .py and 2 .ts, inside skill folders (figma-generate-library/scripts, video-interaction-mapper/scripts). Skill docs mention npm install --global @figma/code-connect@latest and npx figma connect publish with an access token. Remote server auth is Figma OAuth.

Identified Operational Risks & Permissions:The server can write to Figma files (remote); design data is sent to your AI client; rate limits and pricing may change; the bundled skills run scripts and Code Connect CLI commands if the agent follows them; we did not review the hosted server.

We cloned figma/mcp-server-guide at commit 2b85b7d27bd6ee124667fcfe88856f6b1f81671a. The repo is a guide: server.json declares one remote, type streamable-http, URL https://mcp.figma.com/mcp (name com.figma.mcp/mcp, version 2.2.155), and gemini-extension.json and figma-power/mcp.json point at the same URL. Authentication is Figma OAuth (developer docs, remote-server-installation). There is no server code in the repo, so the hosted server was not reviewed. The skills in skills/ include scripts (figma-generate-library/scripts/*.js, workflow-skills/video-interaction-mapper/scripts/*.py) and skills/figma-code-connect/references/api.md tells the agent to run npx figma connect publish with an access token. According to the developer docs tools list, write tools such as use_figma, generate_figma_design and create_new_file change Figma files, and generate_image uses Figma AI credits. The repo has no LICENSE file; the README says use is governed by the Figma Developer Terms.

Operational Notes & Known Limitations

Known Limitations

•Needs a Figma account; developer docs say only clients listed in the Figma MCP Catalog can connect to the remote server
•Rate limits (developer docs): View/Collab seats 20 tool calls per month; Dev/Full seats on Professional 200 per day and 10 per minute; Organization 200/day and 15/minute; Enterprise 600/day and 20/minute. The repo README still says 6 calls per month for those seats, so the two pages disagree.
•Google Antigravity is listed in the Figma MCP catalog as local (desktop) server only with read-only access; a Figma forum reply says the remote URL is not part of Antigravity's current support and use_figma write-back is a current product limitation
•Desktop server needs the Figma desktop app with Dev Mode and "Enable desktop MCP server" turned on
•Write-to-canvas is free during beta but "will eventually be a usage-based paid feature"; generate_image uses Figma AI credits (README, developer docs)

Frequently Asked Questions

Is the Figma MCP server safe?

It is Figma's own hosted service, signed in with Figma OAuth, so your design data goes to your agent through Figma. We reviewed only the guide repo statically: it has no server code. It does bundle skills with scripts (for example 8 JavaScript files in figma-generate-library/scripts and 2 Python files in video-interaction-mapper), and the MCP tools can write to your Figma files, so approve write actions deliberately.

How do I install the Figma MCP server in Antigravity?

Figma's repo and developer docs do not give Antigravity steps. Figma's MCP catalog lists Google Antigravity as local server only, read-only. The translation is the desktop-server URL in an mcp_config.json "serverUrl" entry, see the config on this page.

Do I need a paid Figma plan?

The docs do not require a paid plan, but limits depend on plan and seat: View/Collab seats get 20 tool calls per month, Dev and Full seats on paid plans get daily limits (developer docs, rate limits page). The repo README states 6 per month instead.

Remote or desktop server?

The developer docs recommend the remote server (no desktop app, broadest feature set, https://mcp.figma.com/mcp). The desktop server runs at http://127.0.0.1:3845/mcp through the Figma desktop app and is aimed at specific organization needs.

Does Figma MCP work as an Antigravity skill?

No, it is an MCP server (skillType mcp), not a SKILL.md folder. The repo also ships separate Figma skills, but the server is what connects your agent to Figma.

Supported Platforms

claudecursorcodexantigravity

MCP Server Configuration

claude_desktop_config.json / mcp.json

Add the following block to your MCP client configuration file (Claude Desktop, Cursor, or Antigravity):

{
  "mcpServers": {
    "figma-desktop": {
      "serverUrl": "http://127.0.0.1:3845/mcp"
    }
  }
}

View Source on GitHub

Keep exploring this topic

Browse the full Antigravity skills directory for more source-linked skills with install steps and static safety reviews.

More coding skills #figma #mcp #design-to-code #code-connect Use cases

Related Skills

💻

Figma Implement Design

@openai

Figma's implement-design skill for Codex: turns Figma frames into production code with 1:1 visual fidelity through the Figma MCP server.

Static reviewacts in your accountsnetwork access

figmadesign-to-code

💻

Superdesign

@superdesigndev

Superdesign agent skill: lets a coding agent create UI, slide and graphic drafts on the superdesign.dev canvas through the @superdesign/cli command line tool.

Static reviewneeds API keynetwork accesswrites files

uidesign

💻

DeepWiki

Cognition (Devin)

DeepWiki MCP server from Cognition (Devin): a free hosted endpoint with three tools to read and ask questions about public GitHub repositories' generated documentation. No install, no API key.

Static reviewnetwork access

mcpgithub