Find your import workflow.
Start with the source you have. These guides cover the everyday import paths first, then the advanced options and their limits.
Start here
Import HTML to Figma
Choose an input and make your first editable import.
Website to Figma
Start from a supported public URL and review the result.
HTML and CSS to Figma
Prepare code and assets for an editable design starting point.
Capture, edit and repeat
Chrome extension
Bring the page you can actually see into Figma. Capture a signed-in dashboard, a localhost project or a selected area in your browser, then import the downloaded .h2f file as editable design.
Batch import
Build a useful design reference from multiple pages in one workflow. Paste your URLs, choose capture settings, and bring each successful page into Figma without restarting the whole batch.
Responsive capture
Review the same page across desktop and mobile without rebuilding each layout. Capture multiple widths, add supported Light and Dark appearances, and compare the results in Figma.
Auto Layout
Start with layout you can work with. Map supported browser patterns to native Figma Auto Layout, or keep captured geometry when positioning matters more.
Re-import & update
Refresh a design from its original source without moving the whole result to a new place. Re-import a managed webpage or update an HTML/CSS import after changing its source.
ZIP & archive import
Turn a prepared HTML website archive into separate editable pages. Keep related HTML files, styles and assets together, then import the archive from the plugin's Files workspace.
Advanced workflows
Read the availability and compatibility notes before using these paths.
MCP & REST API
Developer documentation · self-hosted MVP, not a hosted service
Export selection to HTML
Advanced export · supported subset, not lossless round-trip