Figma Context (Framelink)
About
Integrates with Figma's design platform API to enable AI-driven design operations, asset management, and team collaboration within Figma workflows.
Details
- Repository
- GLips/Figma-Context-MCP
- Transport
- SSE
- License
- MIT
Explore
- Specifically designed for use with Cursor.
- Simplifies Figma API responses for AI accuracy.
- Works seamlessly with any framework or stack.
- One-shot design implementation from Figma links.
- Open-source under the MIT license.
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
Figma Context (Framelink)Command (node, npx, python, etc.)npxArguments-
Argument 1
-y -
Argument 2
figma-developer-mcp -
Argument 3
--figma-api-key=YOUR-KEY -
Argument 4
--stdio
Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
-
Argument 1
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
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.
get_figma_data
When the nodeId cannot be obtained, obtain the layout information about the entire Figma file
download_figma_images
Download SVG and PNG images used in a Figma file based on the IDs of image or icon nodes
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"figma context (framelink)": {
"env": {},
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR-KEY",
"--stdio"
],
"command": "npx"
}
}
}Linux
{
"env": [],
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR-KEY",
"--stdio"
],
"command": "npx"
}Macos
{
"env": [],
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR-KEY",
"--stdio"
],
"command": "npx"
}Windows
{
"env": [],
"args": [
"/c",
"npx",
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR-KEY",
"--stdio"
],
"command": "cmd"
}<a href="https://www.framelink.ai/?utm_source=github&utm_medium=referral&utm_campaign=readme" target="_blank" rel="noopener">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://www.framelink.ai/github/HeaderDark.png" />
</picture>
</a>
<div align="center">
<h1>Framelink MCP for Figma</h1>
<h3>Give your coding agent access to your Figma data.<br/>Implement designs in any framework in one-shot.</h3>
<a href="https://npmcharts.com/compare/figma-developer-mcp?interval=30">
</a>
<a href="https://github.com/GLips/Figma-Context-MCP/blob/main/LICENSE">
</a>
<a href="https://framelink.ai/discord">
</a>
<br />
<a href="https://twitter.com/glipsman">
</a>
</div>
<br/>
Give Cursor and other AI-powered coding tools access to your Figma files with this Model Context Protocol server.
When Cursor has access to Figma design data, it's way better at one-shotting designs accurately than alternative approaches like pasting screenshots.
<h3><a href="https://www.framelink.ai/docs/quickstart?utm_source=github&utm_medium=referral&utm_campaign=readme">See quickstart instructions →</a></h3>
Demo
Watch a demo of building a UI in Cursor with Figma design data
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, 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.
MacOS / Linux
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
Windows
{
"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.
Star History
<a href="https://star-history.com/#GLips/Figma-Context-MCP"></a>
Learn More
The Framelink MCP for Figma is simple but powerful. Get the most out of it by learning more at the Framelink site.
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
