Install Framelink MCP for Figma

Pick your client, copy the command, done.

Manual setup required. The maintainer's config contains paths only you know - edit the placeholders below before adding it to Claude Code.

Run this once before adding it to Claude Code.

git clone https://github.com/nludd25/Figma-Context-MCP
cd Figma-Context-MCP

Then follow the repository README for any remaining dependency or build steps.

claude mcp add -e "FIGMA_API_KEY=${FIGMA_API_KEY}" figma-context -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

Replace any placeholder paths in the command with the real path on your machine.

Required:FIGMA_API_KEY+ 1 optional

Environment Variables

Set these before running Framelink MCP for Figma.

VariableDescriptionRequired

FIGMA_API_KEYPersonal access token for the Figma APIYes

PORTOptional port configurationNo

After setup, try these prompts with your AI agent:

→Implement the design from this Figma link: [URL]

→Fetch the layout and styling metadata for the frame at this URL and generate the corresponding React component.

→Analyze the design elements in this Figma group and suggest the best CSS grid structure to implement it.

→Compare the current implementation with the design specs provided in this Figma file.

Prerequisites & system requirements

An MCP-compatible client (Claude Code, Cursor, Windsurf, Claude Desktop, or Codex)
Node.js 18+ with npm/npx installed
FIGMA_API_KEY — Personal access token for the Figma API

Alternative installation methods

cmd /c npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

Save the docs, env vars, and workflow around Framelink MCP for Figma in Conare so Claude Code, Codex, and Cursor remember it next time.