Figma for Developers: Dev Mode, MCP Server, Code Connect and APIs

Developers meet Figma in three ways: inspecting designs to build them, connecting their codebase and coding agents to Figma, and building on Figma's platform. In 2026 the second has become the most searched; "figma mcp" outranks every other developer term we measured. This guide covers Dev Mode, the MCP server, Code Connect and the APIs, with what each costs and which plan it needs, from Figma's own documentation read on 9 October 2026.

What developers need, and what they pay

Many developers need nothing: a free View seat on a paid plan includes basic inspection, measurements, property values, code copying and asset exports ^[119]. Full Dev Mode needs a Dev or Full seat ^[118]. Dev Mode is not available on the free Starter plan at all ^[129].

Dev seats include 500 AI credits a month ^[94].

A Dev seat costs US$12 a month billed annually on Professional, or US$15 monthly; US$25 on Organization and US$35 on Enterprise ^[2].

## Five developers, three plans

By our arithmetic, five Dev seats cost US$720 a year on annual Professional, US$900 on monthly Professional, US$1,500 on Organization and US$2,100 on Enterprise.

One reviewer in our Trustpilot sample asked why developers should pay US$12 a month just for Dev Mode ^[167]. For teams that only inspect, the answer is that they may not need to. Check first.

How Dev Mode came to be

Figma says developers account for a third of its weekly active users ^[78]. Dev Mode launched in free beta in June 2023 and left beta on 31 January 2024, after more than 200 features and fixes, adding annotations, better change comparison, plugins and VS Code improvements ^[77].

At launch Figma said Dev Mode alone would cost US$25 a seat a month on Organization and US$35 on Enterprise ^[76]; those remain the Dev seat prices ^[2].

## What Dev Mode adds

Dev Mode is a developer view in Figma Design for inspecting designs, viewing properties and generated code, downloading assets, comparing changes and managing handoff; Shift D toggles it ^[118]. It offers more codegen languages, compares frame versions, explores all variants of a component set, and links designs to tickets and code ^[118].

The Figma for VS Code extension lets developers inspect designs next to their code ^[118].

Dev resources, such as GitHub, Jira, Storybook and VS Code links, can be attached to components and propagate to every instance ^[118]. A component playground lets developers try properties and variable modes without changing the design ^[118].

Statuses and notifications

Designers mark sections, frames and components Ready for dev; developers get notified, and a Changed state appears when a ready design is edited ^[336]. A Completed status, marking development done, is available on Organization and Enterprise ^[336].

The ready-for-dev view, which lists every ready design in a file, and the focus view are Organization and Enterprise features ^{[338] [337]}.

## Comparing changes

Compare changes shows when a frame or component was last edited and what changed in its layers, labeled as edited, added or deleted ^[335]. It can also compare detached components or overridden instances with their main component ^[335].

A short history of the MCP server

Figma released its MCP server in beta on 4 June 2025, for tools such as Copilot in VS Code, Cursor, Windsurf and Claude Code ^[72]. A remote server followed in September 2025; Figma's CTO wrote that Affirm's teams reported development speed-ups of "orders of magnitude" and rebuilt major product flows in under two days ^[73].

In February 2026 Figma added generating Figma Design files from Codex, bringing running interfaces onto the canvas ^[75].

## The MCP server

The Figma MCP server gives AI coding agents structured design context: components, variables, layout data, FigJam content and Make resources ^[122]. Agents can generate code from selected frames, use Code Connect mappings, and now write native Figma content to the canvas ^[122].

The remote server, the preferred option, works on all seats and plans; the desktop server needs a Dev or Full seat on a paid plan ^[120].

Which clients can connect

Figma lists clients such as VS Code, Cursor, Windsurf, Claude Code and Codex ^[120]. Only clients in Figma's MCP catalog can connect; developers of other clients can join a waitlist ^[158].

The catalog lists Claude, Claude Code, ChatGPT and Codex among others, most with read and write access ^[26].

What each client supports

The catalog differs by client. Cursor, Claude and Claude Code support Figma Design, Make, FigJam and Weave with read and write access on remote and local servers; ChatGPT adds Figma Slides; Codex and VS Code cover Design, FigJam and Weave ^[26]. Xcode is a remote-only beta, Google Antigravity is local-only and read-only, and Notion and Slack connect to FigJam only ^[26].

Check the catalog for your editor before planning a workflow around a specific file type.

Setting it up in Claude Code

Figma recommends installing its plugin in Claude Code with one command, which adds the MCP settings and agent skills ^[123]. Sign-in uses Figma's OAuth flow ^[158].

