Start the dev server (npm run dev or your project's command) and open the page. For a single component, use a route or Storybook.
Step 01
Use Case · AI Design
Last reviewed: July 2026
Cascade wrote the interface in your project. Run it in a browser, then import copied HTML or an accessible preview as a Pixel reference or as best-effort editable layers for supported content.
"Windsurf to Figma" is the workflow of taking UI you built with Windsurf — Codeium's AI-native IDE, including the Cascade agent — and importing it into Figma as editable design layers. Windsurf writes real frontend code into your local project; you run it like any app, and html2design reads the rendered DOM's computed styles. The framework Cascade chose is irrelevant.
Windsurf is great at "image and prompt → working UI in your repo." html2design closes the design loop: bring the running output into Figma so a team can refine, align to a design system, and review with the tools they already use.
Built on a browser-rendered DOM — exactly what the import approach reads.
Cascade edits files locally. Run the dev server and open the page; the browser computes every style — which is exactly what html2design reads.
Windsurf supports turning a screenshot prompt into code; html2design completes the loop the other way — code into Figma. The two pair naturally.
React, Vue, Svelte, Astro, plain HTML — html2design reads the rendered output, not the source.
You paste HTML, not a URL — works on localhost:3000, Storybook, or pages behind login.
Four steps, followed by review and cleanup.
Step 01
Start the dev server (npm run dev or your project's command) and open the page. For a single component, use a route or Storybook.
Step 02
Open DevTools (F12), Elements panel, right-click the root element, choose Copy > Copy outerHTML. Let fonts and images finish loading first.
Step 03
In Figma, run the HTML to Figma plugin, paste, click Generate. Supported elements and styles become native Figma objects.
Step 04
You now have a best-effort editable frame of the UI Cascade coded. Refine, align to your design system, prep for review and handoff.
Native Figma objects mirroring the rendered output — not a screenshot.
Supported text becomes editable Figma layers; unavailable fonts and metric differences may require cleanup.
Compatible backgrounds, borders, shadows, gradients, and opacity map to Figma properties.
Compatible inline SVG content can become editable Figma vectors; complex or external assets may need cleanup.
Supported layout, spacing, and sizing become measured Figma frames that should be compared with the browser source.
Run the project Windsurf built (e.g., npm run dev), open the page in a browser, open DevTools, right-click the root element, Copy > Copy outerHTML, and paste into the html2design Figma plugin. Windsurf's rendered output transfers as best-effort editable Figma layers.
No. html2design reads the rendered DOM and computed styles, not the source. Whatever Cascade picked imports the same way once it runs in a browser.
Yes — this is a powerful round-trip. Windsurf takes an image/prompt and generates code; you run it and copy the rendered HTML; html2design rebuilds it as editable Figma layers ready for refinement.
Editable mode creates native Figma nodes for supported content. Fonts, media, effects, and layout can still require cleanup.
AI Tool
Convert UI built with the Cursor AI editor into editable Figma layers.
AI Tool
Convert UI written by GitHub Copilot or Copilot Workspace into editable Figma layers.
AI Tool
Claude Artifacts and Claude Code output into editable Figma layers.
Use Case
Convert rendered React components into native Figma layers.
Pillar Guide
The definitive HTML to Figma guide — every framework and method.
Compare
How html2design compares to screenshot tools and extensions.
Install html2design from the Figma Community — free to try, no Chrome extension, no manual rebuild.
Install Free on Figma CommunityFree to try · $12/mo to unlock all features