For product managers and founders
Capture any screen you can open in Chrome and paste it into Figma. Switch Data to Mock first and personal details are replaced inside your browser before anything is copied.
Build the component in your editor, capture it from the browser, and paste it into Figma as a design you can keep refining.
A PlanCard React component is typed in an editor while it renders on localhost. The page is captured with Option-Shift-P, pasted into Figma with Command-V, and its corner radius and button fill are then edited in Figma.
Works with your stack
Why product teams use it
Specs, research decks and what-if mockups all start with a true picture of the current product.
Names, emails, phone numbers, addresses, card numbers and other IDs, handles and avatars are replaced with realistic stand-ins before anything reaches the clipboard.
Each person keeps one stand-in across every page and viewport, so a flow still reads like a real account.
Capture several pages and links between them become prototype connections you can present.
Extension captures go to your clipboard, local history and, if you choose, a file. Twinfig does not receive the content of pages you capture with the extension.
Without asking for a mockup
If you can open it in your browser, you can capture it.
Sign in to your product as usual. The extension uses your own browser session, so admin pages and dashboards work.
Names, emails, phone numbers, addresses, card numbers, IDs and avatars are swapped for realistic stand-ins before the capture leaves the page.
Press ⌥⇧P, then ⌘V in the Twinfig plugin. Text stays text, so you can change copy and rearrange sections right away.
Use the frame in a spec, a research deck or a what-if mockup. Stand-ins stay consistent across pages, so a flow still reads as one account.
In the product
What you get
Twinfig reads the rendered page the way a browser does, then rebuilds it the way a designer would.
Public pages import straight from Figma. For everything else, use your own browser and session: a full page, the visible area, one element or several pages, with real customer data swapped for mock data on the way out.
In a logged-in dashboard the Twinfig popup opens, Data is switched to Mock, and the element picker moves from a name to a row to the whole customers table. The captured table arrives in Figma with names, emails, phones and avatars replaced.
Text stays text. Auto layout is applied only where it reproduces the page exactly, and repeated UI becomes components.
A typical import with hundreds of per-letter layers switches to Twinfig’s clean tree; the headline, an auto layout row and a button instance are inspected in turn.
Open your Storybook, pick components, and every story becomes a variant. Themes and viewports become extra variant properties.
Button and Badge are picked in the Twinfig popup on a Storybook. Eight Button variants appear in a Figma component set across Light and Dark themes, then a Badge set, then the instance properties.
Colors used more than once become variables, type becomes text styles, and links between pages become prototype connections.
Captured colors, type and spacing appear as Figma variables, three pages are linked with prototype connections, and the prototype is presented from Pricing to Sign up.
The details
Settings live in both the plugin and the extension, so every capture comes out the way your team works.
Capture 1920, 1440, 1024, 768 and 390 in light, dark or both. Each combination becomes its own frame.
Twinfig reads the sitemap and links, then groups template pages so you import three blog posts, not 412.
Names, emails, phones and IDs swap for stand-ins. One person keeps one face everywhere, from any DiceBear style.
Every frame carries a hidden reference screenshot. Drag to compare the import with what Chrome rendered.
Frames remember their URL, width, theme and language. Select one, recapture, and it updates where it sits.
Capture without opening anything. Shortcuts work on any page, and the capture is on your clipboard when it’s done.
Browser captures go to your clipboard and local history. Nothing is uploaded to capture a page you’re logged into.
Get started
Add the Figma plugin. Add the Chrome extension too for logged-in apps, localhost and Storybook.
Compared with other tools
How Twinfig lines up against the importers designers already know, and a plain screenshot.
| Capability | Twinfig |  html.to.design | Figma’s extension | Screenshot |
|---|---|---|---|---|
| Import a live URL | Yes | Yes | Yes | As a flat image |
| Pages behind a login, localhost | Your own browser session | Via its extension | Your own browser session | Yes |
| Pick a single element | Yes | Yes | Yes | No |
| Many viewports × light and dark in one run | Yes | Yes | Not advertised | One at a time |
| Repeated UI becomes components | Across every page | Not advertised | Not advertised | No |
| Colors and type as variables and text styles | Yes | Not advertised | Not advertised | No |
| Links become prototype connections | Yes | Not advertised | Not advertised | No |
| Storybook stories to component sets | Yes | Not advertised | Not advertised | No |
| Mock data for customer information | Before it leaves the page | Not advertised | Not advertised | Captured as is |
| Recapture a frame in place | Yes | Not advertised | Not advertised | Take a new one |
Based on each tool’s public product pages as of October 2026. “Not advertised” means we couldn’t find the capability described, not that it can’t exist. html.to.design and Figma are trademarks of their owners.
Roadmap
Vote for what you want next. Shipped items are in the current build.
Read the accessibility hierarchy from the simulator or emulator and pair it with screenshots.
Group near-matches that differ only in text or icon into one component with properties, and detect variants.
Paste a GitHub URL into the plugin and let the capture service run the same pipeline in the cloud.
Point the CLI at a repo. It installs, starts the dev server or Storybook, finds your routes and captures each one into a bundle for the plugin.
Capture a page in both themes and each color becomes one variable with Light and Dark modes; dark frames are pinned to Dark.
Hover, focus, active and open menus or dialogs, captured from an element or a story and added as variants like State=Hover.
Equal-column grids become wrapping auto layout with the grid's gaps instead of absolute positions.
Apps running through their web target are detected, captured at phone widths and named from testID and roles.
FAQ
You paste a capture into Figma and everything arrives as editable layers. Basic Figma editing is enough to update copy, swap images and rearrange sections.
Mock replacement happens in your browser before the copy. Review a capture before sharing it, as with any file that began as a real screen.
Twinfig is a Figma plugin and a Chrome extension that turn any website or app into an editable Figma design. Import public pages, or a whole site, straight from Figma; capture anything else from Chrome. Pages arrive with real text layers, finished animations, exact auto layout, components, variables, text styles and prototype connections, not as a screenshot.
Yes. Type a URL in the plugin and choose Scan site. Twinfig finds the site’s pages from its sitemap or by following links, groups them by path and collapses repetitive templates such as blog posts, so you pick the pages that matter and import them in one run, linked as a prototype. No extension needed for public sites.
Yes. The Chrome extension captures in your own browser with your own session, so anything you can see works: dev servers, preview deploys, staging behind SSO and admin dashboards.
Not when you capture with the extension. The capture goes to your clipboard, your local history and, if you choose, a .twinfig file. The one network call is to DiceBear when mock avatars are on, and it sends only the mock name. Public website imports from the plugin go through Twinfig’s capture service.
Switch Data to Mock before you capture. Names, emails, phone numbers, addresses, card numbers and other IDs, handles and avatars are replaced with realistic stand-ins inside the browser, before anything reaches the clipboard. Each person keeps one consistent stand-in across every page and viewport.
All of them, because Twinfig reads what Chrome renders: React, Next.js, Remix, Vue, Nuxt, Svelte, Astro, Tailwind, plain HTML and anything else that ends up in the DOM.
Open your Storybook and click Twinfig. It reads the story index, you pick components, and every story is captured and combined into a Figma component set with one variant per story. If you capture more than one theme or viewport, those become extra variant properties.
No. Twinfig drops wrapper elements that only exist for layout, keeps text as whole text layers, turns repeated UI into instances and builds in small batches so Figma stays responsive. A typical marketing page arrives as a few hundred clean layers.
A screenshot is a picture. Most importers give you absolute positions and text split into fragments. Twinfig rebuilds the page as a designer would: style runs inside real text, auto layout only where it matches the page exactly, components, tokens and prototype links.
No. Twinfig is an independent product. Figma is a trademark of Figma, Inc.
Keep exploring