For product and UI designers
Paste a URL or scan a whole site without leaving Figma. Twinfig rebuilds each page the way you would: real text, exact auto layout, components and tokens, ready to edit.
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 designers use it
The fastest way to start a redesign, a flow audit or a component cleanup is a faithful copy of what ships today.
Text stays text, with style runs inside real text layers. Auto layout is applied only where it reproduces the page exactly, so frames resize the way you expect.
Repeated UI becomes components. Colors used more than once become variables and type becomes text styles, ready to clean up rather than build from nothing.
Scan a site, pick the pages that matter and import them linked as a prototype. Repetitive templates such as blog posts are collapsed so you choose, not hunt.
Capture several viewports and both themes in one pass. Colors become one variable with Light and Dark modes instead of two sets of frames.
A typical redesign
No extension needed for public pages. Everything happens inside the Figma plugin.
Open the Twinfig plugin, choose Website and type the address. A bare host such as acme.dev/pricing is enough.
Scan site finds pages from the sitemap or by following links. Folders of look-alike pages such as blog posts are collapsed with two selected, so you pick templates, not hundreds of posts.
Pick viewports such as 1440 and 390, and Light, Dark or both. The footer shows how many frames the run will make before you start.
Pages land on their own Figma page, one section per URL, laid out by path so the site’s structure reads left to right. Pages are linked as a prototype.
Main components sit in a Components section and colors live in one variable collection with Light and Dark modes. Rename, merge and start changing things.
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
No. Pages arrive as real layers: text layers, auto layout, components, variables and text styles. Nothing needs tracing.
Public pages import straight from the Figma plugin with a URL. Only capture interfaces you are authorized to use and reproduce content you have the right to use, as the terms of service describe.
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