AB Testing Ideas: Copy a Live Website Section into Editable Figma Layers

htmltofigma · Updated 2026

Why start A/B test ideas from the live site?

An A/B test idea only matters if it can beat what is already live. That is why the fastest way to build a test concept is to copy the exact section that is live right now — the same copy, same images, same spacing — and then change only what you want to test. When you start from the real section instead of a blank canvas, your variant is a genuine apples-to-apples comparison, and the stakeholder review is easy because everyone can see exactly what changed.

The workflow: live section → editable Figma layers

Here is the process I use (it is also in this walkthrough video):

1. Open htmltofigma.net and paste the URL of the page you are testing.
2. Choose “Specific section” and enter the CSS selector for the part you care about — for example .hero, #pricing, or header.
3. Click Convert. You get that one section as real Figma layers: text stays text, images stay image fills, and the container becomes a frame.
4. Copy the design and press Cmd+V (macOS) or Ctrl+V (Windows) in Figma.
5. Rebuild the variant. Duplicate the frame, then change the headline, the button label, the image, the layout — whatever your hypothesis is about.

Converting a section instead of the whole page keeps the output small and fast, and it isolates exactly the element you are testing.

Why this beats screenshot-based testing

• Text is editable. You can try five headline variants without retyping anything from scratch or rebuilding a raster.
• Spacing and layout are real. Frames, padding, and alignment come in structured, so your variant is credible — not a rough mockup.
• It is fast. The whole loop is paste a URL → convert → paste into Figma. No plugin, no sign-up, no export dance.
• It is honest. The baseline is the exact live section, so your test is comparing against reality.

What to test first

High-impact, low-effort tests on sections that convert cleanly:

• Hero headline and subcopy — the classic value-proposition test.
• Call-to-action label, color, and placement — button tests are quick to mock and quick to ship.
• Pricing table structure — move the recommended plan, change the emphasis, add a comparison column.
• Form length and fields — trim or add fields and see what converts.

A few honest notes

The conversion is not 100% perfect, but it does most of the job. Hidden overlays from the live page sometimes appear as layers — just select and delete them. JS-rendered carousels convert as whatever is visible at capture time, so if the carousel matters to your test, scroll it into place before converting or capture a later state. Images inside some containers may not transfer — if an image is missing, drop the original in its place. Ten minutes of cleanup in Figma still beats rebuilding the section by hand.

Start with the section that matters most

Whatever your hypothesis, the section you are testing already exists on the live page. Copy it into Figma as editable layers, change one thing, and get feedback on a mockup that looks like a real product — because it is one.