HTML to Figma

About

HTML to Figma lets you capture any webpage's HTML and CSS with one click and instantly import it into Figma as fully editable native layers — frames, text nodes, fills, borders, shadows, and corner radii all preserved.

HOW IT WORKS
1. Visit any webpage in Chrome
2. Click the HTML to Figma extension icon
3. Choose: Full page, Visible area, or a specific CSS selector (.hero, #main)
4. Click "Capture & Copy to Clipboard"
5. Open Figma, run the HTML to Figma plugin, paste and import

WHAT GETS CONVERTED
- Layouts → Figma Frames with correct dimensions and positioning
- Colors → Solid fills from background-color
- Typography → Editable text nodes with font family, size, weight, color, alignment
- Borders → Stroke weight and color
- Shadows → Drop shadow effects
- Border radius → Individual corner radii
- Opacity → Layer opacity

CAPTURE MODES
- Full page — captures the entire document body
- Visible area — captures only the current viewport
- CSS selector — capture any specific element (e.g. .navbar, .hero, #sidebar)
- Depth control — Shallow / Standard / Deep to balance speed vs detail

PERFECT FOR
- Designers auditing live websites before redesigning them
- Developers handing off accurate specs to Figma
- UX researchers importing competitor UIs for analysis
- Teams building design systems from existing products

REQUIREMENTS
The free HTML to Figma Figma Plugin must also be installed in Figma to receive and render the imported data. Search "HTML to Figma" in the Figma Community.

NOTE: This extension reads computed styles only. CSS animations, pseudo-elements (::before/::after), and cross-origin images are not captured. Web fonts must be installed in Figma for exact typography matching.