Remote setup needs no desktop app; the desktop server serves specific organization and enterprise cases ^[123].

What the MCP server can do

Figma's tool list includes reading tools such as get_design_context, get_variable_defs, get_screenshot, get_metadata and download_assets, and writing tools such as create_new_file, generate_diagram, generate_figma_design and Code Connect mapping ^[157]. Some tools are available only on the remote server ^[157].

The remote server can also capture a live web UI and send it to Figma as editable layers ^[158]. By default, get_design_context returns React and Tailwind code, which you can change through your prompt ^[157].

Figma's FAQ distinguishes two writing tools: generate_figma_design captures a running app as flat layers, while use_figma builds with your existing components and variables ^[121].

Writing to the canvas

With the use_figma tool, agents create and modify real design assets in Figma files ^[121]. Write to canvas is available to Full and Dev seats on paid plans, and Dev seats have read-only access outside drafts ^[122].

Figma says writing to the canvas is free during the beta and will eventually become a usage-based paid feature ^[122]. Budget for that change. It will come.

Known limits in the beta include a 20KB response limit per call, no image or video assets yet, fonts that must be uploaded to your account, and output that may need manual cleanup ^[121]. Figma recommends testing on a duplicate of a library or a draft before touching production files ^[121].

The desktop server

The desktop MCP server runs only through Figma's desktop app, is enabled from the inspect panel in Dev Mode, and listens locally at 127.0.0.1 on port 3845 ^[159]. Figma strongly recommends the remote server, which has the broadest set of features ^[159].

Skills

Skills are Markdown files that teach agents Figma workflows; Figma provides figma-use, figma-use-figjam, figma-use-slides, figma-swiftui, figma-code-connect, figma-create-new-file and figma-generate-diagram, plus example skills for generating a library or a design ^[340]. Anyone can write and share skills, with no approval process ^[121].

Installing Figma's plugin in Claude Code or Cursor adds the skills automatically ^[340].

MCP rate limits

Seat	Starter	Professional	Organization	Enterprise
View, Collab	20 a month	20 a month	20 a month	20 a month
Dev, Full	—	200 a day, 10 a minute	200 a day, 15 a minute	600 a day, 20 a minute

Education plans get the Professional Dev and Full limits ^[155]. Write tools such as create_new_file are exempt from rate limits ^[155].

Code Connect

Code Connect links components in your repository to components in Figma, so Dev Mode and the MCP server give agents your real component references ^[339]. It is available on Dev and Full seats on Organization and Enterprise ^[163].

Code Connect UI runs inside Figma and connects to GitHub or manually entered paths; the CLI uses template files written in TypeScript ^{[339] [163]}. One design component can map to several implementations, such as React, SwiftUI, Jetpack Compose and Vue ^[163].

The REST API

The REST API reads files, images, versions, comments, components, styles and variables, manages dev resources, reports activity logs and library analytics, and runs webhooks ^[161]. It authenticates with personal access tokens or OAuth 2, at api.figma.com ^[161].

Figma for Government uses a separate base URL ^[161]. Keep that in mind.

REST API rate limits

Since 17 November 2025, REST limits depend on the user's seat, the endpoint's tier, and the plan of the file requested ^[162]. Figma's example: requests to a file on a Starter plan are limited to up to six a month, even if the requester has a Full seat elsewhere ^[162].

OAuth apps get a separate budget per user, per plan and per app ^[162].

The tier table sets Tier 1 endpoints, such as getting a file or images, at up to 20 requests a month for View and Collab seats on every plan, and 10, 15 or 20 a minute for Dev and Full seats on Professional, Organization and Enterprise ^[162]. That table and the page's own six-a-month example for Starter files do not agree. Plan for the lower number. It is safer. Figma also warns that View and Collab limits may be lower when demand is high ^[162].

Heavier endpoints

Tier 2 endpoints, such as comments, dev resources, folders, projects, variables and webhooks, allow 25, 50 or 100 requests a minute for Dev and Full seats on Professional, Organization and Enterprise, and up to 5 a minute for View and Collab seats ^[162]. Tier 3 endpoints, such as activity logs, components and styles, file metadata and library analytics, allow 50, 100 or 150 a minute ^[162].

Figma applies these limits with a leaky-bucket algorithm ^[162].

Plugins and widgets

The Plugin API builds editor extensions in JavaScript and HTML that read and write the open file ^[164]. The Widget API creates interactive objects on the canvas that everyone in the file sees ^[165].

