download_assets
Downloads exports and original source images
LABSCO SUMMARY
Design-to-code in both directions: read the file, write back to it.
Reading a selection's variables, layout and metadata is what most people come for, and Code Connect is what keeps the generated code on your real components rather than a lookalike. The return trip is the newer half — an agent can build frames, components and variables inside the file, which is why Figma ships skills to steer that sequence.
What it is
Figma's own server, hosted at its remote endpoint, with a desktop version for organizations that need one. It reads design context from a selection and writes native Figma content back to the canvas.
What you get
- Design context for a selection: the variables and styles it uses, layout data, and a sparse metadata view with layer ids, names, types, positions and sizes
- Code generated from a selected frame, with Code Connect mappings keeping it on your real components
- Writes to canvas — frames, components, variables and auto layout in Design files; stickies, sections, connectors and shapes in FigJam
- FigJam diagrams generated from Mermaid syntax, and FigJam boards converted to XML
- Screenshots of a selection, and downloads of up to 20 nodes as PNG, JPG, SVG or PDF plus the original uploaded source images
- Motion context — keyframe tracks, easing curves and ready-to-use CSS snippets — along with shader effects and fills
Requirements
A Figma account authorized in the client. Only clients listed in Figma's MCP catalog can connect — VS Code, Cursor, Claude Code, Codex and Xcode among them. Write-to-canvas work also wants Figma's skills installed in the client, so the agent follows the right sequence when it creates or updates content.
Setup effort
One command — claude mcp add --transport http figma https://mcp.figma.com/mcp
USE CASES
01
Implementing a screen someone just designed
Select the frame, pull its variables and layout, and generate code that reuses your mapped components.
02
Getting exact tokens instead of eyeballing them
Read the variables and styles used in the selection straight into the editor.
03
Turning an architecture sketch into a FigJam board
Hand it Mermaid syntax and have the diagram created in a new or existing file.
04
Exporting the assets a build needs
Download the selected nodes as SVG or PNG, or pull the original uploaded images without re-rendering them.
29 tools
Listed in project docs. Your client may show a different list.
get_code_connect_map
Retrieves node ID to code component mappings
get_code_connect_suggestions
Suggests mappings (Figma-prompted)
get_context_for_code_connect
Component metadata for templates (Figma-prompted)
get_design_context
Design context for a layer or selection
get_figjam
Converts FigJam diagrams to XML
get_generative_plugin
Reads a generative plugin's source manifest
get_libraries
Lists subscribed and available libraries
get_metadata
Sparse XML outline of a selection
get_motion_context
Keyframe animation data and code snippets
get_screenshot
Screenshot of a selection
get_shader
Reads a shader effect or fill's source manifest
get_variable_defs
Variables and styles used in a selection
list_file_shaders
Lists shaders used in a specific file
list_generative_plugins
Lists generative plugins in your library
list_shaders
Lists shader effects and fills in your library
search_design_system
Searches libraries for components, variables, styles
whoami
Identity and plans of the authenticated user
add_code_connect_map
Maps a Figma node ID to a code component
create_generative_plugin
Creates a generative plugin scaffold
create_new_file
Creates a blank Design, FigJam, or Slides file
create_shader
Creates a shader fill or effect scaffold
generate_diagram
Generates a FigJam diagram from Mermaid
generate_figma_design
Generates design layers from interfaces
send_code_connect_mappings
Confirms suggested mappings (Figma-prompted)
update_generative_plugin
Replaces a generative plugin's code.ts or ui.html
update_shader
Replaces a shader's main.ts
upload_assets
Uploads images into a Figma file
use_figma
General-purpose create, edit, and inspect
BEFORE YOU INSTALL
What to know first
Tools you get
29 tools named in the project's documentation. Figma lists six more Weave tools separately (weave_list_tools, weave_get_tool_inputs, weave_upload_asset, weave_run_tool, weave_get_tool_run_output, weave_cancel_tool_run); running them needs a paid standalone Figma Weave account.
Requires
A client listed in Figma's MCP Catalog (VS Code, Cursor, Claude Code, Codex and Xcode among them)
INSTALLATION
Connect your client
Server setup
claude mcp add
TERMINAL
claude mcp add --transport http figma https://mcp.figma.com/mcpHosted endpoint
ENDPOINT URL
https://mcp.figma.com/mcpAdd this hosted endpoint to your MCP client.
MCP Clients
Claude Code
CLAUDE CODE · TERMINAL
claude plugin install figma@claude-plugins-officialCodex
CODEX · TERMINAL
codex mcp add figma --url https://mcp.figma.com/mcpCursor
CURSOR · JSON
{
"mcpServers": {
"figma": {
"url": "https://mcp.figma.com/mcp"
}
}
}VS Code
VS CODE · JSON
{
"servers": {
"figma": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}Gemini CLI
GEMINI CLI · TERMINAL
gemini extensions install https://github.com/figma/mcp-server-guide
