SkillFoxx

Type a name, a task or a service

Framelink MCP for Figma

An MCP server that gives the agent simplified Figma layout data from a link so it can build the screen more accurately than from a screenshot

MCP serverEditors’ pickMedium risk

glips/figma-context-mcpAuthor: Graham Lipsman

Install

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

For macOS and Linux. On Windows use command cmd with args /c npx followed by the same.

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

What it does

The server fetches data for a file, frame or group through the Figma API using a link you paste into the agent chat. Before passing it to the model it strips noise and keeps only layout and styling information. Less context helps the agent reproduce the design in code more accurately in any framework. It was built with Cursor in mind but works with any MCP client.

Who it is for. For frontend developers and designers who build interfaces from Figma designs with an agent.

Good fit when

  • You need to build a screen or component from a Figma frame link
  • Screenshots give inaccurate spacing and sizes
  • You lack access to Figma's official Dev Mode MCP

Not a fit when

  • You need to edit designs in Figma, the server only reads
  • The design does not live in Figma

Example request

Build this screen in React and Tailwind from the design: https://www.figma.com/design/...

Limitations

Requires a Figma personal access token. Figma and its API are restricted in Russia, so it may not work without a VPN. The server returns simplified data, so complex effects and unusual layers may be lost.

How to disable. Remove the Framelink MCP for Figma entry from the client's MCP config and revoke the token in Figma settings.

MCP

Transport
stdio
Authentication
API key
Environment variables
FIGMA_API_KEY
required, secret		Figma personal access token, can also be passed via --figma-api-key
PORT
Port when not running in stdio mode

Security check

  • Uses a Figma token with access to your files
  • Calls an external API

README in short

The README briefly explains the flow: paste a Figma link into the agent chat and ask it to implement the design. The server simplifies Figma API responses so the model gets only what matters. It gives npx JSON configs for macOS, Linux and Windows, with details on the Framelink site. MIT licensed.

FAQ

Where do I get the key?

Create a personal access token in your Figma account settings; the README links to instructions.

Can I avoid putting the key in args?

Yes, the README allows passing FIGMA_API_KEY via the env field.

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 risk68K
Editors’ pick

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

SkillMedium risk31.2K
Editors’ pick

Three skill plugins for Google Stitch: screen generation, code to design and React builds from mockups

PluginMedium risk8.3K