Catalog›Plugins›Media, design & games›html2figmaHhtml2figmaCapture any web page and convert it into an editable Figma design Open site Open in the app JSON README (API)Capture any web page and convert it into an editable Figma designREADMELoading documentation…# html2figma Capture any web page and convert it into a Figma design file. Built with Playwright and Figma's MCP capture API. ## Features - Captures full web pages into editable Figma designs - Automatically dismisses cookie banners and consent dialogs - Scrolls pages to trigger lazy-loaded content - Strips CSP headers to allow Figma script injection - Supports authenticated pages via `cookies.json` - Works as a [Claude Code skill](https://docs.anthropic.com/en/docs/claude-code/skills) for seamless integration ## Prerequisites - Node.js 18+ - A Figma account with [MCP server](https://www.figma.com/community/plugin/1465068452498756621) configured ## Installation ```bash git clone https://github.com/your-username/html2figma.git cd html2figma npm install npx playwright install chromium ``` ## Usage ### As a Claude Code skill The easiest way to use html2figma is as a Claude Code skill. Add this repository to your project, then invoke: ``` /html2figma https://example.com ``` Claude will handle the full workflow: obtaining a capture ID from Figma, running the capture, and returning the Figma file link. ### Manual usage **Step 1** — Get a capture ID from Figma's `generate_figma_design` MCP tool. **Step 2** — Run the capture script: ```bash node scripts/capture.mjs <url> <captureId> ``` **Step 3** — The script will poll for completion and print the Figma file URL when done. ## Authenticated pages To capture pages that require login, export your cookies as a JSON array and save them to `scripts/cookies.json`: ```json [ { "name": "session", "value": "abc123", "domain": ".example.com", "path": "/" } ] ``` The format follows Playwright's [browser context cookies](https://playwright.dev/docs/api/class-browsercontext#browser-context-add-cookies). ## How it works 1. Launches a Chromium browser via Playwright (viewport: 1440x900) 2. Loads cookies if `scripts/cookies.json` exists 3. Intercepts responses to strip `Content-Security-Policy` headers 4. Navigates to the target URL and waits for content to load 5. Detects and dismisses cookie/consent banners 6. Scrolls through the page to trigger lazy-loaded images and content 7. Fetches and injects Figma's capture script from `mcp.figma.com` 8. Calls `figma.captureForDesign()` to serialize the page 9. Polls Figma's status endpoint until the capture completes ## License ISC DetailsTypePluginsTopicMedia, design & gamesPublisherasxelotSourcemarketplaceCategoryToolsStars1Last update2026-02-28T23:01:54ZProject statusActiveLanguageJavaScriptAdded2026-08-30 01:48:58Updated2026-08-30 01:48:58Source idasxelot/html2figma/html2figmaMoreMore plugins on Media, design & gamesAll from asxelotA–Z index
