HTML to Figma

About this plugin

HTML to Figma turns a real .html page into clean, editable Figma layers — exactly as it looks in the browser.Preview the page live inside the plugin, then import what you see: the same layout, the same images, the same open menu or dialog. Frames, text, vectors and images land with pixel-accurate positions, and colors, text styles and effects become named, reusable Figma Styles.WHAT IT DOES• Live preview inside the plugin — browse the page like a browser (scroll, open menus, switch tabs, toggle language), then import exactly what you see.• What-you-see-is-what-you-get: if a drawer, modal or bottom-sheet is open, it imports on top of the page, cropped to the screen — not a scrambled long page.• Pick any section visually: hover to highlight, click to select, ↑/↓ to widen or narrow, Enter to import.• Whole projects, not just single files — open a project folder and its external CSS, JS, fonts and images are resolved and inlined automatically. No local server needed.• Runtime images, lazy images and WebP/SVG logos are all resolved and embedded — cards import complete, not as grey boxes.• Pixel-accurate layout: Auto Layout is applied only where a simulation proves it reproduces the browser exactly; everything else stays pixel-exact.• Full RTL / Persian support, including mixed bilingual lines and correct text boxes (no words breaking out of their frame).• Real font picker: search the fonts actually installed on your machine and map each missing font to the face you want — no silent substitutions.• Saves colors, text styles and effects as named Figma Styles (and optional Variables for design tokens).• Imports inline SVG as real vectors, and input placeholders as editable text.• Freezes intro animations and scroll-reveal effects at their finished state.NEW IN THIS UPDATE• Redesigned interface with the ARIART look, plus a Dark / Light theme toggle that remembers your choice.• Batch import — build every page in a folder as its own frame, tiled side by side, in one click.• Import preflight — see the layer, image and font counts before you import.• Custom frame name — name the imported frame yourself, or let it auto-name from the page.• Settings presets — save a viewport + options combo and reload it in one click.• Simpler fonts panel — installed fonts collapse into one line; only the fonts that need a decision are shown, with a searchable picker.HOW TO USE1. Run the plugin.2. Drop an .html file, or click "Open Folder" for a site with external assets.3. Preview it live. Optionally press "Select" and click the section you want.4. Click "Import to Figma" (or "All N" to import every page).No account and no network calls — everything runs locally from the files you pick.Crafted by ARIART.My Socials: ⍟ Telegram | ⍟ Linkedin | ⍟ Instagram