MCP SERVERGive your coding assistant Figma layouts, styles and image assets to help turn designs into code.
Figma Context MCP connects AI coding assistants to Figma design data. It simplifies layouts, styles and text, infers Flexbox or Grid from positioned elements, and exports images and icons. This gives the assistant structured design information for implementation, component analysis and style extraction.
The server runs on your computer and needs a Figma account with API access and a personal access token. Its tools read Figma files and save exported assets locally; they do not edit the designs in Figma. Design responses are cached for 24 hours, so recent changes may not appear immediately.
When implementing a screen, a screenshot leaves layout and style details to interpretation. Give the assistant a Figma file or node link so it can retrieve structured layout, CSS and text information to guide the code it writes.
Toolsget_
When a screen needs the images and icons used in the design, export them from Figma to a local directory as SVG or PNG files. The download tool handles rendered nodes and image fills, giving you assets to use in the implementation.
Toolsdownload_
Before coding a design with repeated elements, ask the assistant to examine its component structure and suggest what could be reused. The built-in component-analysis prompt and component-list resource support this review, helping you plan component boundaries.
Toolsget_
When translating a design’s visual styles into code, use its style data as the starting point. The built-in style-extraction prompt and design-token resource help the assistant identify tokens for your implementation.
download_figma_imagesDownloads SVG and PNG assets from a Figma file, including rendered nodes and image fills, to a local directory. The directory is created if needed, and images are cached locally to avoid repeated downloads.
get_figma_dataRetrieves simplified layout data, CSS styles, text content and export information from a Figma file or a selected node to guide implementation. Results are cached for 24 hours, so recent design changes may not appear immediately.
You’ll need Node.js 18.0.0 or later and a Figma personal access token to connect the server to your AI tool.
You need Node.js 18.0.0 or later, npx on PATH, and a Figma account with API access.
In Figma's file browser, open the account menu → Settings → Security. Under Personal access tokens, select Generate new token, enter a name, choose scopes, and press Return or Enter. Copy the token immediately; it is shown only once.
Add the Figma entry below to mcpServers in your Cursor configuration, keeping any existing server entries. The file shown applies across projects; for one project, use .cursor/mcp.json in that project instead.
Replace your-figma-api-key with your Figma personal access token in the env object, then save the file.
~/.cursor/mcp.jsonall projectsJSON{
"mcpServers": {
"Figma": {
"command": "npx",
"args": ["-y", "@yhy2001/figma-mcp-server", "--stdio"],
"env": {
"FIGMA_API_KEY": "your-figma-api-key"
}
}
}
}Check the result
Check that the Figma tools appear under Available Tools. You can enable the server from Customize in the sidebar and ask Cursor for a tool by name.
Figma Context MCP setupCursor MCP configuration and toolsCreate a Figma personal access token