Jason Lee

Posted on Aug 12

Figma Turned Dev Mode Into an MCP Server. The Price Cut Was the Marketing.

#figma #mcp #ai #webdev

In April 2026, Figma quietly cut its Professional plan from $20 to $16 per editor per month — the first real price drop since its $20 billion acquisition by Adobe collapsed in late 2023 and Figma went public on the NYSE instead. Every SaaS pricing tracker that covers design tools ran a version of the same headline: "Figma gets cheaper." That's the least interesting thing that happened to Figma this year.

The more consequential story started thirteen months earlier and has nothing to do with discounts. Between June 2025 and the Config 2026 conference this spring, Figma rebuilt its entire seat model, shipped a remote Model Context Protocol server, expanded Code Connect into a GitHub-integrated mapping tool, and started experimenting with bringing live code onto the design canvas. Read together, these releases describe a company repositioning itself away from "the tool where designers make mockups" and toward "the context layer that keeps your AI coding agent from hallucinating your design system." The price cut is a demand-generation tactic for that pivot, not the pivot itself.

This piece is for developers who've never opened Figma except to grab a hex code, and who are increasingly being asked to install "the Figma MCP server" in Cursor, Claude Code, or VS Code by a designer on their team. It walks through what the server actually does, how the pricing model was restructured around it, what's genuinely better than screenshotting a design into a chatbot, and — more importantly — what the marketing pages don't tell you about who actually gets the good version of this.

What actually happened

Three separate, compounding changes:

1. The seat model was rebuilt (March 2025). Figma killed its old per-product seat system, where a team bought a Figma Design seat, separately paid for a Dev Mode seat, and separately negotiated FigJam access. In its place: three seat types — Full, Dev, and Collab — each bundling a fixed set of products. A Full seat gets Design, Dev Mode, FigJam, Slides, Draw, Sites, Make, and Buzz. A Dev seat gets Dev Mode, FigJam, Slides, and Buzz, plus view/comment access to Design files, for engineers who need to inspect but not create. A Collab seat is FigJam and Slides only, for stakeholders. According to Figma's own pricing and billing update notice, this took effect for accounts at their first renewal on or after March 11, 2025.

2. Figma shipped an MCP server for Dev Mode (June 2025), then expanded it twice more. The initial beta announcement on June 4, 2025 gave agentic coding tools — the post specifically names Copilot in VS Code, Cursor, Windsurf, and Claude Code — direct, structured access to Figma's design data instead of a rasterized screenshot. The Verge covered the launch the same day. On September 23, 2025, Figma's CTO Kris Rasmussen published a follow-up announcing remote server access (no more requiring the Figma desktop app to be running locally), support for Figma Make files, and an in-app UI for Code Connect mapping. The Verge wrote that one up too. A third post from Figma, dated June 16, 2026, describes the server "reaching further across the platform than it ever has."

3. Config 2026 pushed further: code as a native layer type. Per Figma's Config 2026 admin guide, Figma introduced "code layers" in closed beta — the ability to import a frontend repo from GitHub and edit its actual code directly on the Figma canvas, alongside a read-only Dev Mode timeline for inspecting animations and exporting them straight to CSS, JSON, or React.

The pricing cut in April 2026 is the fourth data point, and per industry tracker fewertools, it's explicitly framed as a competitive response to Penpot's momentum and OpenAI's own Make-style app-building push, not as a courtesy to existing customers whose seats had gone up 25-33% the year before.

What the MCP server actually does

If you haven't touched Figma's Dev Mode, the pitch is simple: instead of feeding an LLM a PNG of a component and hoping it guesses the padding, color tokens, and variant logic correctly, the MCP server hands the agent structured data pulled directly from the Figma file.

Per Figma's developer documentation, the tool surface includes:

get_design_context — returns design context for a selected layer or node, defaulting to React + Tailwind output, but configurable.
get_screenshot — a supplemental image of the selection, used to preserve layout fidelity where metadata alone doesn't capture visual intent (an overlapping icon, a background image standing in for a live map embed).
get_metadata — layer IDs, names, types, positions, sizes; for FigJam files this includes node screenshots too.
create_design_system_rules — generates a rule file that tells the agent how to translate designs into code consistent with your existing tech stack.
add_code_connect_map / get_context_for_code_connect — links a Figma node ID to the actual component in your codebase, and retrieves that mapping so the agent can cite it.

