Web2UI
A lightweight Web2UI workflow for quickly converting web pages into fully editable Figma design drafts.
1-Click Web to Figma
Auto-capture any website into fully editable layers. Zero screenshots needed.
- •Capture your way: Choose full-page auto-capture or select specific areas.
- •Customize styles: Adjust viewport sizes and toggle between light/dark themes.
- •Flexible export: Send directly to the Figma plugin, or copy to your clipboard.
- •100% Editable: Instantly generates ready-to-edit Figma layers. No flat images.
- •Works everywhere: Securely captures private sites and pages behind a login.
Web2UI Figma Plugin
Bring any web layout directly into your canvas. Instantly convert websites, browser captures, or HTML files into 100% editable Figma layers with pixel-perfect fidelity, responsive typography, and extracted vector assets.
URL to Figma
Simply paste any public web URL into the plugin and hit Convert. Watch entire pages transform into clean, layered Figma designs in seconds.
Sync Browser Captures
Captured private or login-required sites with our Chrome extension? Send them to Figma and convert them from your signed-in Capture tab.
Upload HTML Files
Got saved .html or .zip files? Drag and drop local web files into the File tab and instantly turn offline source code into fully editable design systems.
Open-Source Chrome Extension
We believe in transparency and developer trust. The core Chrome extension that powers our web capture, DOM parsing, and layout serialization is fully open-source. Feel free to host your own instance, or join us on GitHub to contribute to more complex CSS support.
// Web2UI Open-Source Capture Engine
import { captureUrlOnce } from '@web2ui/renderer';
const { document } = await captureUrlOnce(
'https://example.com',
{
viewportWidth: 1440,
viewportHeight: 900,
fullPage: true,
},
);
console.log('capture packet:', document);