Free HTML to Figma converter.
FrameCraft is a free Figma plugin that turns HTML into clean, fully editable Figma layers. Paste your code or upload a file and recreate any page on the canvas in seconds — no rebuilding by hand.
Free · No account needed · Runs inside Figma
FrameCraft is a free HTML to Figma plugin that transforms websites, web apps, landing pages, and UI components into clean, editable Figma designs in seconds. Import HTML and it generates organized Figma layouts while preserving structure, hierarchy, spacing, typography, images, and styling.
Whether you're redesigning a site, creating design documentation, auditing interfaces, modernizing legacy apps, or collaborating with developers, FrameCraft bridges design and code by using the web as the source of truth.
Markup in, editable design out.
Install FrameCraft
Add the free plugin from the Figma Community in one click.
Paste or upload your HTML
Drop in HTML code or upload an HTML file — a full page or a single component.
Edit on the canvas
Get clean, organized, fully editable Figma layers with structure and styling preserved.
Real Figma layers, not a screenshot.
Import HTML directly
Paste your HTML or upload an HTML file and FrameCraft recreates the page as editable Figma layers — websites, landing pages, and UI components, without rebuilding from scratch.
Structure preserved
Containers, sections, cards, buttons, forms, and navigation come across as organized, clean Figma frames with their visual hierarchy intact.
Styling kept intact
Typography, spacing, alignment, colors, borders, shadows, and backgrounds are carried over — so there is little to fix up after import.
Editable layers, not screenshots
Everything lands as real Figma layers — text stays editable text — ready to restyle, restructure, or turn into reusable components.
Responsive layouts
Converts responsive web layouts into structured Figma designs you can keep iterating on.
Free, full stop
No account, no trial, no import paywall. Install it from the Figma Community and start converting.
When FrameCraft earns its place.
Website redesigns
Bring a production page into Figma and iterate on the real thing instead of recreating it by hand.
UI modernization
Pull legacy interfaces onto the canvas to redesign and modernize them.
Design system creation
Harvest components, type, and color from real markup to seed a design system.
Product audits
Import shipped UI into Figma to review and document what is actually live.
Competitor analysis
Reverse-engineer competitor interfaces into editable designs to study and learn from.
Client presentations
Turn live pages into clean Figma files for reviews, proposals, and walkthroughs.
Design documentation
Document shipped interfaces as editable, structured Figma layouts.
Frontend-to-design workflows
Use the web as the source of truth so design and engineering stay in sync.
No paywall on the basics.
Most HTML-to-Figma converters put real usage behind a subscription. FrameCraft is free to use and runs entirely as a Figma plugin — nothing else to sign up for or install. If it saves you time, you can buy us a coffee.
HTML to Figma, answered.
Is FrameCraft really free?
Yes. FrameCraft is a free Figma plugin — no account, no trial, and no import paywall. Install it from the Figma Community and start converting HTML to Figma.
Can you convert HTML to Figma?
Yes. Paste HTML code or upload an HTML file and FrameCraft recreates the page — or a single component — as editable Figma layers, so you can redesign an existing interface instead of rebuilding it by hand.
Does it keep the layers editable and preserve styling?
Yes. FrameCraft imports your markup as real, editable Figma layers, not a flat screenshot. It preserves visual hierarchy and structure and carries over typography, spacing, alignment, colors, borders, shadows, and backgrounds.
Do I paste code or upload a file?
Either. You can paste HTML directly into the plugin or upload an HTML file. Containers, sections, cards, buttons, forms, and navigation are converted into organized Figma frames.
How do I install FrameCraft?
Open the FrameCraft page on the Figma Community and add it to Figma. Once installed, run it from the plugins menu inside any Figma file.
How is FrameCraft different from other HTML-to-Figma tools?
Most HTML-to-Figma converters gate real usage behind a subscription. FrameCraft is free to use, runs entirely as a Figma plugin, and focuses on clean layer structure with styling and hierarchy preserved.
Stop rebuilding pages by hand.
Convert your first page in seconds — FrameCraft is free, installs from the Figma Community, and keeps your layers editable.