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
HTML to Figma: React & Next.js — Source → Design converts HTML and frontend ZIPs into editable Figma layers for web layout import, 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 Alternatives
图像大厨imgcook
图像大厨imgcook 是一款设计转代码工具，可将设计稿转换为前端代码，支持 Sketch、Photoshop、VS Code 和 CLI 工作流。
ByteAsk
ByteAsk is a terminal-first AI coding agent for C and C++ that edits repos and verifies changes with compilers, debuggers, sanitizers, and tests.
CreateOS Sandbox
CreateOS Sandbox is an isolated compute environment for running code and agent workloads in Firecracker micro-VMs with private networking and SDK, CLI, or MCP control.
hob
hob is an independent workspace for coding agents, with local control over sessions, terminals, history, routing, and follow-up work.
Ably Chat
Ably Chat is a chat API platform for custom realtime chat apps, with rooms, typing indicators, presence, reactions, message updates and usage-based pricing.
Manta AI
Manta AI is an autonomous web app testing tool that maps app behavior, catches regressions, and generates tests from a URL, no scripts or selectors needed.