extract-figma-assets

name

extract-figma-assets

description

Use when the user wants to extract images, assets, or design context from a Figma selection — e.g. "extract images from my current Figma selection", "pull the assets out of this Figma frame", "download the images from this Figma design", "grab the design context for this node". Connects directly to Figma desktop's local Dev Mode MCP server, downloads every referenced image (PNG/JPG/GIF/WEBP/SVG) plus a screenshot, and saves the design context to a local folder.

Extract images & design context from Figma

This skill pulls the assets and design context for a Figma selection out of Figma desktop's local Dev Mode MCP server (the HTTP server at http://127.0.0.1:3845/mcp) and writes them to a folder on disk.

A bundled, zero-dependency Node script (scripts/extract-figma-assets.mjs) owns the whole flow: it opens an MCP session, calls get_design_context, get_variable_defs, get_metadata, and get_screenshot, parses the const imgFoo = "http://localhost:3845/assets/<hash>.<ext>" declarations out of the returned code, and downloads each asset. Do not reimplement any of this by hand or by calling the MCP tools yourself — just run the script and report what it produced.

Prerequisites

• Figma desktop must be running with Dev Mode MCP enabled (Figma → Preferences → "Enable Dev Mode MCP server"), and
• the user must have selected the frame/node they want extracted (unless they give you an explicit node id or Figma URL).
• Node.js 20+ must be on PATH.

If the script reports Nothing is selected, tell the user to select a frame in Figma desktop (or pass a node id / URL) and try again — don't retry blindly.

How to run it

Run the script with Bash. Use ${CLAUDE_PLUGIN_ROOT} so the path resolves regardless of where the plugin is installed:

node "${CLAUDE_PLUGIN_ROOT}/scripts/extract-figma-assets.mjs" --out <dir> --json

Decide the arguments from what the user asked:

• Current selection (default): pass no --node. This is the right choice for "extract images from my current selection".
• Specific node: if the user pastes a Figma URL (e.g. one containing ?node-id=1-2) or a node id like 1:23, pass it with --node <id|url>.
• Output directory: default to ./figma-extract in the current working directory. If the user names a destination (e.g. "into ./assets"), pass it via --out. Mention the resolved path in your summary.
• Design context: by default the script saves images only (assets + screenshot). Only pass --context (alias --full) if the user also wants the design-context files (code.tsx / variables.json / metadata.xml) — e.g. they mention variables, tokens, the generated code, or "everything".
• Always pass --json so you get a machine-readable manifest on stdout to summarise from. Progress lines go to stderr.

Other flags: --no-screenshot (skip the screenshot), --url <mcpUrl> (override the MCP server URL — rarely needed).

What lands on disk

In the output directory:

• assets/ — every downloaded image, original filename preserved.
• assets/manifest.json — maps each constName from the design context to its downloaded filename, kind (raster | svg), source url, and relative path. This is the same JSON printed to stdout with --json.
• screenshot.png — a render of the selection (unless --no-screenshot).
• code.tsx, variables.json, metadata.xml — the design context, written only when --context / --full is passed. Figma's trailing LLM-instruction text is stripped from code.tsx and metadata.xml.

Note: the script always calls get_design_context internally regardless of this flag — that response is where the image URLs come from — but it only writes those files when asked.

Reporting back

Parse the --json manifest and give the user a short summary:

• how many assets were downloaded (and the raster/svg split), plus any cached or failed counts;
• the absolute output path;
• the list of image filenames (or a count if there are many).

If counts.referenced is 0, say plainly that the selection referenced no image assets — the design may use only vectors/shapes drawn inline rather than placed images. The screenshot is still saved (and the design context too, if --context was passed), so point the user at those.

The script exits non-zero only when one or more downloads failed; a clean run with zero referenced assets is success, not an error.