You connect it one of two ways. The remote server, hosted at https://mcp.figma.com/mcp, is — per Figma's own setup guide — available on all seats and all plans, including the free Starter tier. The desktop server, which runs locally through the Figma app, requires a paid Dev or Full seat. Any MCP-capable client works: VS Code, Cursor, Windsurf, Claude Code, Codex, and others listed in Figma's MCP catalog.

The workflow, concretely: a designer builds a component in Figma using your team's actual design system — real variables, real component instances, not one-off shapes. A developer (or the designer, or the agent itself) copies a link to that frame. The developer pastes the link into their MCP-connected editor and prompts something like "implement this login form." The agent calls get_design_context, gets back React/Tailwind (or whatever framework you've configured) annotated with the actual variable names, spacing tokens, and — if Code Connect is set up — the literal file path and prop signature of the real component to import, rather than inventing a plausible-looking one.

There's also a reverse direction that's easy to miss in the coverage: per the MCP server guide, you can prompt an agent to spin up your app locally and "capture the UI in a new Figma file," turning live, rendered production code back into editable design layers. That's a genuinely different capability than anything Zeplin, Anima, or Locofy have shipped — most design-to-code tools are one-directional.

Two connection modes exist for a reason, and picking the wrong one is a common early mistake. The remote server at mcp.figma.com/mcp is the one Figma's docs now call "preferred": no desktop app dependency, works from a browser-based client, and — per the plans table — is open to every seat type on every plan, Starter included. The desktop server runs locally through the Figma app itself and is scoped to organizations with specific compliance or network requirements that make a hosted endpoint a non-starter; Figma's own guidance is explicit that the desktop path is "primarily for specific use cases for organizations and enterprises" and that most teams should default to remote. If your team is choosing between the two, that's the actual decision axis — not features, but where you're willing to let design data live in transit.

Why "structured context" is actually a different engineering problem than screenshots

It's worth being precise about why this matters technically, because "AI reads your Figma file now" undersells it. Figma's own explanation, buried in the June 2025 blog post, is the most useful part of the announcement: when an agent only has a screenshot, it has to search your codebase for a matching component, and if it can't find one with high confidence, it will fabricate a new one that duplicates existing code. When it has a Code Connect mapping instead, Figma can hand the agent the exact file path to the correct existing component. Same for design tokens — a red rectangle in a screenshot could map to any of a dozen semantically different color variables in your codebase; the MCP server can name the specific one actually used in the file.

This is a token-efficiency argument as much as an accuracy one. Agentic search across a large repository to locate "the right existing Button component" burns context and wall-clock time. A direct reference short-circuits that search. Figma states this plainly: providing exact references "can make generated code more precise, efficient, and reduce LLM token usage." That's a legitimate, measurable claim, not just marketing language — it maps onto how any RAG-adjacent system behaves when you replace fuzzy retrieval with a direct pointer.

What changed versus the old workflow, and versus competitors

Before mid-2025, "AI-assisted design-to-code" meant one of three things: paste a screenshot into ChatGPT or Claude and iterate manually; use a dedicated design-to-code SaaS like Anima or Locofy that generates code from Figma exports but doesn't integrate with your live agentic coding session; or rely on your coding agent's own codebase search to reverse-engineer intent from a pasted image, with no ground truth beyond pixels.

The MCP approach collapses those into one loop that lives inside the tool developers already use for everything else — their editor. That's the actual product shift: Figma isn't competing with Anima or Locofy on code-generation quality anymore. It's competing to be the context provider that Cursor, Copilot, and Claude Code call out to, the same way a vector database or a documentation MCP server would be. Figma is positioning Dev Mode as infrastructure that sits underneath your agent, not as a destination app you visit.

