Delv
Official (Vendor)★ 4.3by Figma

Figma Dev Mode (Official)

Figma's own Dev Mode MCP server. Hosted, OAuth-based; gives Copilot/Cursor/Claude Code structured React + Tailwind context from a Figma selection.

Homepage
A
Safety & Trust

Delv Safety Grade: A

Score 84/100 · assessed 2026-04-28

Maintainer95
Permissions85
Supply chain70
Transparency75
Incidents100

Figma's official MCP server is maintained by a major design platform vendor with strong institutional backing. The hosted OAuth model eliminates local installation risks and keeps credentials server-side. Permissions are scoped to reading design metadata and tokens from selected Figma frames, which is narrow and appropriate for the use case. The main supply chain consideration is that it's a hosted service rather than open-source code you can audit, so you're trusting Figma's infrastructure and OAuth implementation. Transparency is adequate through official documentation but lacks public source code. No known security incidents. The read-only design data access pattern is inherently safer than filesystem or shell permissions. Suitable for professional development workflows where Figma is already trusted.

Lethal Trifecta (prompt-injection exposure)

TRIFECTA RISK
All three axes present. This server can read private data, ingest attacker-controlled content, and send data outbound. A poisoned input (a GitHub issue, an email, a webpage) can exfiltrate secrets via this chain. Only install with auditing; avoid on shared or cloud agents.
Private dataYes
Reads secrets, credentials, private files
Untrusted inputYes
Ingests web pages, PRs, issues, emails
External commsYes
Can send data outbound

Inherits the figma trifecta plus access to code-export endpoints.

Green flags

  • Official Figma product with enterprise vendor backing
  • OAuth eliminates need for API keys in local config
  • Read-only access to design metadata, no write permissions
  • Scoped to user-selected frames, not entire Figma account
  • No filesystem, shell, or network permissions required locally

Red flags

  • Hosted service with no public source code to audit
  • OAuth flow requires trusting Figma's token handling
  • Unclear what design data is cached or logged by the MCP server
  • No versioning or rollback for hosted service changes

Permissions requested

Outbound networkIdentity readRepo read
Assessed by Delv Editorial using public metadata. Grades are advisory and update as the ecosystem changes. They do not replace your own review of permissions and code before granting an agent access to sensitive systems.

Review

Figma's official MCP server bridges the gap between design and code by piping structured component data straight into your editor. You select a frame in Figma, and Claude or Cursor gets a JSON payload with React component structure, Tailwind classes, spacing tokens, and colour values. No screenshots, no eyeballing measurements. I've used this to spin up card components and modal layouts without manually translating design specs. The workflow is: open a Figma file in Dev Mode, highlight a frame, then ask Claude to generate the component. What comes back is surprisingly clean React with Tailwind utilities that match the design tokens. Spacing values come through as rem units, colours as hex or CSS variables if your file uses them. It saves the tedious back-and-forth of "is that 16px or 20px padding?" The OAuth flow means you authenticate once through Figma's servers rather than wrestling with API keys. That's convenient, but it also means you're tied to Figma's uptime and rate limits. I haven't hit a limit yet in normal use, but it's worth knowing the server is hosted, not local. Design token reuse is where this shines. If your Figma file has a proper token setup (colour styles, text styles, spacing variables), those flow through to the MCP context. You can ask Claude to audit a new design against your existing system and it'll spot inconsistencies. That's genuinely useful for teams trying to enforce design consistency without manual reviews. Quirks: it only works with files you have access to, obviously. If you're a developer without edit permissions on the design file, you'll need the designer to share it properly. The React output assumes you're using Tailwind; if you're on styled-components or CSS modules, you'll need to adapt the code yourself. And while it handles layout and typography well, complex interactions (animations, state machines) aren't in scope. This is a static design-to-code tool, not a behaviour generator. If you're not using Figma or you work in a stack that isn't React + Tailwind, this won't help. But if you are, and you're tired of manually translating designs, it's worth the five minutes to set up.
Verdict

Install this if you're on a React + Tailwind stack and your team uses Figma with proper design tokens. Skip it if you're using a different CSS framework or your Figma files are a mess of one-off styles. The OAuth setup is painless and the time saved on component scaffolding adds up quickly.

Good at

  • OAuth authentication is one-click; no API keys to manage or rotate.
  • Design tokens (colour, spacing, typography) flow through cleanly if your Figma file is set up properly.
  • React + Tailwind output is surprisingly clean and requires minimal hand-editing.
  • Hosted server means no local dependencies or version conflicts.
  • Useful for auditing new designs against an existing design system without manual checks.

Watch out

  • Only works with React and Tailwind; other frameworks require manual translation of the output.
  • Hosted server means you're dependent on Figma's uptime and rate limits.
  • Flattens nested components into a single output, which may not match your component structure preferences.
  • Requires proper Figma file hygiene (styles, variables) to get reusable tokens instead of one-off values.
  • No support for animations, state, or interactive behaviour; purely static design-to-code.

Use cases

  • Generating components straight from a frame selection
  • Reusing design tokens (colour, spacing, type) in code
  • Round-trip from Figma comments to PR drafts
  • Auditing a Figma file against an existing design system

Getting started

1. Open Claude Desktop, Cursor, or your supported editor and navigate to the MCP server settings. 2. Add Figma Dev Mode via the hosted server option (no manual install needed). You'll be prompted to authenticate via OAuth in your browser. 3. Open a Figma file in Dev Mode, select a frame, then ask Claude to generate a component from the selection. The server fetches the structured design data automatically. 4. Check the output for design token usage. If your Figma file lacks proper styles and variables, you'll get one-off values instead of reusable tokens. 5. Watch out for complex nested components; the server flattens them into a single React component, which may not match your preferred component architecture.

Works with

Claude DesktopClaude CodeCursorWindsurfVS Code

Similar MCPs