Framelink Figma Context MCP

MCP server that feeds Figma layout, styles and components into AI coding agents like Cursor and Claude Code.

Free· Free and open source (MIT). Optional Framelink hosted extras are gated behind a waitlist with no published pricing.MCP Servers

Visit website →

Best for

Front-end and mobile engineers using Cursor, Claude Code, or Windsurf who want AI agents to implement Figma designs in the team's own component library and framework conventions.

Skip if

Designers who want a no-code Figma-to-production-site exporter, or teams that need bi-directional sync (code changes reflecting back into Figma).

Framelink Figma Context MCP (the GLips/Figma-Context-MCP repo) is a Model Context Protocol server that pipes Figma design data into any MCP-aware AI coding client — Cursor, Claude Code, Windsurf, VS Code Copilot Chat, Cline and others. Instead of handing the model a raw Figma API dump or a pre-baked React/Tailwind snippet, it walks the file, strips noise, deduplicates repeated styles and components, and returns a compact descriptive JSON blob describing layout, spacing, typography, colors, component instances and named tokens. The model then writes code in whatever framework and pattern your repo already uses. Install is one line: add a config block pointing to `npx figma-developer-mcp` with your Figma personal access token and restart the editor. Once wired, you paste a Figma file/frame/node URL into the chat, ask for the implementation, and the agent pulls the right slice of the design on demand. Typical workflows are converting a marketing section into your own component library, turning a mobile screen into SwiftUI or Jetpack Compose, generating Tailwind for a landing page redraw, or reconciling a Figma redesign against existing code. The project has ~15k stars, is MIT-licensed TypeScript, and is maintained by Graham Lipsman under the Framelink brand — a hosted product with waitlisted extras is signposted but the core server is fully self-hostable and free.

Editor's take

This is the MCP I reach for over Figma's own server when the goal is code that looks like the rest of the repo. The descriptive-not-prescriptive philosophy is the right call — the official MCP's Tailwind-flavored output is convenient for greenfield demos but pollutes an established codebase. Install is genuinely one line, and the token-and-component preservation is what makes it worth wiring into every front-end project.

— The AI Tool Bible editorial team

Pros

✅ Descriptive JSON output preserves your codebase conventions instead of forcing auto-generated React/Tailwind
✅ Roughly 25% smaller payload than Figma's official MCP, which matters for context-window-limited agents
✅ Deduplicates repeated styles and correctly represents nested component instances
✅ Works with Cursor, Claude Code, Windsurf, VS Code, Cline — any MCP client, not locked to one IDE
✅ One-line npx install; only a Figma personal access token is required
✅ MIT licensed, active repo (~15k stars), self-hostable with no vendor lock-in
✅ Keeps token names and component props, so generated code can reference your design system

Cons

⚠️ Read-only — cannot push code changes back to Figma or edit designs
⚠️ Quality of output still depends on how disciplined the Figma file is (auto-layout, named styles, components)
⚠️ Requires a Figma personal access token per developer; no team-level auth flow
⚠️ Framelink hosted tier is a waitlist with no public pricing, so long-term commercial model is unclear
⚠️ Very large or deeply nested files can still blow past model context if you request whole pages instead of frames

Use cases

Figma-to-React component generation in CursorMarketing landing page implementation from a Figma frameSwiftUI or Jetpack Compose screens from mobile mockupsDesign system token extraction into Tailwind or CSS variablesReconciling a Figma redesign against existing componentsGenerating HTML/CSS prototypes from a design filePixel-accurate spacing and typography audits inside an IDE agent