Figma MCP Server

What it does

Brings design context from your Figma files into AI coding tools so they can generate code that matches your designs. The remote server can also write to the canvas (in beta), creating and editing content in your Figma files.

Who it's for

Designers and frontend devs turning Figma frames into real UI.

How to set it up

1. Add the remote server to a supported client (Cursor, VS Code, Claude Code, Codex and others). Cursor config:

   jsonCopy

   {
     "mcpServers": {
       "figma": {
         "url": "https://mcp.figma.com/mcp"
       }
     }
   }

2. Claude Code:

   bashCopy

   claude mcp add --transport http figma https://mcp.figma.com/mcp

3. Sign in through Figma's OAuth flow.

4. Copy a link to a frame or layer in Figma and paste it into your prompt.

5. Writing to the canvas is in beta and needs edit access to the file. Test on a duplicate file first.

Check the official docs for the latest steps.

Example prompts

Implement this Figma frame as a React component with Tailwind: <link>

List the colors and text styles used in this design.

Compare my current page with this Figma frame and fix differences.

Demo