Open-source project
GLips/Figma-Context-MCP avatar
GLips/Figma-Context-MCP

Framelink MCP for Figma: a context filter between the Figma API and your coding agent

MCP server to provide Figma layout information to AI coding agents like Cursor

15,863 stars1,260 forksTypeScriptMIT

At a glance

What is it?
GLips/Figma-Context-MCP is an MIT-licensed TypeScript MCP server that fetches Figma file, frame or group metadata and rewrites it before handing it to a coding agent. The README's claim is narrow and testable: reduced context makes one-shot design implementation more accurate than pasting a screenshot. Most of the interesting engineering sits in what it removes, not what it adds.
Who is it for?
Adopt this if you already work in Cursor or a similar MCP client and your handoffs are Figma links rather than exported assets. Skip it if your design source is Figma Make, if your team cannot distribute personal Figma tokens, or if you need pixel-exact output that survives review without a human pass.
Can I use it commercially?
Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
Is it still maintained?
Yes. The repository received new commits within the last day.
What is it written in?
Mainly TypeScript, according to GitHub's language statistics.

Answers come from the project's GitHub data, last synced on September 15, 2026, and from our analysis. They are not legal advice.

DEEP OPEN-SOURCE ANALYSIS

The problem is not Figma access, it is Figma verbosity

A coding agent can already reach Figma through the REST API if you give it a token and a fetch tool. The failure is volume. A single Figma node response carries absolute bounding boxes for every descendant, transform matrices, blend modes, effect stacks, component and style references, plugin data and constraint metadata. Most of that is irrelevant to writing a React component, and all of it competes for the same context window as your source files. The README states the server simplifies and translates the Figma API response so that only the most relevant layout and styling information reaches the model, and that reducing the amount of context helps make the AI more accurate. That is the entire thesis. The target user is a frontend engineer or designer-engineer working in Cursor's agent mode who wants to paste a Figma URL into chat and get a component scaffold back. It is not a design-token pipeline, not a Figma-to-code compiler, and not a tool for teams whose designers work outside Figma. The README is explicit that the server is designed for Cursor specifically, which is a narrower audience than the MCP label suggests.

What the server does between the Figma URL and the model

The data flow described in the README has four steps. You open your IDE's chat in agent mode, paste a link to a Figma file, frame or group, and ask the agent to implement it. The agent calls the MCP server, which calls the Figma API, and then the server rewrites the response before returning it as context. The README describes this as simplification and translation, and gives the reason: fewer tokens, more relevant answers. What the README does not document is the shape of the simplified payload. There is no schema, no before-and-after example, and no list of which Figma node properties survive the filter. That omission matters more than it first appears. If you are debugging why an agent ignored a shadow, a rotation or an auto-layout gap, you cannot tell from the README whether the server dropped it or the model did. Treat the transformation as the project's core behaviour and also its least documented surface. The one architectural fact you can rely on is that translation happens server-side, before the model sees anything, which means you can inspect it independently of the model's reasoning.

Installing it: two JSON blocks and a Figma token

Configuration is a standard MCP server entry. The README's macOS and Linux example uses npx with the package name figma-developer-mcp and passes the key as a flag: "command": "npx", "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]. The Windows variant wraps the same invocation in cmd with "/c" before npx. The README also notes you can set FIGMA_API_KEY and PORT in the env field instead of passing the key on the command line. The token itself comes from Figma's personal access token flow, linked from the README to Figma's own help article; the server does not provide an OAuth path of its own. That is the whole setup surface. Two things are worth flagging. First, the --figma-api-key flag puts the token in your editor's MCP configuration file, which is often committed or synced; the env field is the safer of the two options the README offers. Second, the PORT variable implies the server can also run in a non-stdio mode, but the README never explains that mode, so if you need HTTP transport you are reading source, not documentation.

Where the approach stops working

The server's value is proportional to how much of the design lives in Figma's node tree. Designs that lean on images, embedded vectors, custom fonts or effects the simplifier discards will produce output that looks structurally right and visually wrong, and the README gives you no way to predict which cases those are. There is a second, sharper limit: the server reads Figma files through the REST API, so it sees what a file contains, not what a designer intended. A frame named "Hero v3 final" carries no semantic weight; the model infers structure from geometry and naming, and it will infer wrongly when naming is inconsistent. The README's own framing, that this beats pasting screenshots, is a comparison against a weak baseline. Screenshots give the model no numbers at all. Getting coordinates and style values is a low bar, and clearing it does not mean the output is production-ready. Finally, the README positions the server for Cursor specifically. Other MCP clients may work, but the README does not claim they do, and the design decisions around context trimming were made with one client's agent loop in mind.

Compared with pointing an agent at the Figma API directly

The obvious alternative is to give your agent a generic HTTP or fetch tool and the Figma REST API, skipping the MCP server entirely. The difference is where the filtering happens. With a raw API tool, the full node payload lands in context and the model decides what matters, which costs tokens on every call and makes behaviour depend on the model's ability to ignore noise. Framelink moves that decision to deterministic TypeScript running before the model sees anything: same input, same trimmed output, independent of which model you use. That determinism is the real argument for the server, and it is also the cost. A generic fetch tool lets you request exactly the fields you need for a specific task, while the server's filter is fixed by the project. If your workflow needs a property the simplifier drops, you have no per-call escape hatch short of running the API yourself. The README's comparison is only against screenshots, which undersells the more interesting trade-off against direct API access.

Maintenance cost and the MIT licence

The repository is TypeScript and MIT-licensed, and the release history shows a 0.13.x line with three releases in June 2026 and a push in September 2026, so the project is active rather than frozen. Because it is distributed through npx, there is no vendored copy to patch: your configuration pins a package name, and every editor restart can pull a newer version. That is convenient and also the main operational risk, since a change in how the simplifier trims nodes can alter agent output without any change on your side. Pinning a version in the args array is the obvious mitigation, and the README does not discuss it. On licensing, MIT permits commercial use and modification, but the licence covers this server's code, not the Figma API terms you accept when you create the token, and not the Framelink branding the README points at. If you fork and redistribute, keep the licence text intact. None of this is legal advice; read the LICENSE file and Figma's developer terms yourself.

Who should adopt it, and what to check first

The fit is a small frontend team already using Cursor's agent mode, where designers hand off Figma links and engineers want a first pass at component structure without leaving the editor. The misfit is anyone whose design source is not a Figma file tree, anyone who cannot issue a personal access token to each engineer, and anyone expecting the tool to close the gap between a generated component and a reviewed one. Before adopting, do three concrete things. Create the token with the minimum scope that still reads your files, since a personal token carries your account's access. Open a frame with deep nesting and mixed auto-layout, run it through the server, and compare what the agent received against the raw Figma API response for the same node; that is the only way to learn what the simplifier keeps. Then decide whether the version you pin in your MCP config is one you are willing to bump deliberately, because npx will not make that decision for you.

Editorial conclusion

Adopt this if you already work in Cursor or a similar MCP client and your handoffs are Figma links rather than exported assets. Skip it if your design source is Figma Make, if your team cannot distribute personal Figma tokens, or if you need pixel-exact output that survives review without a human pass. Before wiring it in, create a token with the narrowest scope that still reads your files, open one deep frame with many nested groups and check what the simplified response actually retains, and confirm the MIT licence fits how you distribute your editor configuration.

Official sources

  1. GLips/Figma-Context-MCP on GitHub
  2. License: MIT
  3. Project website
  4. README
  5. Releases
Community notes

Community notes