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
1425 px desktop viewport
90 editable layers
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.
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.