The Problem

When using Figma's HTML to Design plugin, capturing interactive UI elements like dropdowns, tooltips, and menus is frustrating — they close the moment you click elsewhere.

The Solution

Figma HTML Capture Kit lets you:

1. Freeze the UI with Ctrl+Alt+1 — keeps dropdowns/tooltips open
2. Load Figma capture with Ctrl+Alt+2 — manually trigger when ready
3. Copy to clipboard — paste directly into Figma

⚠️ Important: This tool uses the "Copy instead" workflow. It does NOT auto-capture to Figma. You must click "Copy instead" in the Figma toolbar, then paste into Figma manually.

✅ No MCP or AI agent required — This is a standalone CLI tool that works directly in your browser. No Figma MCP server, no AI assistant integration needed.

Quick Start

# 1. Inject the capture script into your HTML
npx figma-capture --init

# 2. Start your dev server
npm run dev

# 3. Open capture URL (default captureId included)
npx figma-capture

Installation

npm install figma-html-capture-kit

Or run directly with npx:

npx figma-capture --init

How It Works

Step 1: Inject the Script

npx figma-capture --init

This adds the capture script to your index.html. Specify a different file with:

npx figma-capture --init --html=public/index.html

Step 2: Start Your Dev Server

npm run dev

Step 3: Run the Capture Command

npx figma-capture

This opens your app with the Figma capture hash. A default capture ID is included — no setup required.

Step 4: Capture Workflow

| Step | Action | |------|--------| | 1 | Open the dropdown/menu/tooltip you want to capture | | 2 | Press Ctrl+Alt+1 to freeze the UI (green border appears) | | 3 | Press Ctrl+Alt+2 to load Figma capture toolbar | | 4 | Click "Copy instead" → "Entire screen" or "Select element" | | 5 | Open Figma and paste (Ctrl+V / Cmd+V) |

💡 Tip: The dropdown stays open during capture because Ctrl+Alt+1 blocks all dismiss events!

Keyboard Shortcuts

| Key | Action | |-----|--------| | Ctrl+Alt+1 | Toggle Freeze — Blocks all clicks/hovers, keeps UI state frozen | | Ctrl+Alt+2 | Load Capture — Loads Figma capture toolbar (can reload after closing) |

Status Badge

A badge appears in the top-left corner showing current state:

| Badge | Meaning | |-------|---------| | 🟢 Ctrl+Alt+1 FROZEN | UI is frozen — dropdowns won't close | | ⚫ Ctrl+Alt+1 Off | Normal UI behavior | | 🟣 Ctrl+Alt+2 CAPTURE | Figma capture toolbar is loaded | | ⚫ Ctrl+Alt+2 Off | Capture not loaded |

CLI Reference

npx figma-capture [captureId] [options]

Commands

| Command | Description | |---------|-------------| | npx figma-capture | Open capture URL with default captureId | | npx figma-capture <id> | Open capture URL with custom captureId | | npx figma-capture --init | Inject capture script into HTML | | npx figma-capture --strip | Remove capture script from HTML |

Options

| Option | Default | Description | |--------|---------|-------------| | --port=<n> | 3000 | Local dev server port | | --delay=<ms> | 1000 | Capture delay in milliseconds | | --html=<path> | index.html | Path to HTML file |

Configuration

Environment Variables

Create a .env file in your project root:

# Override default capture ID (optional)
FIGMA_CAPTURE_ID=your-custom-capture-id

# Customize defaults
FIGMA_CAPTURE_PORT=3000
FIGMA_CAPTURE_DELAY=1000
FIGMA_CAPTURE_HTML=index.html

npm Scripts (Optional)

Add to your package.json:

{
  "scripts": {
    "figma:init": "figma-capture --init",
    "figma:capture": "figma-capture",
    "figma:cleanup": "figma-capture --strip"
  }
}

Why "Copy Instead"?

Due to browser security restrictions, the tool cannot directly send HTML to Figma. Instead:

1. The Figma toolbar shows "Couldn't send to Figma"
2. Click "Copy instead" to copy HTML to clipboard
3. Paste into Figma (Ctrl+V / Cmd+V)

This is the expected workflow — not a bug!

Cleanup

Remove the capture script when done:

npx figma-capture --strip

Technical Details

The F1 freeze uses multiple techniques to keep UI elements open:

• CSS pointer-events: none — Disables pointer interactions globally
• Event capture blocking — Intercepts click/hover events before React/Radix sees them
• Figma element passthrough — Allows clicks on Figma toolbar elements

Compatibility

• ✅ React / Next.js
• ✅ Vue / Nuxt
• ✅ Radix UI / shadcn/ui
• ✅ Any framework with standard DOM events

Requirements

• Node.js >= 18.0.0
• Local dev server running

License

MIT © itsfinnynj