Chromium-based source rendering
Renders the uploaded source in Chromium first, then reconstructs it as a structured Figma design instead of a flat screenshot.
HTML to Figma: React & Next.js — Source → Design
Source → Design is a Figma Community plugin that converts HTML and frontend project ZIPs into editable Figma layers. It helps designers and developers bring rendered web layouts into Figma for editing, review, and handoff.
Overview
HTML to Figma: React & Next.js — Source → Design is a Figma Community plugin for converting front-end source files into editable Figma layers. It is designed for HTML files and project ZIPs, including React, Next.js, Vue, and Svelte projects.
Instead of capturing a screenshot, the plugin renders the source in Chromium and rebuilds the result as a structured design. That makes the output more useful for editing and design iteration because text, vectors, layout, and selected styling details remain separate Figma elements when the source is supported.
Key features
Editable text reconstruction
Keeps text editable with detected font family, weight, style, size, line height, letter spacing, alignment, and measured line breaks.
Vector asset handling
Imports vector SVG assets and supported icons so graphical elements remain usable in Figma.
Layout and visual property preservation
Rebuilds frames, fills, borders, corner radii, shadows, gradients, opacity, clipping, and transforms as editable design layers.
Color and variable extraction
Extracts colors and reusable variables from the rendered interface to preserve design tokens where possible.
Viewport-aware import sizing
Supports native source dimensions or a selected mobile, tablet, or desktop viewport for output sizing.
Common use cases
Import a web page into Figma
Bring a static HTML page or a frontend project ZIP into Figma so the layout can be adjusted without rebuilding the design from scratch.
Work from a frontend project export
Convert a React, Next.js, Vue, or Svelte project ZIP into layered Figma content for design review and iteration.
Keep source details editable for review
Preserve editable typography, vectors, and layout when a team wants to compare rendered UI against a design file.
Match the output to a target viewport
Choose a mobile, tablet, or desktop viewport when the same source needs to be imported at a specific frame size for presentation or handoff.
Pros and Cons
Pros
- Converts source into editable Figma layers rather than a static image.
- Preserves text, SVGs, layout structure, colors, and several common visual properties.
- Accepts both standalone HTML files and project ZIPs for several common frontend frameworks.
- Offers viewport-based output sizing for mobile, tablet, desktop, or native source dimensions.
- Includes a small free allowance before the paid Pro plan starts.
Cons
- Browser-only output such as canvas, WebGL, active video, and some complex filters can fall back to raster output instead of fully editable layers.
- The source text says uploads are sent to a Chromium worker and an external service, so teams handling confidential or third-party code need to review the privacy and terms first.
- The plugin is limited to supported source types and viewport-based import sizing; it is not described as a general-purpose import tool for every web technology.
FAQ
How do you use Source → Design?
It runs inside a Figma Design file. You start the plugin, drop in a self-contained HTML file or a supported project ZIP, confirm the detected project and output size, and then start the import while the plugin remains open.
What source formats does it support?
The source text lists self-contained .html files, static project ZIPs, and project ZIPs for React, Next.js, Vue, and Svelte.
What gets converted into editable Figma content?
The plugin rebuilds rendered output as editable Figma layers, including text, SVG assets, layout, colors, variables, typography, and common visual properties such as fills, borders, shadows, and gradients.
What are the main limitations?
Browser-only output such as canvas, WebGL, active video, and some complex filters does not have a direct editable Figma equivalent. Those areas may fall back to local raster output.
Is there a free tier or paid plan?
The page says three successful imports are free. After that, Source → Design Pro is listed at $9/month for unlimited code-to-design imports.
Quick Facts
- Category
- Design Tool
- Platform
- Figma Community plugin
- Source formats
- HTML, ZIP, React, Next.js, Vue, Svelte
- Output
- Editable Figma layers
- Website
- sourcetodesign.com
- Pricing
- Three free imports; Pro at $9/month
Альтернативы HTML to Figma: React & Next.js — Source → Design
图像大厨imgcook
imgcook is a design-to-code tool that converts design drafts into front-end code. It supports plugin-based and developer workflows for Sketch, Photoshop, VS Code, and CLI usage.
ByteAsk
ByteAsk is a terminal-first AI coding agent for C and C++ that edits repositories and verifies changes with the real compiler, debugger, sanitizers, and tests before showing a diff. It offers a free tier plus paid plans, with editor connectors and zero-retention handling described in the source.
CreateOS Sandbox
CreateOS Sandbox is an isolated compute environment for running code and agent workloads inside Firecracker micro-VMs. It is designed for workflows that need machine-level isolation, private networking between sandboxes, and programmatic control through SDK, CLI, or MCP.
hob
hob is an independent workspace for coding agents that keeps agent sessions, terminals, history, and follow-up work organized around the tools and providers you already use. It is aimed at developers who want local control over routing, history, and workspace structure rather than a bundled model stack.
Ably Chat
Ably Chat is a chat API platform for building custom realtime chat applications. It supports room-based messaging, typing indicators, presence, reactions, and message updates, with usage-based pricing options for different deployment stages.
Manta AI
Manta AI is an autonomous web app testing tool for teams that want to map application behavior, catch regressions, and generate tests without writing scripts or maintaining selectors. It works from a URL and supports plain-English test flows, run results with screenshots, and scheduled or deployment-triggered checks.