Against Penpot, the open-source Figma alternative that fewertools names as competitive pressure behind the price cut, this is Figma's structural advantage and its structural risk simultaneously. Penpot has integrated its own MCP server work and CSS/SVG-first export, and being open source means teams worried about vendor lock-in or data governance have a credible exit. But Penpot doesn't have Figma's installed base of existing design systems, which is exactly the asset Code Connect depends on — a mapping tool is only as valuable as the design system you're mapping.

It's also worth separating this from the coding agents' own native context-gathering. Cursor and Claude Code already index a repository and can often infer "the Button component lives at src/components/Button.tsx" without any external help, purely from grep-like search and prior conversation context. What Figma adds on top isn't code search — it's the design-side half of the equation: which specific variant, spacing token, and state the design actually calls for, information that simply doesn't exist anywhere in the codebase until someone writes it. The two are complementary rather than competing, which is precisely why Figma is pitching itself as a plug-in context source for tools you already use rather than a replacement for them. Compare that to v0, which generates new UI from a prompt or image with no design-system awareness at all unless you explicitly feed it one, and the gap in ambition is clear — v0 is trying to generate a plausible interface, Figma's MCP server is trying to reproduce an exact, pre-approved one.

Why developers should actually care

Cost: Dev Mode itself is no longer a separate paid add-on — it's bundled into Dev and Full seats under the new model, and the remote MCP server works on every plan including free Starter. If your only interaction with Figma has been "engineer glances at Dev Mode occasionally," you may not need to pay Figma anything at all to get baseline MCP access. That's a real, non-trivial improvement over the old "$25/editor/month Dev Mode add-on" pricing that predates the restructuring.

Latency and token cost: as covered above, direct references beat agentic search-and-guess. If your team already burns meaningful agent budget on "find the right existing component" loops, structured design context is a legitimate lever, not just convenience.

DX: Code Connect's promise — generated code that matches your actual design system instead of a plausible-looking clone of it — is the single biggest quality-of-life improvement on offer here, assuming your team already maintains rigorous component-to-design mapping discipline. If you don't, the tool has nothing to map to and degrades to the screenshot-plus-guessing baseline.

Lock-in: this is real and underdiscussed. Once your team has invested engineering time wiring Code Connect mappings for every component in a large design system, migrating to Penpot or any other design tool means redoing that mapping work from scratch. The MCP server itself is a fairly generic protocol implementation, but the mapping data behind it is proprietary Figma tooling.

Security and data governance: the remote MCP server means design data — which for many companies includes unreleased product UI, internal tooling layouts, and sometimes literal customer data mocked up in prototypes — now flows through a hosted endpoint to whatever third-party AI client your developers have configured. Figma's documentation doesn't spend much time on this in the pages we reviewed; teams in regulated industries should treat this the way they'd treat any other MCP integration that touches sensitive internal artifacts, with the same scrutiny applied to which agents and models are permitted to call it.

Practical use cases

Design system teams at mid-to-large companies get the clearest win: Code Connect plus MCP turns "hand off a Figma file and wait for a developer to interpret it" into a much shorter loop, particularly for teams that already maintain component libraries in Storybook or similar.
Affirm, cited in Figma's own blog post, reports using the MCP server to rebuild major product flows in under two days, describing a development-velocity improvement of "orders of magnitude" — a strong claim from a named customer, though it's Figma's own case study and should be read as such rather than as an independent benchmark.
Solo developers and small teams on the free or Professional plan get the baseline capability — get_design_context, get_screenshot, get_metadata — without Code Connect's codebase-aware snippets. Still meaningfully better than a screenshot, but the agent is generating plausible new code rather than referencing your actual components.
Reverse capture — turning a running app's live UI into editable Figma layers — is useful for teams that design after prototyping in code, or for bringing an existing, undocumented product into a design system for the first time.

The limitations the marketing pages don't lead with

Code Connect — the feature that actually makes the generated code match your codebase — requires Organization or Enterprise, not Professional. This is confirmed independently in three places: Figma's plans and features comparison table, its dedicated Code Connect help article, and the public figma/code-connect GitHub repository, which states plainly: "Code Connect is available on Organization and Enterprise plans and requires a full Design or Dev Mode seat to use." Organization starts around $55 per Full seat per month and Enterprise around $90, versus $16 on Professional — a three-and-a-half-to-nearly-six-times jump to unlock the part of the pitch that actually differentiates this from pasting a screenshot into ChatGPT. The $16 headline price gets you the MCP server's baseline tools; it does not get you the thing the launch blog post spends the most words explaining.

