Code to Figma: HTML, React & Next.js — Source → Design

About this plugin

Convert HTML to Figma and import React, Next.js, Vue, and Svelte project ZIPs as structured, editable designs.Upload a local HTML file or a complete frontend project ZIP. No public URL is required. Source → Design renders it in Chromium and rebuilds it as organized Figma layers, not a flat screenshot.Keep text, typography, SVGs, colors, variables, spacing, and layouts editable while preserving the original appearance.WHAT YOU GET• Editable text with detected font family, weight, style, size, line height, letter spacing, alignment, and measured line breaks• Vector SVG assets and supported icons• Frames, fills, borders, corner radii, shadows, gradients, opacity, clipping, and transforms• Colors and reusable variables extracted from the rendered interface• Organized, source-aware layer names and semantic groups• Native source dimensions or a selected mobile, tablet, or desktop viewportSUPPORTED INPUT• Self-contained .html files• Static project .zip files with HTML, CSS, JavaScript, images, SVG, icons, and local fonts• React project ZIPs• Next.js project ZIPs• Vue project ZIPs• Svelte project ZIPsHOW TO USE1. Run Source -> Design in a Figma Design file.2. Drop an HTML file or complete project ZIP.3. Confirm the detected project and output size.4. Start the import and keep the plugin open while layers are created.IMPORTANT LIMITSBrowser-only output such as canvas, WebGL, active video, and some complex filters does not have a direct editable Figma equivalent. These regions may use a local raster fallback while supported text, vectors, and layout remain editable.PRICING AND ACCOUNTThree successful imports are free. Source -> Design Pro costs $9/month and provides unlimited code-to-design imports. Pro uses a Google account and an external WayForPay subscription managed at sourcetodesign.com. Subscription management and cancellation are available from the account page.DATA PROCESSINGUploaded source files are sent to the Source -> Design Chromium worker for conversion. The plugin connects only to sourcetodesign.com and its production API. See the Privacy Policy and Terms before uploading confidential or third-party source code.Website: https://sourcetodesign.comPrivacy: https://sourcetodesign.com/privacy/Terms: https://sourcetodesign.com/terms/Support: [email protected]