Figma

Pull design context, variables, and code straight from Figma.

Design

Turn a selected Figma frame into framework-accurate, design-system-aligned code in one prompt.

The Figma MCP server connects AI coding agents and IDEs directly to Figma, feeding them accurate design context — layout, components, variables, and styles — from a selected frame so they can generate production-ready code instead of guessing from a screenshot. It also works in reverse, letting agents write native content back to the Figma canvas. This closes the design-to-code gap and keeps generated UI faithful to your design system.

Transport: http
Authentication: OAuth
Endpoint: https://mcp.figma.com/mcp

Authenticates with your Figma account via OAuth on first connect. Works on all plans. (A local Dev Mode server at 127.0.0.1:3845/mcp is also available from the desktop app.)

What you can do

Generate code from a selected frame or node
Extract design variables, tokens, and styles
Capture a screenshot of a selection for fidelity
Map Figma components to code via Code Connect
Search connected design-system libraries
Write native content back to the canvas
Export and download assets (SVG, PNG)

Try asking

“Build this selected frame as a React component.”

“Generate my Figma selection in Vue using our design tokens.”

“Export these icons from my Figma file as SVGs.”

Tools it exposes

A sample of the tools available once connected.

get_design_contextget_screenshotget_variable_defsget_code_connect_mapdownload_assetssearch_design_system

Set it up

One click adds Figma to Cursor. Cursor must be installed.

Add to Cursor

Official Figma MCP docs