Server facts
Framelink MCP for Figma
Project
- Author
- GLips
- Repository
- github.com/GLips/Figma-Context-MCP
- Website
- www.framelink.ai/
- License
- MIT
- Category
- Design & Creative
Tech
- Runtime / language
- nodeTypeScript
- Transports
- stdio
- Remote available
- No
- Authentication
- Not specified
Activity
- GitHub stars
- 15,999
- Last commit
- Data as of
Tags
- Cursor
- Design Assets
- Design Context
- Figma
- Typescript
Overview
A screenshot leaves a coding assistant to interpret the visual result; Framelink instead retrieves metadata behind the design. The server processes responses from Figma's API, narrowing the material to layout decisions and styling details useful during implementation. This filtering is central to the project's approach: the assistant receives a smaller design context rather than an unmodified API response. The README centers its examples on Cursor, although the configuration discussion also addresses other editors and assistant clients. A developer starts the interaction by sharing a design link in chat and requesting work based on it, such as building the corresponding interface. Links can identify a group, an individual frame, or the broader file.
The supplied inventory divides access into two operations. One retrieves design structure, including file-wide layout when a node identifier is missing. The other fetches image assets by their node identifiers, with SVG and PNG output described. Access depends on a personal Figma token, not just possession of the shared link. For local use, the README launches the figma-developer-mcp package with stdio enabled. It gives separate shell arrangements for Windows and Unix-like systems, and permits credentials through either an argument or an environment setting. Additional configuration guidance lives in the linked Framelink quickstart. Together, the metadata and asset paths address distinct parts of implementing a linked design.
Install & configure
Requirements
- Personal access token issued by Figma
- npx available to the client process
- Editor or assistant with MCP support
npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdioThe argument array reproduces the macOS/Linux README example, including its YOUR-KEY marker; substitute your token. Windows adds cmd /c around npx. As an alternative to the inline token, the README permits FIGMA_API_KEY in env and also mentions PORT.
Examples are translated from the published configuration. Supply your own credentials and verify requirements in the upstream README. Remote connectors are shown only where a supported configuration format is known.
Config file · macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Use Settings → Developer → Edit Config when available. Do not assume a Linux configuration path; check the client documentation for your platform. Remote servers use the app’s connector flow when supported, not the local stdio file shown here. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"Figma-Context-MCP": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR-KEY",
"--stdio"
],
"env": {}
}
}
}Config file · Project: .cursor/mcp.json
User: ~/.cursor/mcp.json
The project path is relative to the workspace root. The tilde denotes your user home directory. Use Cursor’s MCP settings to confirm which configuration and scope your installed version is reading. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"Figma-Context-MCP": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR-KEY",
"--stdio"
],
"env": {}
}
}
}Config file · Workspace: .vscode/mcp.json
For user scope, use the “MCP: Open User Configuration” command if available. Do not guess a user configuration path across operating systems, profiles, containers, or remote workspaces; check the client documentation. Merge this example with existing settings; do not overwrite unrelated servers.
{
"servers": {
"Figma-Context-MCP": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR-KEY",
"--stdio"
],
"env": {}
}
}
}Config file · macOS/Linux: ~/.codeium/windsurf/mcp_config.json
Windows: %USERPROFILE%\.codeium\windsurf\mcp_config.json
Open the MCP configuration through Windsurf’s settings when possible to confirm the active file. Paths can differ in managed or future releases; check the client documentation if this location is not present. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"Figma-Context-MCP": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR-KEY",
"--stdio"
],
"env": {}
}
}
}Config file · Project scope: .mcp.json at the repository root
The project file uses mcpServers. For user scope, use claude mcp add --scope user rather than assuming .mcp.json in your home directory is the user configuration. Check the client documentation for managed settings and storage details. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"Figma-Context-MCP": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR-KEY",
"--stdio"
],
"env": {}
}
}
}Examples are translated from the published configuration. Supply your own credentials and verify requirements in the upstream README. Remote connectors are shown only where a supported configuration format is known.
Tools
Source: repository tool metadata. Tool descriptions are a documented snapshot, not a live capability check.
| Tool | What it does |
|---|---|
| download_figma_images | Fetch design assets as PNG or SVG by specifying image or icon nodes. |
| get_figma_data | Inspect design layout; a missing node ID can be handled by retrieving file-wide information. |
Names, permissions, and defaults can change. Check the current upstream documentation before granting access.
Use cases
- Give an implementation request the layout metadata behind a shared design link.
- Inspect file-wide structure when the requested design has no known node identifier.
- Fetch icon or image nodes as assets for the interface being built.
- Use a Cursor chat to connect Figma styling decisions with application code.
Strengths
- Filters the API response before placing design details in the model's context.
- Pairs structural lookup with a separate route for retrieving visual assets.
- Shows native npx configuration alongside a Windows shell variant.
Limitations
- A personal Figma credential is necessary even when a design link is available.
- Cursor receives the detailed workflow treatment; other clients are discussed more generally.
Frequently asked questions
Independent listing, not an affiliation or security review. Grant the least access needed and verify the upstream instructions before running code.
