Websites and apps into Figma
Paste a URL or scan an entire site without leaving Figma, or capture anything you can open in Chrome. Twinfig rebuilds it the way a designer would: real text, exact auto layout, components and tokens.
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
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.
In Figma, paste a URL and import the page or scan the whole site. In Chrome, press ⌥⇧P for the full page or ⌥⇧E to pick an element, then ⌘V in Twinfig.
Everything lands as real layers, not a picture. Start designing.
Why Twinfig
| Feature | Screenshot | Typical HTML import | Twinfig |
|---|---|---|---|
| Text | Pixels | Lines split up or one layer per letter | Real text layers with every style run |
| Animations | Whatever frame was on screen | Often caught mid-transition | Finished before capture |
| Layout | Flat image | Absolute positions | Auto layout where it reproduces the page exactly |
| Repeated UI | Not available | Copies of copies | Components with instances, across every page |
| Colors and type | Not available | Hard-coded values | Variables and text styles |
| Links between pages | Not available | Not available | Prototype connections |
| Whole sites | One page at a time | One page at a time | Scan the site, pick pages, import them in one run |
| localhost and logins | Yes | Usually not | Yes, captured in your own browser |
| Storybook | Not available | Not available | Component sets, one variant per story |
| Customer data | Captured as is | Captured as is | Swapped for mock data on the way out |
Compared with other tools
How Twinfig lines up against the importers designers already know.
| Capability | Twinfig | html.to.design | Figma’s Chrome extension |
|---|---|---|---|
| Import a live URL | Yes | Yes | Yes |
| Pages behind a login, localhost | Your own browser session | Via its extension | Your own browser session |
| Pick a single element | Yes | Not advertised | Not advertised |
| Many viewports × light and dark in one run | Yes | Viewports | Not advertised |
| Repeated UI becomes components | Across every page | Not advertised | Not advertised |
| Colors and type as variables and text styles | Yes | Not advertised | Not advertised |
| Links become prototype connections | Yes | Not advertised | Not advertised |
| Storybook stories to component sets | Yes | Not advertised | Not advertised |
| Mock data for customer information | Before it leaves the page | Not advertised | Not advertised |
| Recapture a frame in place | Yes | Not advertised | Not advertised |
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
These are planned, not shipped yet.
Point Twinfig at a repo. It installs, starts the dev server or Storybook, finds your routes and captures each one.
Pair each color with its dark-theme twin and write them as two modes of one variable.
Hover, focus, active, open menus and dialogs, added as variants like State=Hover.
Simple grid layouts map to wrapping auto layout instead of absolute positions.
Expo and React Native through the web pipeline first, then native iOS and Android from the simulator.
FAQ
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 use 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.