HTML to Figma
Paste HTML and CSS, preview live, and export H2D JSON to import editable Figma layers via our companion plugin.
Related Tools
More free utilities you might find useful
Frequently Asked Questions
Quick answers to common questions
What is H2D?+
H2D (HTML-to-Design) is ToolReign's JSON format describing Figma-compatible layers — frames, text, images, and layout — generated from HTML.
Is my HTML uploaded to a server?+
No. Rendering and conversion run entirely in your browser. Your markup never leaves your device.
How do I get designs into Figma?+
Generate H2D JSON here, copy it, then use the ToolReign H2D Figma plugin and choose Paste H2D JSON to create editable layers.
What HTML is supported?+
Static HTML with common elements (div, headings, paragraphs, buttons, images, SVG) and basic CSS including flexbox, colors, borders, and shadows.
Does it support CSS Grid?+
Not in v1. Flexbox layouts map better to Figma auto-layout. Grid-heavy pages may need manual adjustment after import.
Can I import a live website URL here?+
URL fetching requires the Figma plugin due to browser security. Use our URL to Figma page for that workflow.
What viewport width should I use?+
Match your target design width — 375 for mobile, 768 for tablet, 1280 for desktop. Layer positions are relative to that width.
Is this tool free?+
Yes. 100% free with no signup required.