Cursor with Figma and GitHub MCP Servers: Setup Guide
Related guide: Cursor analytics for teams
With Figma’s and GitHub’s MCP (Model Context Protocol) servers, Cursor’s agent can read a Figma frame and open a pull request on GitHub without you copying anything between tabs. This guide sets up both, as the vendors document them on October 3, 2026.
Figma’s official server hands the agent the frame’s layout, variables and a screenshot, and GitHub’s official server lets it work with branches, issues and pull requests. Cursor is an AI code editor with its own agent, not an extension you add to another IDE (Cursor docs). Everything below happens in Cursor’s agent chat and one config file.

What you need
- Cursor, with the agent chat open.
- A Figma account. Figma’s remote MCP server works on every seat and plan, but the free Starter plan allows only 20 tool calls a month. Dev and Full seats on paid plans get 200 calls a day on Professional and Organization and 600 on Enterprise (Figma rate limits).
- A GitHub personal access token. GitHub’s install guide for Cursor says its remote server needs a token there, and Cursor 0.48.0 or later (GitHub).
Step 1: Add Figma’s MCP server
The quickest route is Figma’s own plugin in the Cursor Marketplace. Type /add-plugin figma in the agent chat: it installs the MCP server at https://mcp.figma.com/mcp plus Figma’s skills for design-to-code work (Figma, Cursor Marketplace). Then click Connect next to the server and sign in to Figma.
To set it up by hand instead, add the server to .cursor/mcp.json in your project (or ~/.cursor/mcp.json for every project; the project file wins when both name the same server) (Cursor MCP docs).
The desktop server. If you have a Dev or Full seat on a paid plan, the Figma desktop app can run the server locally. Open a design file, switch to Dev Mode (Shift+D) and click Enable desktop MCP server in the inspect panel. It listens on http://127.0.0.1:3845/mcp (Figma). There is no certificate or allowlist to set up. The one practical difference: with the desktop server you can point the agent at your current selection in Figma, while the remote server needs a link to a frame or layer (Figma tools and prompts).
Step 2: Add GitHub’s MCP server
GitHub hosts its official server at https://api.githubcopilot.com/mcp/. Pass your token in an Authorization header. Don’t paste the token into a project file you commit: Cursor expands ${env:NAME} in mcp.json, so the token can stay in your shell environment (Cursor MCP docs).
Both servers in one .cursor/mcp.json:
{
"mcpServers": {
"figma": {
"url": "https://mcp.figma.com/mcp"
},
"github": {
"url": "https://api.githubcopilot.com/mcp/",
"headers": {
"Authorization": "Bearer ${env:GITHUB_PAT}"
}
}
}
}
For the Figma desktop server, swap the figma entry for "figma-desktop": { "url": "http://127.0.0.1:3845/mcp" }.
Two GitHub options worth knowing (GitHub):
https://api.githubcopilot.com/mcp/readonlyexposes only read tools, a sensible default while you try it out.- The default toolsets are context, repos, issues, pull requests and users. You can run the same server locally in Docker (
ghcr.io/github/github-mcp-server) if your company doesn’t allow the hosted one.
Step 3: Check the tools, then try a prompt
Save the file and open Cursor’s MCP settings: each server should be connected and list its tools. The agent uses MCP tools when a request needs them; Cursor’s tool-approval settings decide which ones run without asking you first (Cursor help).
Figma’s main tools are get_design_context (code for the selected frame, React and Tailwind by default), get_variable_defs (the colors, spacing and type variables it uses), get_screenshot and get_metadata (Figma). A prompt that uses both servers:
Implement this Figma frame as a React component in src/components/PricingCard.tsx:
<link to the frame>
Reuse our existing Button and the design tokens in src/styles/tokens.css
instead of hard-coded values. Check it against the frame's screenshot.
Then open a draft pull request for it on a new branch.
Name your own components and tokens in the prompt: get_design_context returns React and Tailwind by default, whatever your project uses.
Code Connect: make it reuse your components
Code Connect maps components in your Figma library to the components in your codebase. Once it’s set up, the MCP server’s output carries a snippet of your real component for each mapped instance, so the agent imports <Button> instead of rebuilding it from rectangles (Figma). It needs a Dev or Full seat on an Organization or Enterprise plan (Figma Code Connect).
The community alternative
Before Figma shipped its own server, many teams used Framelink’s Figma-Context-MCP, a local server that reads files through a Figma personal access token. It has about 16,000 GitHub stars (October 3, 2026). If you run it, keep it current: versions up to 0.6.2 had a command-injection flaw, CVE-2025-53967, fixed in 0.6.3 (GitHub advisory).
When it doesn’t work
- Figma calls stop working: check your plan’s rate limit, especially on Starter, where 20 calls a month go quickly.
- “Select a frame” does nothing: selection only works with the desktop server. With the remote server, paste a link to the frame.
- GitHub returns 401: the token expired or lacks access to that repository. Make a new token, update the environment variable and reconnect the server.
- The agent never calls a tool: name the source in the prompt (“use the Figma frame at …”) and check the server is connected in the MCP settings.
If your team works this way, Zest’s Cursor analytics show which MCP tools each engineer’s agent sessions call, next to the pull requests those sessions led to.