> ## Documentation Index
> Fetch the complete documentation index at: https://portkey-docs-feat-rerank-documentation.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma MCP server

> The Figma MCP server connects Figma's design environment to MCP clients, enabling agents to translate designs into code, extract variables, and align output with your design system.

## When should you use this server

Use the Figma MCP server when you want an agent to:

* Generate production-ready UI code (React, Vue, HTML/CSS, iOS) from Figma designs.
* Extract variables and style tokens from selected nodes (colors, spacing, typography).
* Map Figma components to real code components in your repo (Code Connect).
* Capture high-fidelity images of selections for reference or docs.
* Provide your agents with **design system rules** so generated code matches your stack.

## Tools provided

### **get\_code**

Generates code for your Figma selection. Default output is **React + Tailwind**, but the output framework and libraries can be customized through prompts.

* Examples:
  * "Generate my Figma selection in Vue."
  * "Generate my Figma selection in plain HTML + CSS."
  * "Generate my Figma selection in iOS."
  * "Generate my Figma selection using components from src/ui."

***

### **get\_variable\_defs**

Returns variables and styles (design tokens) used in your selection — including **colors, spacing, typography**.

* Examples:
  * "Get the variables used in my Figma selection."
  * "List the color and spacing variables in this frame."

***

### **get\_code\_connect\_map**

Retrieves a mapping between Figma node IDs and their corresponding code components in your codebase.

* Output includes:
  * `codeConnectSrc`: file path or URL of the component in your repo.
  * `codeConnectName`: the component's name in your codebase.
* Enables **direct mapping** between Figma elements and real code components, so agents use the right building blocks.

***

### **get\_image**

Captures a screenshot of your selection to preserve **layout fidelity**.

* Notes: Enable via *Preferences → Dev Mode MCP Server Settings → Enable tool get\_image*.
* Recommended to keep this on unless managing token limits.

***

### **create\_design\_system\_rules**

Generates a **rule file** to guide agents in producing high-quality code aligned with your **design system and tech stack**.

* After creating the file, save it in your repo's `rules/` or `instructions/` directory so the MCP client can reference it for future generations.

## Notes

* The Dev Mode MCP Server is in open beta.
* Available on a Dev or Full seat on the Professional, Organization, or Enterprise plans.
* You must use a code editor or application that supports MCP Servers (i.e. VS Code, Cursor, Windsurf, Claude Code).
* You can only use the Dev Mode MCP server from the Figma desktop app.