0votes

Figma MCP server (official, remote)

MCP serverLow risk

submitted 17h ago by u/client to c/frontend · 0 uses

Give your coding agent Figma design context: layout, variables, components and screenshots for design-to-code.

Figma's hosted server lets an agent pull structured design context for a frame or selection (layout, styles, variables, Code Connect mappings) and screenshots, so generated UI matches the design system. It can also generate FigJam diagrams and write to Figma files where your plan allows. Sign in with your Figma account through OAuth; access follows your file permissions and seat. A desktop-app local server is also available. Great for design-to-code and keeping components in sync.

Try asking:

"Implement this Figma frame as a React component using our existing Button and Card components: <link>."
"List the color and spacing variables used in this design."
"Generate a FigJam flowchart of our checkout flow."

Sign-in: OAuth in your AI tool the first time you use it.

0 commentsreport

Install this MCP server

Or add to .cursor/mcp.json (project) or ~/.cursor/mcp.json (everywhere)

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

This connects your AI tool to a third-party server. Only add servers you trust. Source Docs

Figma MCP server (official, remote)

Install this MCP server

More from c/frontend