Framelink Figma MCP
Give your coding agent access to Figma design data for accurate one-shot implementation.
- Source repo
- GLips/Figma-Context-MCP
- Stars
- ★ 16k
- Last updated
- 3mo ago
- License
- MIT
- Primary language
- TypeScript
- FA score
- 41/100 · Major gaps
At a glance
- How it runs
- Works with
- Platform-specificChatGPT · Claude Code (Unsupported)
- Cost
- Free software; you pay for model usage
- Setup effort
- Low · running in minutes
- You'll need
- Typical use
- Frontend developers using Cursor can paste a Figma link and ask the AI to implement the design, getting framework-compatible code accurately.
- Not a fit if
- Teams that do not use Figma as their design source
- Projects needing advanced design details like complex animations
- Source review
- 41/100 · Major gaps 2 safety controls not found
What does this agent do, and when should you use it?
Framelink Figma MCP is a Model Context Protocol (MCP) server that provides AI coding tools like Cursor with structured layout data from Figma files. It runs as a command-line tool named figma-developer-mcp, which requires a Figma API key and is configured in the MCP client's configuration file. The server calls the Figma API to fetch file metadata, simplifies and translates the response to retain only the most relevant layout and styling information, and returns this text to the model to improve code generation accuracy. It supports macOS, Linux, and Windows via npx. The project is open-source under the MIT license.
The server listens for MCP requests containing Figma file links. Upon receiving a request, it calls the Figma API to fetch metadata for the specified file, frame, or group. It then simplifies and translates the API response, filtering out irrelevant data and keeping only key layout properties like dimensions, positions, colors, and fonts. The simplified data is returned as text to the AI model, serving as context for code generation. Communication uses standard input/output (stdio). Deployment is done via npx with the --figma-api-key argument or the FIGMA_API_KEY environment variable, and optional PORT.
- Frontend developers using Cursor can paste a Figma link and ask the AI to implement the design, getting framework-compatible code accurately.
- UI designers quickly turn design mockups into runnable prototypes in React or Vue without manual annotation.
- Teams iterating on UI want AI-generated code to match spacing, colors, and other details exactly, reducing manual adjustments.
- Solo developers building full-stack apps with Cursor can directly incorporate Figma design elements into their codebase.
- Design system maintainers synchronize design spec changes into frontend code with the help of AI assistants.
How do you install or deploy this agent?
- Ensure Node.js and npm (with npx) are installed.
- Create a Figma personal access token: In Figma, go to Settings → Security → Generate token, then copy it.
- Add the following to your MCP configuration file:
macOS/Linux:
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
Windows:
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "cmd",
"args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
How do you use this agent?
- Save the configuration to your editor's MCP config file (e.g., .cursor/mcp.json).
- Restart the editor and ensure the MCP server starts successfully.
- In the editor's chat, paste a link to a Figma file, frame, or group.
- Type a request such as "implement this design," and the AI will fetch the Figma data and generate code.
- Alternatively, set the FIGMA_API_KEY and PORT environment variables instead of command-line args.
What are this agent's strengths and limitations?
- Uses actual layout data from Figma, resulting in more accurate design-to-code implementation than screenshots.
- Integrates seamlessly with Cursor via the MCP standard, with simple configuration.
- Lightweight and runs via npx, requiring no external service.
- Open-source with a permissive MIT license, allowing modification and commercial use.
- Depends on the Figma API and requires a personal access token, tying usage to Figma as the design source.
- Primarily designed for Cursor and may have limited support for other AI coding tools.
- Requires network access and a Node.js runtime.
- Data is simplified, potentially omitting advanced design details like complex animations or interactions.
How does this agent compare with similar options?
No alternative solutions are mentioned in the source repository.
Key facts side by side with the most closely related agents.
| Agent | Source review | Form / cost | Stars | Updated | Language | Full support on |
|---|---|---|---|---|---|---|
| Framelink Figma MCP This agent | 41 · Major gaps | MCP serverFree + model costs | ★ 16k | 3mo ago | TypeScript | — |
| OSS Autopilot | 83 · Good | Agent plugin / skillFree | ★ 21 | 1d ago | TypeScript | Claude Code · Claude.ai |
| Concord MCP | 67 · Some gaps | — | ★ 545 | today | TypeScript | Codex · Claude Code |
| GitMCP: Live Documentation MCP Server for Any GitHub Project | 47 · Major gaps | Hosted serviceFree | ★ 8.5k | 5mo ago | TypeScript | ChatGPT · Claude Code · Claude.ai |
How does FollowAgents rate this agent?
Why each dimension lost points
Evidence shows: README requires users to provide a Figma API key and recommends using environment variables; SECURITY.md advises limiting server permissions. However, no user confirmation mechanism (e.g., confirmation before tool calls) is found, data flow transparency is limited (no explanation of how data is processed or where it is sent), sensitive data handling only suggests using environment variables without encryption or minimization. Dependency security: CI and dependency update advice exist, but no dependency audit or vulnerability scan evidence. External effects: server calls Figma API and may send telemetry (posthog-node), but not clearly stated. Rollback mechanism not mentioned. Source attribution: clear author and repository, but publisher unverified. Deductions: lack of user confirmation, insufficient data flow transparency, inadequate sensitive data handling, insufficient dependency security evidence, unclear external effects, no rollback mechanism.
Evidence shows: tests cover config parsing and style key resolution, CI includes lint, type-check, test, indicating some consistency. Dependency availability: dependency list is complete, but no lock file or availability guarantee. Failure messages: no clear error handling or user-friendly failure messages found. Deductions: dependency availability unverified, failure messages not demonstrated.
Evidence shows: README clearly targets Cursor users, scenario is giving AI coding agents access to Figma data. Capability boundaries: README states server simplifies Figma API responses, but does not list supported tools or limitations. Trigger precision: users paste Figma links, but parsing or triggering not explained. Environment fit: supports MacOS/Linux/Windows with config examples. Deductions: capability boundaries and trigger precision insufficiently described.
Evidence shows: README is well-structured with quickstart, config examples, demo video. Install notes detailed, supporting npx and env variables. Naming: package name and MCP name stable, but version not shown in README. Examples and FAQ sparse, only quickstart. Known limitations not explicitly listed. License MIT, clear. Versioning: release-please workflow exists, but no CHANGELOG. Maintenance responsibility: SECURITY.md and CI exist, but maintainer not explicit. Deductions: insufficient examples and FAQ, known limitations not listed, versioning info incomplete.
Evidence shows: output usability: server simplifies Figma data to provide relevant layout and style info, improving AI accuracy. Marginal value: compared to screenshots, providing design data enables more accurate implementation. Cost-benefit: requires API key, but no performance or cost data. Deductions: cost-benefit lacks data support.
Evidence shows: README claims improved accuracy, but no benchmarks or user studies. Cross-source corroboration: demo video and docs links exist, but no independent verification. Fact-inference separation: claims are mostly assertions, not distinguishing facts from inferences. Deductions: claims lack evidence, facts and inferences not separated.
- Not found in source: confirmation before actingTurn on (or add) a confirmation step before it acts, and try it in a sandbox or test environment before real data.
- Not found in source: rollback or recovery pathBack up first, or work on a git branch or snapshot, so its changes can be undone.
- This server requires a Figma API key; ensure it is stored securely to avoid leakage.
- The server may send telemetry data (posthog-node); review its privacy policy.
- Publisher is unverified; use with caution.
- No rollback mechanism provided; back up configuration before upgrading.
Recent releases
Latest entries from the project's GitHub Releases. Notes are quoted from upstream as written, not rewritten or tested by FollowAgents.
-
Release notes excerpt
What's New in v0.13.2 Gradients with reduced opacity render at the right strength Previously, gradient fills ignored *layer* opacity, only looking at paint/stop-level opacity. Agents could generate gradient overlays like scrims much stronger than intended. Solid fills already honored opacity; now gradients do too. - [#399](https://github.com/GLips/Figma-Context-MCP/pull/399) · authored by @LovePlayCode --- <details> <summary><strong>Full technical changelog</strong></summary> [0.13.2](https://github.com/GLips/Figma-Context-MCP/compare/v0.13.1...v0.13.2) (2026-06-18) …View on GitHub ↗ -
Release notes excerpt
What's New in v0.13.1 A quick follow-up to v0.13.0's payload diet. No more irrelevant, duplicate, or misleading titles Figma auto-names a text layer after its content, so a layer that reads "Add to cart" is *named* "Add to cart" too. The design data was carrying both. Worse, when someone edited the copy without renaming the layer, the stale old name often rode along, contradicting the real text and confusing LLM consumers. Additionally, auto-named labels (Rectangle 12, Frame 8372211, Ellipse 6) were included. All are gone now. …View on GitHub ↗ -
Release notes excerpt
What's New in v0.13.0 v0.13.0 is focused on design output quality: new support for Figma grid layouts, a batch of rendering bug fixes, and — perhaps most importantly — a new default output format that cuts token usage roughly in half. Two of these changes came from the community: thanks to [@Jkuzz](https://github.com/Jkuzz) and [@cnYui](https://github.com/cnYui). Your payloads just got cut in half …View on GitHub ↗