Products / FrameCraft · Free Figma plugin
FrameCraft Live & free on Figma

Paste HTML.
Get real Figma layers.

FrameCraft turns any page of code into clean, fully editable layers on the canvas — structure, type and spacing intact. No rebuilding by hand.

Free · No account needed · Runs inside Figma

page.html
<section class="hero">
<h1>Ship it.</h1>
<button>Start</button>
</section>
HTML FIGMA
LAYERS
Section · hero
Heading · Ship it.
Button · Start

Websites, web apps, landing pages, UI components — FrameCraft rebuilds them as organized Figma layouts in seconds, preserving hierarchy, spacing, typography, images and styling. The web becomes your source of truth.

01 — How it works

Markup in, editable design out.

1

Install FrameCraft

Add the free plugin from the Figma Community in one click.

2

Paste or upload HTML

Drop in HTML code or upload a file — a full page or a single component.

3

Edit on the canvas

Clean, organized, fully editable Figma layers — structure and styling preserved.

02 — What you get

Real Figma layers, not a screenshot.

Import HTML directly

Paste your HTML or upload a file — FrameCraft recreates the page as editable layers, no rebuilding.

Structure preserved

Sections, cards, buttons, forms, and nav arrive as organized frames with hierarchy intact.

Styling kept intact

Type, spacing, color, borders, shadows, and backgrounds carry over — little to fix after.

Editable layers

Everything lands as real layers — text stays editable text, ready to restyle or componentize.

Responsive layouts

Turns responsive web layouts into structured Figma designs you can keep iterating on.

Free, full stop

No account, no trial, no import paywall. Install from the Figma Community and go.

03 — What it's for

When FrameCraft earns its place.

Website redesigns

Bring a live page into Figma and iterate on the real thing.

UI modernization

Pull legacy interfaces onto the canvas to redesign them.

Design systems

Harvest components, type, and color from real markup.

Product audits

Import shipped UI to review and document what's live.

Competitor analysis

Reverse-engineer interfaces into editable designs to study.

Client presentations

Turn live pages into clean files for reviews and proposals.

Design documentation

Document shipped interfaces as editable, structured layouts.

Frontend-to-design

Use the web as the source of truth so design and code stay in sync.

04 — Why it's free

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.

Buy us a coffee
05 — FAQ

HTML to Figma,
answered.

Six honest questions we get the most — no fine print.

Still curious?Just install it — it's free.
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 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 it 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.