Export Landing Page to Figma — Editable Layers in One Click
Capture any landing page to Figma as fully editable layers. Hero, pricing, testimonials, CTA — everything preserved. Free Chrome extension.
What this is
A focused workflow for marketers, growth designers, and CRO teams: capture any landing page into Figma as fully editable layers — hero, features, pricing, testimonials, CTA, footer, all preserved.
Export to Figma is a Chrome extension. Open the landing page in Chrome, click the extension, paste into Figma. The full page lands as editable layers with real typography, colors, spacing, and image assets.
Why landing-page-to-Figma is its own workflow
Landing pages live in an awkward gap: they're high-stakes for conversion (where the marketing math actually happens), built to ship fast in tools optimized for non-designers (Unbounce, Instapage, Webflow, Framer), and almost never start in Figma. So when you need to redesign, audit, or A/B test a landing page, the first step is usually "get this page into Figma somehow."
The specific patterns where landing-page-to-Figma comes up repeatedly:
- A/B variant design. The control is live. You need 3 new variants designed and shipped. Capture the control into Figma → design variants on top → hand off.
- Competitor audit. Studying how 5 competitors structure their pricing pages, hero copy, social proof. Capture each, lay them side-by-side, identify patterns.
- Conversion-rate optimization. Capture the current page, identify friction (clutter, weak CTAs, unclear value prop), design improvements, ship.
- Cross-team handoff. A marketing team's landing page in Unbounce needs to move to the design team's Figma workflow. Capture once, work in Figma going forward.
How to capture a landing page
- Install Export to Figma from the Chrome Web Store — free, 30 seconds.
- Pin the extension.
- Open the landing page in Chrome. Wait for it to fully load.
- Click the extension icon. (Or hover and click a specific section to capture just that.)
- Paste into Figma with
Cmd+V/Ctrl+V.
For long pages with lazy-loaded sections, scroll the full length first to trigger all the loads, then scroll back to the top, then capture. This ensures sections that animate in on scroll are present in the final capture.
Landing-page-specific things to know
Long page captures
Marketing landing pages tend to be long — 3000 to 8000 pixels tall, sometimes more. The extension captures the full rendered length. You'll get one tall Figma frame containing every section.
To break the captured page into per-section Figma frames after, select a section's layers in Figma and use Frame selection (Cmd+Option+G / Ctrl+Alt+G). Repeat for each major section. Now you have hero, features, pricing, etc. as separate frames you can rearrange.
Capturing popups and overlays
Landing pages often have exit-intent popups, scroll-triggered offers, or click-to-open dialogs. The extension captures whatever's visible at the moment of capture, including overlays.
- Exit-intent popup: Move your mouse toward the top of the browser window to trigger the popup, then click the extension while the popup is open.
- Click-triggered modal: Click the trigger element to open the modal, then click the extension.
- Auto-triggered popup after N seconds: Wait for it to appear, then capture before it auto-closes.
This is one of the cases where in-browser capture matters — server-side capture tools can't trigger these states, so they capture the page without the overlays.
A/B variant capture
If you're running A/B tests, each variant typically has its own URL or its own visit-based assignment. To capture all variants:
- URL-based variants (e.g.,
/page?variant=B): just visit each URL and capture. - Visit-based assignment (the variant assignment is sticky based on cookies/IDs): clear cookies between variant captures, or use Chrome's Incognito mode for each variant — each Incognito session gets fresh assignment.
Capture each variant into its own Figma frame in the same file. Now you have side-by-side variant designs you can analyze, annotate, or redesign.
Landing page builders — all work the same way
The extension reads whatever Chrome renders, so the landing page builder underneath doesn't matter:
| Landing page tool | Compatible? |
|---|---|
| Unbounce | |
| Instapage | |
| Leadpages | |
| ClickFunnels | |
| Webflow (landing page templates) | |
| Framer marketing sites | |
| Wix Marketing pages | |
| WordPress + Elementor / Divi | |
| Custom-coded landing pages | |
| Headless / Next.js landing pages |
What gets preserved
| Element | Preserved? |
|---|---|
| Hero typography and headlines | |
| Brand colors, gradients | |
| Hero / product imagery at original resolution | |
| Pricing table structure | |
| Testimonial cards | |
| Social proof badges / logos | |
| CTA buttons (visual representation) | |
| Form fields and labels (visual) | |
| Layout (flex/grid → auto-layout) | |
| Popups and overlays (if triggered) | |
| Animations and scroll-triggered effects | (visual state only) |
| Form submission behavior | |
| A/B test logic / variant assignment |
A real workflow: 5-competitor pricing page audit
A SaaS growth designer was redesigning their pricing page. Before designing, they wanted to audit 5 competitor pricing pages — the actual structure each used, copy patterns, social proof placement, monthly vs annual toggle UX.
Old workflow: screenshot each competitor's pricing page, drop into Figma, manually rebuild a rough structure as editable layers, annotate findings. About 45 minutes per competitor, 4 hours total.
New workflow with Export to Figma:
- Open competitor pricing page in Chrome.
- Toggle to the view they wanted (e.g., monthly view for one capture, annual for another).
- Capture each in 5 seconds.
- Lay all 5 side-by-side in Figma.
- Annotate findings directly on the captured layers.
Total time: under 10 minutes for all 5. The audit was more rigorous (working from exact structures instead of approximations) and the time saved went into actual design work.
Pricing
- Free: 10 captures per month — enough for most ad-hoc landing page work.
- Pro: $1/month (launch promo). Unlimited captures.
Related reading
- URL to Figma — the broader workflow this falls under
- Export Webflow to Figma — for Webflow-built landing pages specifically
- Export Framer to Figma — for Framer-built marketing sites
- Convert HTML to Figma — for when you have landing page code
- Export Shopify to Figma — for e-commerce landing pages
- How to copy a website to Figma for a redesign — workflow guide
Frequently asked questions
Can I capture A/B test variants for design analysis?
Yes — capture each variant URL separately, paste each into its own Figma frame, and you have side-by-side variants for analysis. Useful for figuring out which design elements drove the lift on a winning variant, or for documenting the differences before archiving an experiment.
Does it capture the whole long landing page or just the visible area?
It captures the full rendered page, however long. A 5000px-tall landing page becomes one tall Figma frame containing all sections — hero, features, social proof, pricing, CTA, footer. To split it into per-section frames after, select sections in Figma and use 'Frame selection' to convert them.
Can I capture only the hero or only the pricing section?
Yes — Export to Figma supports element-level capture. Click the extension, hover over the hero (or pricing block, testimonial section, etc.), click. Only that section comes into Figma as its own frame. Useful when you want to study a specific pattern without the rest of the page.
What about landing pages built with tools like Unbounce, Instapage, Leadpages?
All capture identically. The extension reads whatever Chrome renders, so the underlying landing page builder doesn't matter. Unbounce pages, Instapage pages, Leadpages, ClickFunnels, Webflow landing pages, Framer marketing sites — same workflow for all of them.
Can I capture popups and exit-intent overlays?
Yes — trigger the popup in Chrome (scroll to the trigger point, attempt to leave for exit-intent, hover the right element, etc.), then capture while it's open. The captured Figma layers reflect whatever's visible at the moment of capture, including overlays.
How do I capture a landing page's loaded state vs initial state?
Wait for the page to fully load before clicking the extension. For lazy-loaded content (testimonials section that animates in on scroll, lazy-loaded images), scroll the page first to trigger the loads, then scroll back to the top, then capture. The captured DOM reflects what's currently rendered.
Is this useful for capturing competitor landing pages?
Yes — that's one of the most common use cases. Competitor pricing pages, feature pages, hero variations, value-prop framings. Capture each into Figma to study layout density, typography choices, copy structure, social proof patterns. Much faster than rebuilding from screenshots.
Stop screenshotting websites.
Export to Figma captures any live website as fully editable layers — fonts, colors, images, and auto-layout intact. 10 free exports a month.