HTML to Figma, as real editable layers

Outclass converts HTML and CSS into Figma layers. The page is rendered in a real browser, every element is measured, and the result is pasted into Figma as frames, text and vectors you can edit, with auto layout where the page uses flexbox.

What you get in Figma

A screenshot pasted into Figma is a picture. You can look at it, but you can't change a word. Outclass gives you the design itself:

• Auto layout: rows and columns built with flexbox become auto layout frames, with their gaps, padding and alignment, so buttons grow with their labels and lists keep their spacing.
• Layers with names: layers are named after the page's own structure, like "Header", "Card" or "Tab bar", instead of "Frame 47".
• Real text: headings and labels stay editable text with their font, size, weight, line height and color.
• Vectors: SVG icons, logos and illustrations arrive as editable vector layers, including dashed strokes and progress rings.
• Fills and effects: solid colors, linear and radial gradients, borders, corner radius, shadows and opacity carry over.
• Images: photos are embedded in the file, so nothing breaks when you share it.

Three ways to use it

1. Design in Outclass. Describe an app or upload a screenshot, and every screen Outclass designs has a Copy to Figma button. One click copies the screen; paste it into any Figma file.
2. From your AI coding agent. Connect Claude Code, Cursor, VS Code, Claude or ChatGPT to the Outclass MCP server. Ask the agent to design a screen in HTML and send it to Figma; it returns a link with a Copy to Figma button.
3. Run it yourself. Outclass's converter also runs as a local MCP server on your own machine, so nothing leaves it.

Built for designs, not just pages

Most HTML to Figma tools are made for importing live websites. Outclass is made for the screens you're designing: it captures each one at the device size you choose (mobile, tablet or desktop), keeps scroll-reveal content visible, and turns decorative CSS like ::before badges into real layers, so what you saw in the browser is what you get in Figma.

Good to know

• It converts HTML and CSS you provide or design in Outclass. It doesn't import a live website from its URL.
• Page scripts don't run during conversion, so content that only appears after JavaScript runs won't be captured. Common design helpers like Tailwind's CDN and Iconify icons are supported.
• Animations are copied as a still frame.
• Fonts and images need to load from the web. An image whose server blocks use on other sites can't be embedded.