Figma MCP Downloader

A CLI tool for AI agents to save Figma MCP tool results to local files, enabling design-to-code workflows.

What This Skill Does

This skill enables you to extract design information from Figma using the Model Context Protocol (MCP) and save it to local files. You can retrieve:

The tool connects to Figma Desktop's local MCP server and saves results in formats ready for development.

Prerequisites

Installation

The package is available globally via npm. Install or run directly:

```bash

Install globally

npm install -g figma-mcp-downloader

Or run with npx (no installation needed)

npx figma-mcp-downloader <subcommand> [options]

```

Instructions for AI Agents

Step 1: Verify Prerequisites

Before running any commands, ensure:

1. Figma Desktop app is running on the user's machine

2. You have the node ID for the Figma layer/component to extract

3. You know the target output file path

Step 2: Choose the Right Subcommand

**Use `get_design_context` when:**

**Use `get_metadata` when:**

Step 3: Execute the Command

#### For Design Context (JSX Code)

```bash

npx figma-mcp-downloader get_design_context <output-file> -i "<node-id>" -c [options]

```

**Required arguments:**

**Important options:**

**Additional parameters (less common):**

#### For Metadata (XML)

```bash

npx figma-mcp-downloader get_metadata <output-file> -i "<node-id>" -c [options]

```

Same options as `get_design_context` but outputs XML instead of JSX.

Step 4: Handle the Output

**With `-c` flag (recommended):**

**Without `-c` flag:**

Step 5: Configure Environment (if needed)

If the Figma MCP server runs on a non-default port:

```bash

Set custom MCP URL

export FIGMA_MCP_URL="http://localhost:4000/mcp"

Then run command

npx figma-mcp-downloader get_design_context output.jsx -i "123:456" -c

```

Usage Examples

Example 1: Extract React Component with TypeScript

```bash

npx figma-mcp-downloader get_design_context src/components/Button.tsx \

-i "123:456" \

-c \

-l typescript \

-f react,tailwindcss

```

**When to use:** Converting a Figma button design to a reusable React component.

Example 2: Extract Full Page with Asset Downloads

```bash

npx figma-mcp-downloader get_design_context src/pages/Hero.jsx \

-i "789:012" \

-c \

-l javascript \

-f react,tailwindcss \

-d /home/user/my-project/public/images

```

**When to use:** Converting a hero section with images, ensuring assets are saved locally.

Example 3: Get Design Metadata

```bash

npx figma-mcp-downloader get_metadata design-structure.xml \

-i "345:678" \

-c \

-l typescript \

-f vue

```

**When to use:** Analyzing Figma layer structure before implementing in Vue.

Example 4: Full JSON Response (with AI guidance)

```bash

npx figma-mcp-downloader get_design_context design_context.json \

-i "123:456" \

-l html,css,javascript \

-f vue

```

**When to use:** Need both the code AND supplementary implementation guidance from the MCP tool.

Important Notes

1. **Always use `-c` flag** for production code extraction (unless you specifically need the full JSON response)

2. **Node IDs** must be quoted: `-i "123:456"` not `-i 123:456`

3. **Asset downloads** require absolute paths in `-d` option

4. **Framework detection**: Specify `-l` and `-f` when possible for better code generation, but omit if unsure

5. **Local server only**: This tool connects to Figma Desktop's local MCP server, not Figma's web API

Constraints

Troubleshooting

**If connection fails:**

1. Verify Figma Desktop is running

2. Check if MCP server is accessible at `http://127.0.0.1:3845/mcp`

3. Try setting `FIGMA_MCP_URL` environment variable explicitly

**If output is unexpected:**