developer-toolsdesign

Figma Context▌

by GLips

Unlock seamless Figma to code: streamline Figma to HTML with Framelink MCP Server for fast, accurate design-to-code work

Unlock seamless design-to-code with Framelink Figma MCP Server, letting AI coding tools access your Figma files directly. It simplifies Figma API data to supply only relevant design layouts and styles, boosting AI accuracy in implementing designs across frameworks. Specifically built for use with tools like Cursor, it transforms design metadata into precise code in one step. This server streamlines the workflow by providing clean, focused context, enabling faster and more reliable design-driven development. Enjoy a powerful bridge between design and coding that enhances productivity and code quality with minimal fuss.

github stars

★ 13.5K

GitHub Website npm

Better than screenshot-based approachesBuilt specifically for Cursor integrationOne-shot design implementation

best for

/ Frontend developers implementing Figma designs
/ Teams using Cursor or similar AI coding tools
/ Design-to-code workflows requiring high accuracy

capabilities

/ Access Figma file data through AI coding tools
/ Extract design layouts and styles from Figma
/ Generate code from Figma designs in any framework
/ Simplify Figma API data for AI consumption

what it does

Connects AI coding tools like Cursor directly to your Figma files, providing clean design data that enables accurate one-shot code generation from designs.

about

Figma Context is a community-built MCP server published by GLips that provides AI assistants with tools and capabilities via the Model Context Protocol. Unlock seamless Figma to code: streamline Figma to HTML with Framelink MCP Server for fast, accurate design-to-code work It is categorized under developer tools, design.

how to install

You can install Figma Context in your AI client of choice. Use the install panel on this page to get one-click setup for Cursor, Claude Desktop, VS Code, and other MCP-compatible clients. This server runs locally on your machine via the stdio transport.

license

MIT

Figma Context is released under the MIT license. This is a permissive open-source license, meaning you can freely use, modify, and distribute the software.

readme

Framelink MCP for Figma

Give your coding agent access to your Figma data.
Implement designs in any framework in one-shot.

Give [Cursor](https://cursor.sh/) and other AI-powered coding tools access to your Figma files with this [Model Context Protocol](https://modelcontextprotocol.io/introduction) server. When Cursor has access to Figma design data, it's **way** better at one-shotting designs accurately than alternative approaches like pasting screenshots.

See quickstart instructions →

## Demo [Watch a demo of building a UI in Cursor with Figma design data](https://youtu.be/6G9yb-LrEqg) [![Watch the video](https://img.youtube.com/vi/6G9yb-LrEqg/maxresdefault.jpg)](https://youtu.be/6G9yb-LrEqg) ## How it works 1. Open your IDE's chat (e.g. agent mode in Cursor). 2. Paste a link to a Figma file, frame, or group. 3. Ask Cursor to do something with the Figma file—e.g. implement the design. 4. Cursor will fetch the relevant metadata from Figma and use it to write your code. This MCP server is specifically designed for use with Cursor. Before responding with context from the [Figma API](https://www.figma.com/developers/api), it simplifies and translates the response so only the most relevant layout and styling information is provided to the model. Reducing the amount of context provided to the model helps make the AI more accurate and the responses more relevant. ## Getting Started Many code editors and other AI clients use a configuration file to manage MCP servers. The `figma-developer-mcp` server can be configured by adding the following to your configuration file. > NOTE: You will need to create a Figma access token to use this server. Instructions on how to create a Figma API access token can be found [here](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens). ### MacOS / Linux ```json { "mcpServers": { "Framelink MCP for Figma": { "command": "npx", "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"] } } } ``` ### Windows ```json { "mcpServers": { "Framelink MCP for Figma": { "command": "cmd", "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"] } } } ``` Or you can set `FIGMA_API_KEY` and `PORT` in the `env` field. If you need more information on how to configure the Framelink MCP for Figma, see the [Framelink docs](https://www.framelink.ai/docs/quickstart?utm_source=github&utm_medium=referral&utm_campaign=readme). ## Star History

## Learn More The Framelink MCP for Figma is simple but powerful. Get the most out of it by learning more at the [Framelink](https://framelink.ai?utm_source=github&utm_medium=referral&utm_campaign=readme) site.