TL;DR
Rapid prototyping from a live website means importing a production page's rendered HTML into Figma as native, editable layers using html2design, then iterating directly in Figma — changing copy, layout, and visuals — and adding Figma Prototype connections to create interactive flows. The result is a high-fidelity prototype that starts from the real, live UI rather than a hand-rebuilt approximation.
Why Start from Production HTML?
Traditional rapid prototyping in Figma has a hidden time tax: you spend the first hour rebuilding the current state of the product — the nav, the existing page structure, the current button styles — before you can even start exploring the change you actually want to test. That rebuild is busywork. The production codebase already contains all of that information, rendered exactly as users see it.
html2design short-circuits that rebuild. You copy the rendered HTML from your browser's DevTools and paste it into the plugin. In 5–30 seconds, Figma contains native layers: real text nodes with the actual font and size, actual fills with the live hex values, frames positioned exactly as the browser laid them out. From that starting point, your prototype work is purely the new thing you're testing.
| Approach | Time to first editable Figma frame | Fidelity to production |
|---|---|---|
| Manual rebuild in Figma | 60–180 min | Approximate |
| Screenshot in Figma | <1 min | Pixel-perfect |
| Screenshot editability | None (flat image) | Cannot edit text/colors |
| html2design import | <1 min | Pixel-accurate |
| html2design editability | Full — text, fills, layout | Native Figma layers |
The Rapid Prototyping Workflow
Step 1
Capture the current UI from the live page
Open the production page (or staging) in Chrome. Open DevTools (Cmd+Option+I on macOS, F12 on Windows). Use the element picker to select the section, page region, or full page you want to prototype with. Right-click the element in the Elements panel → Copy → Copy outerHTML. For a full-page prototype, copy from the <body> tag.
Step 2
Import into html2design in Figma
Open Figma and run the html2design plugin (Main Menu → Plugins → html2design). Paste your outerHTML into the plugin input. Click Convert. In a few seconds, a Figma frame appears on your canvas containing all the UI elements as native layers. Rename the frame "Current State" to keep your canvas organized.
Step 3
Duplicate and iterate
Duplicate the imported frame (Cmd+D). The duplicate is your "Proposed State." Make all your design changes here — update copy, try new button colors, rearrange sections, swap images. Because these are real Figma layers, every change takes seconds. The original "Current State" frame remains intact for comparison.
Step 4
Add Prototype connections
Switch to the Prototype tab in Figma's right panel. Draw connections from interactive elements (buttons, nav links, CTAs) to the frames they should navigate to. Create flows: a landing page → a product detail page → a checkout page. Use the Figma Prototype feature to set transitions (push, dissolve, smart animate) for a polished demo experience.
Step 5
Share and get feedback
Click Share → Copy prototype link. Stakeholders open the link in a browser — no Figma account needed to view. For developer handoff, share the file link (not just prototype) so developers can inspect exact values through Figma's Inspect panel.
Speed tip: For most prototyping work, you don't need the entire page. Import just the component or section you're changing — the hero, the nav, the pricing table. A targeted import gives you fewer layers to manage and faster Figma performance on complex pages.
Capturing Multiple States for Prototyping
Many UI interactions require multiple states — a default button and a hover button, an empty cart and a populated cart, a closed dropdown and an open one. html2design makes it easy to capture each state as a separate Figma frame by using DevTools to force CSS states before copying.
Hover and focus states
In Chrome DevTools, right-click any element in the Elements panel → Force State → :hover (or :focus, :active). The browser applies the hover styles. Copy the outerHTML in that forced state and import it into html2design as a separate frame. Label it "Button — Hover" and place it next to the default "Button — Default" frame. Connect them with a Figma Prototype hover trigger for a realistic hover demo.
Expanded and collapsed states
For accordions, dropdowns, or sidebars: interact with the element in the browser to reach the open state, then copy the outerHTML. For programmatic state (e.g., a React state toggle), you can also temporarily override the DOM: in DevTools, find the class that controls open/closed state and add/remove it manually in the Elements panel, then copy.
Responsive breakpoints
In DevTools, click the Device Toolbar icon or press Cmd+Shift+M. Set the viewport to 375px (mobile) and copy the outerHTML. Then set to 1440px (desktop) and copy again. Import both into html2design to get mobile and desktop frames. In Figma, use these as the start and end states of a responsive prototype or simply as reference frames for the design team.
For a deep dive into responsive prototyping, see Responsive Design to Figma: Converting Breakpoints to Figma Variants.
Prototyping Flows: From One Page to the Next
A single-frame import is useful for component iteration. But the real power of this workflow is building multi-screen prototype flows that represent full user journeys — the kind you'd test in a user research session or present to a product review.
Here's how to build a complete user flow from a live website:
- Identify every screen in the flow (e.g., homepage → product page → cart → checkout → confirmation).
- For each screen, navigate to it in the browser, copy the relevant HTML, and import it into html2design. Each import becomes one Figma frame.
- Arrange the frames left-to-right on the canvas in flow order.
- In Prototype mode, connect each CTA, button, or nav link to the next frame.
- Set starting frame, add a flow name, and present. The full purchase journey — real production UI, fully interactive in Figma — took less time to build than the 4-hour design review you're about to run.
Pro tip: Import each screen at the same viewport width (e.g., always at 1440px or always at 375px) so your prototype frames are consistent. html2design captures whatever the browser is currently rendering — if you import a desktop page at 375px width, you'll get the mobile layout.
Iterating After Import: What to Edit in Figma
After importing, the most common rapid prototyping edits are:
- Copy changes — Double-click any text layer, retype. No font-matching headaches; you're editing the real text layer with the original font already applied.
- Color changes — Select a frame or text layer, click the fill color swatch, enter the new hex. Experiment with a button color across 5 prototypes in 2 minutes.
- Layout adjustments — Move sections by dragging frames. Use Figma Auto Layout if the import used flexbox — html2design maps flex/grid layouts to Auto Layout where possible.
- Content swaps — Replace image fills with new images by selecting the image fill and using Figma's fill panel. Swap SVG icons by replacing vector paths.
- Adding new elements — Draw native Figma components (buttons, modals, banners) onto the imported frame. Mix imported production layers with new Figma-designed elements in the same frame.
Handing Off the Prototype Back to Developers
Once the prototype is approved, developers need specifications to implement the changes. Figma's Inspect panel shows exact values for every layer — pixel dimensions, font stack, line height, color in hex/RGB, spacing, border radius. This is enough for most implementation work.
For a more structured handoff:
- Annotate changed layers — Add Figma annotation frames (yellow sticky-note style boxes) explaining what changed and why. This is especially useful for interactions that don't fully communicate in static frames.
- Use Figma Variables for tokens — If your team uses a design token system, register your prototype's colors and spacing as Figma Variables. Developers can extract these as updated token values for the CSS codebase.
- Export component specs — Use Figma's Dev Mode (if available on your plan) to export annotated specs. Developers can click any layer and see every CSS property in a format ready to copy.
For the complete guide to aligning code and Figma post-prototype, see Design Handoff Best Practices: Keeping Code and Figma in Sync.
Frequently Asked Questions
How do I create a Figma prototype from a live website?
Copy the outerHTML of the page or section from browser DevTools, paste it into html2design in Figma, and convert. You get native Figma layers. Add Prototype connections between frames to create interactive flows.
Why import HTML instead of screenshotting?
Screenshots create flat image layers — no editable text, no changeable colors, no resizable frames. HTML imports create native Figma layers you can edit directly. For prototyping work where you need to change copy and try new designs, native layers are essential.
Can I prototype mobile and desktop from the same site?
Yes. Use Chrome's Device Toolbar to set different viewport widths, import at each breakpoint, and get separate frames for mobile and desktop. Connect them in Figma Prototype to show responsive behavior.
Does html2design work with React or Next.js apps?
Yes — html2design works with any rendered HTML. React, Next.js, Vue, Angular, and Svelte all produce standard HTML in the browser. Copy the outerHTML of any rendered component or page and it imports cleanly. See How to Convert React Components to Figma for the specific workflow.
Rapid Prototyping Checklist
- ✓ Import at consistent viewport widths across all screens in the flow
- ✓ Keep the original "Current State" frame — don't edit it, only duplicate
- ✓ Use DevTools Force State to capture hover/focus/active frames separately
- ✓ Arrange frames left-to-right in flow order on the canvas
- ✓ Name frames clearly: "Homepage — Current", "Homepage — Proposed v1"
- ✓ Add annotations for interactions not visible from static frames
Key Takeaways
- ✓ Import production HTML with html2design instead of rebuilding — go from live site to editable Figma layers in under 1 minute
- ✓ Duplicate the imported frame before editing — always keep the original "Current State" intact for comparison and stakeholder review
- ✓ Use DevTools Force State (
:hover,:focus) to capture interaction states as separate Figma frames - ✓ Build multi-screen flows by importing each page in the user journey — arrange left-to-right and connect in Prototype mode
- ✓ Share the Figma prototype link for stakeholder review; share the full file link for developer handoff with Inspect panel access
Related Articles
The Complete Guide to HTML to Figma Conversion (2026) →
The pillar guide covering every framework, every method, and every use case — all in one place.
Design Handoff Best Practices: Keeping Code and Figma in Sync →
Systematic approaches to handoff that prevent design drift — from prototype to production.
How to Import a Website into Figma →
The core import workflow that underlies every rapid prototyping session.
Responsive Design to Figma: Converting Breakpoints to Variants →
How to prototype responsive behavior with separate mobile and desktop frames from the same live site.
Screenshot vs Code Import: Which Figma Method Actually Wins? →
Why code import produces editable prototyping-ready layers while screenshots are dead-ends.
How to Convert React Components to Figma Designs →
Import rendered React, Next.js, or Storybook components as Figma frames for component-level prototyping.
Developer Handoff: Keep Code and Figma in Sync →
Rapid prototyping is only valuable if the result stays aligned with code — this use case closes the loop.
Try it now
Build your first Figma prototype from a live site
Copy a section's outerHTML from DevTools, paste it into html2design, and get native Figma layers in seconds. Start prototyping from production — no manual rebuilding.
Install from Figma Community →$12/mo · $96/yr · Cancel anytime