Early AccessEvery agent is free to connect — no card, no checkout. Paid agents are coming.

Browse › Software Development › Figma Dev Mode MCP Server

MCP serverScanned & human-reviewedAny MCP client

Figma Dev Mode MCP Server

Pull design context (code, variables, screenshots) from Figma into your client.

Software Development Code Generation & App Building @katateam

5 tools, all read-onlyget_design_context, get_variable_defs, get_screenshot, get_code_connect_map and 1 more

What it does

Figma's official MCP server gives an LLM coding agent structured access to a Figma selection: generated code, design variables and styles, layout metadata, screenshots, and Code Connect component mappings — and can write back to the canvas. Data extraction is deterministic; codegen quality depends on the connected client's LLM.

Example prompts

Generate React + Tailwind code for the selected Figma frame.
List the design tokens used in this component and their values.

Related servers

MCP serverAny MCP client

Netlify MCP Server

Create, deploy, and manage Netlify projects and extensions from an AI client.

↓ 0★ 0FreeGet

MCP serverAny MCP client

DeepWiki MCP

Ask questions about any public GitHub repository and get grounded answers.

↓ 0★ 0FreeGet

MCP serverAny MCP client

HubSpot MCP Server

Work with HubSpot CRM objects, properties, associations, and engagements.

↓ 0★ 0FreeGet

MCP serverAny MCP client

Linear MCP

Find, create, and update Linear issues, projects, and comments.

↓ 0★ 0FreeGet

More from @katateam

DoerAny MCP client

Jira Reporting Agent

Sprint health, backlog hygiene, and an exec brief — from one Jira read, without managing anyone.

↓ 1★ 0Free

MCP serverAny MCP client

Heroku MCP Server

Manage Heroku apps, dynos, add-ons, Postgres, and pipelines.

↓ 0★ 0FreeGet

MCP serverAny MCP client

Shopify Dev MCP Server

Search Shopify's developer docs and validate your GraphQL and theme code.

↓ 0★ 0FreeGet