For frontend and full-stack developers
Build in your editor, capture from Chrome with your own session, and paste into Figma. Frameworks do not matter because Twinfig reads what the browser renders.
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 developers use it
Design review goes faster when the design file matches the pixels in the browser.
Press ⌥⇧P for the full page or ⌥⇧E to pick an element, then ⌘V in Figma. It works on localhost, preview deploys and staging behind SSO.
React, Next.js, Remix, Vue, Nuxt, Svelte, Astro, Tailwind or plain HTML. If it ends up in the DOM, it comes across.
Capture hover, focus, active and open menus or dialogs, added as variants such as State=Hover, so the file shows more than the resting state.
Point the CLI at a repository. It installs, starts the dev server or Storybook, finds the routes and captures each one into a bundle for the plugin.
In your day
Three ways in, depending on where the UI lives.
Press ⌥⇧P in Chrome for the full page, or ⌥⇧E to pick one element with the arrow keys. The capture goes to the clipboard; press ⌘V in the Twinfig plugin.
In the popup, turn on 1440, 1024, 768 and 390 and set Theme to Both. Widths under 600 also get a mobile user agent. One capture, every frame.
Set States to All. Hover, Focus, Active, Open, Disabled, Checked and Selected are tried where they apply, and states that look the same as the default are dropped.
Run npm run wizard. It finds your routes, asks for devices and themes, captures every page and copies the bundle to the clipboard, ready to paste.
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. The Chrome extension reads the page as rendered, so there is nothing to install in your project.
Yes. The extension captures in your own browser with your own session, so anything you can see works.
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