SkillFoxx

Type a name, a task or a service

Figma MCP Server

Figma's official MCP server: code from a selected frame, design system variables and components, and writing designs to the canvas

MCP serverEditors’ pickMedium risk

figma/mcp-server-guideAuthor: Figma

Install

claude plugin install figma@claude-plugins-official

Plugin with skills and server config.

This is third-party code. Review the repository files before installing.

What it does

The repository holds the guide to Figma's official MCP server, a Gemini CLI extension and standalone skills. Given a link to a frame or layer, the agent gets design context: variables, components, layout and assets, and then writes code. With Code Connect the generated code reuses the project's real components. The remote server can create and edit frames, components, variables and auto layout in Figma files. A best practices section explains how to structure files for cleaner code.

Who it is for. For frontend developers and designers who move Figma designs into code and back with an agent.

Good fit when

  • You need to build a screen from a specific Figma frame
  • You need design system tokens and components pulled into the project
  • You want the agent to build or update a design directly in Figma

Not a fit when

  • You lack a paid Dev or Full seat: Starter and View or Collab seats get only a few calls a month
  • Designs are not in Figma

Example request

Implement this screen from the Figma frame link using our components from src/components

Limitations

Requires a Figma account with OAuth login. Read tools are rate limited, and the free plan and View or Collab seats get very few calls. Writing to the canvas is free only during the beta, and the skills are in beta too. Figma restricted service for Russian users, so access from Russia without a VPN is not guaranteed.

How to disable. In Claude Code run claude mcp remove figma or uninstall the figma plugin. In Gemini CLI: gemini extensions uninstall figma. In other clients delete the figma block from the MCP config.

MCP

Transport
http
Authentication
OAuth

Security check

  • Can modify Figma file contents
  • Gets account access via OAuth

README in short

The README opens with per-plan call limits and a feature list. It then gives instructions for VS Code, Cursor, Claude Code, Gemini CLI and other Streamable HTTP clients. It explains how to pass a design link to the agent, which skills live in the repository, and includes a long section of advice on file structure and prompting.

FAQ

How do I point the agent to a design?

Copy a link to a frame or layer in Figma and paste it into the request. The agent does not open the page; it extracts the node-id.

Why the plugin rather than manual setup?

Besides server settings, the plugin installs skills for implementing designs, Code Connect and design system rules.

Editors’ pick

Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server

PluginMedium risk142.3K
Editors’ pick

Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules

SkillMedium risk123.8K
Editors’ pick

A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells

SkillHigh risk68.1K
Editors’ pick

Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys

SkillMedium risk31.2K