The seat-upgrade billing trap is real and automatic. If someone holding a cheaper Dev or Collab seat starts editing a Design file — an action Figma's own seat definitions explicitly restrict for those seat types — the system prompts an automatic bump to a Full seat, silently changing their monthly cost (from $3 or $12 up to $16 on Professional, or from $5/$25 up to $55 on Organization, per current published rates). Access changes are billed automatically. Teams need to actively set expectations, or discover this on an invoice.

There's a hard migration deadline that's easy to miss. Per the figma/code-connect repository, framework-specific Code Connect parsers stop receiving updates and support on August 17, 2026 — five days from this article's publication. Teams that set up Code Connect using the older parser-based approach for React, Storybook, SwiftUI, or Jetpack Compose need to migrate to template files, Figma's newer and now-only-maintained approach, using its published migration guide. If your team adopted Code Connect early and hasn't touched the setup since, this is worth checking now rather than after something quietly stops updating.

The remote-server convenience has a data-flow cost nobody's benchmarked publicly. Design context now leaves your infrastructure by default when you use the preferred remote endpoint, rather than staying local via the desktop server. For most teams this is a non-issue; for anyone under stricter compliance regimes, it changes the risk calculus of adopting the "preferred" setup path Figma recommends.

An independent read

Figma's MCP and Code Connect stack solves a problem that was genuinely annoying — agents guessing at design systems from flat images — and the underlying engineering argument (structured references beat fuzzy search) holds up. It is not, however, the neutral developer-tool story the price-cut headlines imply. The company restructured its entire billing model around seat types roughly coincident with building this feature set, then gated the piece that makes the AI output actually trustworthy behind its two most expensive tiers, and cut its cheapest tier's price at the same time competitors like Penpot were gaining ground. Read uncharitably: the $16 Professional price is a funnel, and Code Connect is the upsell. Read charitably: Figma correctly identified that free/cheap baseline access drives MCP adoption and habit formation across a much larger developer population, while the teams who need the deepest integration — large orgs with mature design systems — were always going to be Organization/Enterprise customers regardless.

Both readings are probably true simultaneously. What's not in question is that Figma is no longer only competing with Sketch and Penpot on canvas features. It's now also competing with every other MCP server a developer might install to feed context to an agent — documentation servers, database schema servers, ticket-tracker servers — for a slot in an increasingly crowded context window. Whether it earns that slot depends entirely on whether your team's Figma files are structured well enough, with real components and named variables, to be worth pointing an agent at in the first place. A messy Figma file produces messy structured context just as reliably as it produces a messy screenshot.

Who should try it, who should wait, who should ignore it

Try it now if your team already has a disciplined Figma design system with named variables and component libraries, and you're on (or can justify) Organization or Enterprise — Code Connect plus the MCP server is likely to measurably cut the back-and-forth between design handoff and shipped code.

Try the free tier, skip the upgrade if you're a solo developer or small team without a formal design system — the remote MCP server's baseline tools are free on any plan and genuinely better than screenshotting, but don't expect the codebase-matching magic without Code Connect.

Wait if your team is under compliance constraints around where design or product data can flow, until you've specifically reviewed the remote server's data handling versus running the desktop server locally.

Ignore it if your Figma usage is minimal, your components are one-off and inconsistent, or your team already gets equivalent value from screenshot-based workflows in whatever agent you use — Code Connect has nothing to map onto a design system that doesn't functionally exist yet, and you'd be paying Organization pricing for a feature with no substrate to work on.

Discussion: If you've wired up Figma's Code Connect against a real design system, has the token/accuracy improvement over screenshot-based prompting actually been measurable for your team, or has the maintenance burden of keeping mappings current eaten the gains — and how does that trade-off compare to teams' experience with competing approaches like Storybook-driven MCP servers or plain component-library documentation fed to an agent?

Sources:

DEV Community