How to set up Figma Console MCP to bring screens built in Claude Code into Figma

Figma Console MCP is an open-source MCP server that connects AI tools like Claude Code to Figma. It reads Figma data and can also create and edit frames, components and variables. A design workflow that passed 500 likes on X on October 17 uses it like this: build the real screens in Claude Code first, then pull the key interface decisions and components back into Figma through this MCP.

1. Create a Figma personal access token with these scopes: File content (Read), File versions (Read), Variables (Read), Comments (Read and write). The token starts with figd_ and is shown only once, so copy it right away.

2. Register the server in Claude Code. You need Node.js 18 or later.

claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest

1. Connect the Desktop Bridge plugin in the Figma desktop app; the web app won't work. Open a file, go to Plugins → Development → Import plugin from manifest..., and pick ~/.figma-console-mcp/plugin/manifest.json. The MCP server creates that file on first start. When you run the plugin, it scans ports 9223–9232 and connects to the server on its own.

2. Restart Claude Code and check the connection.

Check Figma status

Once connected, ask for something like "Create a simple frame with a blue background" to confirm a frame really appears in Figma. From then on, ask Claude Code to create the main components or design tokens of the screens it built.

The remote SSE setup is read-only and can't write to Figma. For write access, run it locally with npx as above.