HTML to Figma — by Storyship — Import website to Figma designs (web,html,css) - Free

About this plugin

Turn live websites, HTML/CSS, and private or local pages into editable Figma designs—not flattened screenshots. Storyship rebuilds real content as structured layers with Auto Layout, images, typography, styles, links, and responsive variants.WHAT YOU CAN DO• Import one or multiple public URLs• Capture Desktop, Tablet, Mobile, or custom viewport widths• Generate Light/Dark and multiple language variants• Build and preview pages in the built-in HTML/CSS Editor• Re-capture managed frames while preserving their placement and references• Import .h2f captures from the browser extension for private, local, authenticated, or complex pages• Import HTML/ZIP files and direct SVG, PNG, JPEG, WebP, or GIF URLs• Turn selected website links into native Figma prototype flows• Convert supported Flexbox/Grid layouts into Auto Layout and preserve fixed/sticky content• Create or reuse Figma text/color styles and variables• Generate semantic layer names, interactive states, and reusable components• Automate imports and selection export through MCP/API• Export a selection to HTML and upgrade imported images from ToolsHOW IT WORKS1. Choose URL, Editor, File, or MCP/API.2. Select viewports, themes, languages, and import options.3. Import and review the editable result.4. Select a managed frame anytime to re-capture and update it.BROWSER EXTENSIONUse HTML to Figma Capture for pages behind login, localhost, browser-only apps, and complex SPAs. The extension creates an .h2f file you can drag into the File tab or send directly using a short-lived pairing code.Supported content stays editable in Figma; unsupported or blocked content may use an explicit fallback.Support: [email protected]