download_figma_images
Download SVG and PNG images used in a Figma file based on the IDs of image or icon nodes. Images will be saved relative to the server's image directory.
LABSCO SUMMARY
A design becomes code from the design's own numbers.
get_figma_data returns the structure rather than a picture of it, so spacing, hierarchy and component names arrive as values an agent can implement against. download_figma_images then fetches the assets that structure points at — the part no screenshot can give you.
What it is
Two calls against a Figma file: one returns its layout, content, visuals and component information, optionally narrowed to a node and a depth; the other downloads the images and icons that file uses.
What you get
- A Figma file's data by file key — layout, content, visuals and components — or one node of it, to the depth you ask for
- The image and icon nodes downloaded as SVG or PNG to a local path, with the PNG scale set on the call
Requirements
npx on your PATH and a Figma API key, passed on the launch line as --figma-api-key. You also need the file key of the file, and node IDs when you want part of it rather than all of it.
Setup effort
One command plus a key — npx -y figma-developer-mcp --figma-api-key=<YOUR_FIGMA_API_KEY> --stdio, then supply credentials
USE CASES
01
Turning a Figma frame into components
Pull the frame's data with its component information and build against the real hierarchy, rather than guessing structure from an image.
02
Getting the icons out of a design
Download the icon and image nodes as SVG or PNG straight into the project directory, at the scale the build expects.
03
Checking an implementation against the design's real spacing
Fetch the node in question and compare its values with what shipped. The disagreement stops being a matter of opinion.
04
Working on one screen of a very large file
Name the node and cap the depth so what comes back is the screen you are building, not the whole document.
2 tools
Counted once with only startup setup. Other versions, modes or optional credentials may expose a different list.
get_figma_data
Get comprehensive Figma file data including layout, content, visuals, and component information
BEFORE YOU INSTALL
What to know first
Tools you get
2 tools when we connected. Nothing is behind a flag. download_figma_images saves image assets to your disk; get_figma_data only reads from Figma.
Requires
- npx on PATH
- A Figma personal access token (the --figma-api-key argument, or FIGMA_API_KEY in the env field)
Where it runs
Both documented setups run the server on your machine.
CONTEXT COST
Light Standing cost
Rated by the size of the 2 tool definitions that ride along on every turn, not by how many there are
INSTALLATION
Connect your client
Server setup
TERMINAL
npx -y figma-developer-mcp --figma-api-key=<YOUR_FIGMA_API_KEY> --stdioMCP Clients
Cursor — macOS / Linux
CURSOR — MACOS / LINUX · JSON
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=<YOUR_FIGMA_API_KEY>",
"--stdio"
]
}
}
}<YOUR_FIGMA_API_KEY> is your Figma personal access token (create one as described at https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens). The key is passed inside the block by the --figma-api-key flag; alternatively, drop the flag and set FIGMA_API_KEY in the entry's env field.
Cursor — Windows
CURSOR — WINDOWS · JSON
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"figma-developer-mcp",
"--figma-api-key=<YOUR_FIGMA_API_KEY>",
"--stdio"
]
}
}
}<YOUR_FIGMA_API_KEY> is your Figma personal access token (create one as described at https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens). The key is passed inside the block by the --figma-api-key flag; alternatively, drop the flag and set FIGMA_API_KEY in the entry's env field.
