Figma

Figma's own MCP server brings your Figma files into your agent. Paste a link to a frame or layer and your agent gets its design context (layout, variables, components and a screenshot), so it can build the design in your codebase. With the remote server, your agent can also write back to Figma: create and edit frames, components, variables and auto layout using your design system, make FigJam diagrams, and turn the live UI of your web app into editable design layers. What you can do with it - Generate code from a frame, in React and Tailwind by default or in the framework you ask for - Pull the variables and styles a design uses, such as colours, spacing and typography - Reuse your real components through Code Connect mappings - Download the images and icons in a design - Create and edit designs, components, variants, variables and styles in Figma Design, FigJam and Figma Slides - Search your design libraries for components, variables and styles to reuse - Generate FigJam diagrams, such as flowcharts, Gantt charts and sequence diagrams, from a description or Mermaid - Send the live UI of your web app or site to Figma as design layers (in select agents) - Bring in context from FigJam boards, Figma Make files and Figma Specs How it connects Figma hosts the remote server at https://mcp.figma.com/mcp, and you sign in with your Figma account the first time you connect. Where your agent has one, Figma recommends its plugin: it adds the server along with Figma's skills for common workflows, such as implementing designs, connecting components with Code Connect and writing to the canvas. In Claude Code, run claude plugin install figma@claude-plugins-official; in Cursor, /add-plugin figma; Gemini CLI installs it as an extension with gemini extensions install https://github.com/figma/mcp-server-guide. Figma also offers a desktop server that runs through the Figma desktop app, meant for specific organization and enterprise needs; it needs a Dev or Full seat on a paid plan and has fewer tools. Good to know - It only reaches files your Figma account can already open. - Tools that read from Figma are rate-limited by plan and seat. View and Collab seats and the Starter plan get a small monthly allowance; Full and Dev seats on paid plans get daily and per-minute limits. - Writing to the canvas needs the remote server, and a Full seat to write outside your drafts. It's free during the beta and will become a usage-based paid feature. - Generating images uses Figma AI credits, and your agent asks before it does.

• “Implement the design at this Figma link using components from src/components/ui.”

  1. get_design_context
  2. get_screenshot
  Copy

• “Get the variable names and values used in this frame.”

  1. get_variable_defs
  Copy

• “Search for a button component in my design system.”

  1. search_design_system