yuichiroharai/figma-mcp-downloader

Overview

This skill is a CLI that downloads complete Figma MCP design context and metadata into local files. It guarantees full, consistent output so downstream tools never suffer from MCP context limits. Use it as the first step before any other Figma-related automation or code generation.

How this skill works

The CLI connects to the local MCP server started by the Figma Desktop app and runs the official MCP operations (get_design_context, get_metadata) with safeguards to ensure complete payloads. It writes results to local files in multiple formats (JSON, JSX, XML, etc.), optionally downloading image/vector/video assets to a target folder. Designed to be used before other Figma skills, it prevents partial or truncated MCP responses.

When to use it

• Before running any automated workflow that depends on Figma context or metadata
• When you need 100% reliable MCP outputs for code generation or implementation tasks
• When saving design context or metadata to version control or project folders
• When you require local copies of image, vector, or video assets referenced by designs
• When integrating with other Figma skills (always run this first)

Best practices

• Always run with the Figma Desktop app open so the local MCP server is available
• Run this CLI first, then consume the saved files in subsequent processes to avoid incomplete MCP calls
• Specify explicit output formats and languages (e.g., jsx, json, xml, typescript) to match your toolchain
• Use the -d option and set Figma Desktop Image source to Download when you need asset files locally
• Store outputs in a dedicated folder and add to version control for reproducible builds

Example use cases

• Save complete design context as JSX for a frontend implementation pipeline (react + tailwindcss)
• Export metadata as XML or JSON for documentation and QA workflows
• Download design context with linked assets into a project public/images folder for local development
• Preload guaranteed-complete MCP outputs before running an automated implement-design or codegen skill
• Generate AI-guided transformations using the saved JSON context as input