Figma

The Figma MCP server helps you pull in Figma context and generate high-quality code that aligns with your codebase and design intent. Use the MCP server to retrieve code resources from Figma Design or Make files, and turn your ideas into production apps.

**Key Features:**

• **Generate code from selected frames or nodes** - Select a frame in Figma or provide a node URL to have an AI agent turn your design into code.

• **Extract design context from layers** - Pull out variables, components, and layouts from a design to ensure builds adhere to design patterns.

• **Code smarter with Code Connect** - Boost output quality by reusing your actual components, the MCP server informs AI agents about existing components derived from Code Connect information.

**Setup and Usage:** The Figma MCP server runs locally on your device and operates only when Dev Mode is active and enabled within a Figma file. You must have the latest version of the Figma desktop app running in order to use this.

**Enable Figma MCP server in Figma App:**

1. Open your Figma application.

2. Open a Figma design file.

3. Access the Dev Mode inspect panel, where you'll find the MCP Server configuration options.

**Authentication:** The Figma MCP server handles authentication through the Figma desktop application. This authentication is managed automatically by Figma when you're logged into the desktop app.

**Developer terms:** Review Figma's [developer terms](https://www.figma.com/legal/developer-terms/)