html.to.design (free)

Capture web pages and local HTML files, then paste them into Figma as editable layers.

Bring your browser designs into Figma with html.to.design (free) by Haris Labs. Capture a whole page or select a specific element, then paste the result into your Figma canvas. Use existing layouts as a starting point for design exploration, interface reviews, and redesigns. Features: - Capture entire web pages or individual elements. - Import local HTML files opened in Chrome. - Choose desktop, tablet, or mobile capture widths. - Include supported images, text, and layout styling. - Configure font mappings for your Figma workflow. - Prepare lazy-loaded content and settle animations before capture. - Paste captured designs directly into Figma. How to use: 1. Open a website or local HTML file in Chrome. 2. Click the extension icon. 3. Choose your capture width. 4. Click Capture whole page or Select an element. 5. Open a Figma design file and press Ctrl+V on Windows or Command+V on Mac. For local HTML files, enable Allow access to file URLs in Chrome's extension settings. Some fonts, images, and complex page effects may require adjustments after import. Chrome internal pages cannot be captured. Plain HTTP pages outside localhost cannot use the clipboard workflow; use an HTTPS page instead. The extension temporarily uses Chrome's debugger permission when capturing at a selected viewport width. An independent tool by Haris Labs. Not affiliated with or endorsed by Figma.