figma-web-capture

Figma Web Capture

Use this when a user wants to bring a webpage into Figma as editable layers instead of a screenshot.

This is a practical workflow built on Figma's public html-to-design capture asset. Treat it as an unofficial bookmarklet path, not as a guaranteed product surface. Re-check the script URL if Figma changes the flow.

What It Does

• Loads Figma's public capture.js helper into the current page.
• Serializes the rendered DOM into Figma layers.
• Copies the capture to the clipboard so it can be pasted into any open Figma file.
• Supports capturing the full viewport or a selected element.

Public Script

The capture helper lives at:

https://mcp.figma.com/mcp/html-to-design/capture.js

Load that script into the page, then use the capture toolbar to copy the result to the clipboard.

As of March 27, 2026, this public URL returns HTTP 200.

Recommended Workflow

1. Open the target page in a desktop browser.
2. Wait for fonts, images, and lazy-loaded content to finish rendering.
3. Scroll to the exact section you want to capture.
4. Run the bookmarklet or injected script that loads capture.js.
5. In the toolbar, choose Copy to clipboard.
6. Switch to Figma and paste into a dedicated scratch frame or page.
7. If you only need part of the page, use Select element before copying.

Safe Positioning

• Capture the smallest stable container that still includes the content you need.
• Paste into a scratch frame first, then move pieces into the final canvas.
• Keep one capture per page or frame so imported layers stay organized.
• Capture after scrolling into the intended viewport, not before.

Example Bookmarklet

javascript:(function(){var s=document.createElement('script');s.src='https://mcp.figma.com/mcp/html-to-design/capture.js';document.head.appendChild(s);setTimeout(function(){window.location.hash='figmacapture&figmadelay=1000';var s2=document.createElement('script');s2.src='https://mcp.figma.com/mcp/html-to-design/capture.js';document.head.appendChild(s2);},500);})();