Organizations can publish internal plugins without Figma's public review ^[225].

Widgets, webhooks and embeds

The Widget API builds interactive objects on the canvas, such as alignment scales, stamps or ticket summaries, visible to everyone in the file ^[165]. The REST API can create and manage webhooks for file events ^[161], and the REST API for variables is an Enterprise feature ^[93].

Figma's developer page also offers an Embed Kit to put live Figma designs and prototypes into other apps ^[40].

What plugins cannot reach

The Plugin API can read and write the open file, but cannot access styles and components from team or organization libraries unless they are already in the file or imported, and cannot load web fonts from a URL ^[164]. Files load pages on demand, so plugins must use asynchronous APIs for pages outside the current one ^[164].

Figma Make for developers

Make builds code-backed prototypes and apps; Full and Dev seats can export code ^[104]. Since May 2026 a beta in the desktop app lets Make work in a team's production codebase, consuming no credits during the beta ^{[67] [3]}.

The MCP server can retrieve Make resources as context for production code ^[158].

FigJam for engineers

In April 2026 Figma added MCP skills that let agents read and write FigJam boards and generate architecture and entity-relationship diagrams ^[324]. Developers can use FigJam to map systems that agents have changed. It helps reviews.

SCIM and admin automation

Figma's developer page lists a SCIM API for provisioning, pushing role changes from an identity provider to Figma ^[40]. Setting seat types through SCIM is an Enterprise feature ^[125].

Content training and code

Content training applies to customer content, which under Figma's AI terms includes AI inputs and outputs such as code ^[56]. It is on by default for Starter and Professional ^[99].

What Figma's commissioned studies claim

Figma commissioned Forrester Consulting to model the economic impact of Dev Mode; for a composite organization built from interviewed customers, the study reports a 351% return, US$7.9 million in net present value and developer efficiency gains worth US$10 million over three years ^[344]. An earlier Forrester study of Figma and FigJam reported a 35% productivity gain within development teams and a three-year ROI of 328% ^[349].

These are vendor-commissioned models, not independent measurements. Use them as the upper bound of what a large team might see. Your mileage will vary.

Code Connect in numbers

Figma's Code Connect report says one global organization saved 98 minutes per developer per week, and that one organization cut development time by 50% on certain projects ^[350]. Again, these are customer anecdotes chosen by the vendor ^[350]. Treat them carefully.

What developers say they want

Figma surveyed 200 front-end engineers: 92% wanted designers to know more about the development process, 80% thought their business would benefit from closer design-developer work, and 55% wanted to be brought into the design process earlier ^[351]. In its later designer and developer report, 60% of developers worked from home most or all of the time ^[346].

Figma's 2026 AI report, as quoted on its handoff page, found more than half of product builders had stopped using linear handoffs entirely ^[365].

How the roles are shifting

Figma's design-to-code page quotes its 2026 AI report: developers participating in design rose from 44% to 60% in a year, and designers working in code nearly doubled, from 21% to 41% ^[363]. It also cites the State of the Designer 2026 report, in which 91% of designers who increased their AI use said it improved the quality of their output ^[363].

These are Figma's own surveys, quoted on a product page.

Why handoff breaks, in Figma's words

Figma's own guide to automated handoff names version drift as the most common failure: a developer starts from a spec and the design moves on mid-implementation ^[357]. Naming mismatches between Figma components and code components compound it ^[357].

Its answer is a stack of Dev Mode for specs, Code Connect for real component code, and the MCP server for agents ^[357].

Generating code with the agent

Figma's design-to-code page describes selecting a frame, opening the Figma agent and asking for React, HTML or responsive CSS, then refining with follow-up prompts ^[364]. It says accuracy depends on how well-structured the design file is ^[364].

The same page still says the agent does not consume AI credits during its open beta ^[364]; the agent became generally available and started consuming credits on 6 October 2026 ^[96].

Make's backend and code output

Figma's solution pages say Make integrates with Supabase so teams can test authentication, user data and dynamic states before handoff ^{[365] [363]}. The design-to-code page describes Make's output as HTML, CSS and JavaScript, viewable and editable in the built-in editor ^[363].

Who should buy Dev seats

Developers who need statuses, comparisons, more codegen languages and full MCP limits. Engineers who only measure and export can stay on View seats ^[119]. Most can.

## Verdict

For developers, Figma has moved from a viewer to a platform: Dev Mode for handoff, Code Connect for real components, and an MCP server that lets coding agents read and write designs. Start with free View seats. Add Dev seats where the work needs them. Watch for the MCP write tools to become a paid feature.