Visual reference
Use Pixel mode when matching the browser appearance matters more than editing individual elements.
Real URL import · Editable mode
A real storefront, before and after HTML to Figma
This comparison uses LINEA, an image-led jewelry storefront with editorial photography, product grids, typography, and long-form sections. The Figma result below came from the same page at the same desktop viewport, with no visual retouching.
Captured July 14, 2026
Verified July 16, 2026
1425 px desktop viewport
90 editable layers
View the side-by-side evidence ↓
The previews use 1425 px source images and are displayed below their native width. The previous page enlarged sub-300 px thumbnails, which caused the blur; these previews do not upscale.
Reproducible case
Inspect the exact input and evidence files
The original LINEA page is published as a read-only, noindex test fixture. It uses the same build and 1425 px viewport as the browser capture above. The links below use faster high-quality WebP previews; the original byte-verified PNG URLs and SHA-256 values remain recorded in the machine-readable evidence manifest.
Verification: on July 16, 2026, Figma node 2021:2 was exported again through Figma MCP. Its 1425 × 4321 PNG matched the published output byte for byte. The deployed input also matched the published browser capture byte for byte. Full SHA-256 values and known differences are recorded in the manifest.
Evidence summary
How closely does Editable mode match the browser?
Editable mode produced a recognizable, workable Figma version of this LINEA storefront, but it was not browser-identical. At the same 1425 px desktop viewport, the import contained 90 selectable layers, including all 16 visible image layers and 57 text layers. The two-image hero, product grid, section order, borders, backgrounds, and editorial photography remained visually aligned enough for inspection and redesign work. The comparison also exposes real differences: an available Figma font replaced the browser font and changed some navigation wrapping, image-fill crops shifted slightly, and responsive rules, links, hover states, and carousel behavior were not transferred. Pixel mode is the better choice when the captured appearance must remain lossless as a raster reference. Editable mode is a best-effort conversion for changing copy, images, colors, and layout. The side-by-side previews above are unretouched, and both full-page source files are linked for inspection.
Method: same page, same viewport, no visual retouching. Reviewed by html2design engineering.
Preserved in this import
The page stays visually recognizable and workable
- All 16 visible image layers, including the two-image hero and large editorial photography
- 57 text layers with their content, hierarchy, color, alignment, and approximate metrics
- Product-grid spacing, section proportions, borders, backgrounds, and the full page sequence
- Independent layers that can be selected, moved, recolored, rewritten, or replaced
Differences to expect
Editable does not mean browser-identical
- Browser fonts are mapped to an available Figma font, so narrow navigation labels wrap differently.
- Image crops can shift slightly when browser sizing is translated to Figma image fills.
- Responsive rules, hover states, links, carousels, and other runtime behavior are not imported.
- The result is a flat editable composition, not an Auto Layout component system.
A closer look
Product imagery and layout remain separate
This crop shows the transition from the hero into the four-item product grid. It is included at a controlled height so the page remains easy to scan.
Choose by intent
Use the output that matches the next step
Copy and layout changes
Use Editable mode when you need to rewrite text, replace images, explore hierarchy, or rearrange the page.
Production design system
Use the import as source material, then rebuild key patterns with Auto Layout, Components, Variables, and interactions.
Try a representative page from your own site
Import the page you actually plan to redesign. Check its fonts, image crops, complex effects, and long sections before choosing Pixel or Editable mode.