Figma MCP Server released, designers can quickly generate code

Framelink is a Model Context Protocol (MCP) Server that enables AI coding tools such as Cursor, Windsurf, Cline, etc. to directly access your Figma design file data, enabling these tools to convert designs into code more accurately and efficiently.

How it works

Framelink's workflow is simple and intuitive:

1. Open your IDE chat interface (such as Cursor's agent mode)

2. Paste the link of the Figma file, artboard or component

3. Ask the AI ​​assistant to implement the design based on the Figma file

4. AI will fetch relevant metadata from Figma and use it to write code

When Cursor has access to Figma design data, it can more accurately generate design code in one go, much more efficiently than simply pasting a screenshot.

Designed for AI coding tools like Cursor, the Framelink MCP server simplifies and translates the data after getting responses from the Figma API, providing only the most relevant layout and style information to the model. This approach of reducing contextual information can make AI more accurate and responses more relevant.

Quick Start

To start using Framelink, you need to add the following settings to your configuration file:

MacOS / Linux

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

Windows

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

NOTE: You will need to create a Figma access token to use this server.

Framelink Figma MCP Server is revolutionizing the developer workflow by providing intelligent access to design data. Both front-end developers and full-stack engineers can benefit from this tool, greatly reducing the time and effort from design to implementation.

Here are some usage videos