$99 lifetime on AppSumo · Limited timeWe've partnered with AppSumo: get wpgraft for life for $99, one payment. Limited time, only on AppSumo.
Get the dealDiscount codes land here first.
Members get offers on wpgraft, plus build tips and early word on what is shipping next.
LovableA page Lovable built
FigmaLayers built into the design file you have openCopy a page from Lovable into Figma as editable frames, text and auto layout, not a screenshot. What comes across, and what does not.
wpgraft does not care that a language model wrote the HTML, or what framework it used. It reads the page as your browser rendered it: the real elements and the real computed styles on each one, at every width you ask for. It then builds that as Figma layers: frames, text, vectors and image fills, with auto layout wherever the page was genuinely laid out in rows and columns. Nothing that arrives depends on Lovable still being there.
Lovable gets a working app on screen fast, and the design conversation around it usually still happens in Figma. Open the preview in its own tab, put each screen into the state you want, and wpgraft builds it into your Figma file as layers, so the design catches up with what was generated.
wpgraft is a Chrome extension. Get it from wpgraft.com/releases. Install it, click the icon, sign in. Copying needs an account with a paid plan, which you can choose from wpgraft.com/#pricing. On your very first copy it asks you to confirm you have the right to reuse what you are copying, once, and does not ask again.
There is no Figma plugin in this story. The extension builds the copy into a Figma design file you have open in Chrome, through the editor’s own Plugin API, so the only thing you install is the extension.
Lovable shows your app in a preview panel beside the chat. That panel is a frame. Open the preview in its own browser tab, or use the published URL, and copy that.
Click the wpgraft icon on the source tab and pick your destination under Copy into. There is one Figma entry, labelled Figma. Switch Also copy tablet & phone on unless you only want the desktop layout: it is off until you turn it on, and it captures three viewports instead of one, so you get a tablet and a phone frame beside the desktop one.
Select element starts a picker: hover to highlight, press ↑ to widen the selection to the parent and ↓ to narrow it again, click to confirm, Esc to cancel. Whole page takes the entire document in one pass. wpgraft scrolls the page for you first so lazy images and scroll-triggered effects have fired, then waits for the fonts and images to finish before it reads anything.
Sign in at figma.com and open the Design file you want the copy in, or create one with + Create → Design. Keep it in Design mode: nothing can be added to a file while it is open in Dev Mode. The copy goes onto the page that is open in that file.
When the copy is ready, the box wpgraft shows on the page you copied from has an Add to Figma now button once wpgraft is allowed on figma.com. Otherwise click the wpgraft icon and press Add in Figma on the copy, and allow it when Chrome asks. The extension finds the Figma Design file open in Chrome, downloads the copy’s images itself, and builds the layers in that tab through the editor’s own Plugin API, the same one a Figma plugin uses: frames, text with styled ranges, vectors and image fills. Each captured width becomes one frame, placed to the right of whatever is already on the page, and the new frames are selected and zoomed into view when it finishes. If Figma refuses the copy part-way, the half-built layers are taken off the page again. You can keep working while it builds; a progress bar shows how far it has got.
The popup reports how many frames and layers were added, and names the fonts Figma did not have and had to replace. Add those fonts to Figma, or set the text in fonts you have. Figma saves the file as you go, so there is nothing else to press.
This is where the product earns its keep. Click any layer and Figma’s Design panel shows its real values. Retype the heading, swap an image fill, change the auto layout spacing, or duplicate a frame and start redesigning.
Frames, text and images, not a screenshot
Every box becomes a frame or a shape where the browser drew it, every piece of text a text layer with its font, size, line height, letter spacing and links, every inline SVG a vector, and every image an image fill stored in the file. Select anything and its values are in Figma’s own Design panel.
Auto layout where the page really was a row or a column
Direction, spacing, padding, alignment and Hug, Fill or Fixed sizing are derived from the measured boxes, and auto layout is kept only if every child lands within 0.75px of where the browser put it. Everything else keeps its exact position.
One frame per width
With Also copy tablet & phone on, you get a Desktop, a Tablet and a Mobile frame side by side, each named with its width. With it off, you get the desktop frame alone.
Paint in Figma’s own fields
Colours, linear, radial and conic gradients, borders, corner radii, shadows, blurs and blend modes are written as Figma fills, strokes and effects, not flattened into a picture.
After the insert: Nothing to press: Figma saves the file itself, as it does for anything you draw. The popup reports how many frames and layers were added, and names the fonts Figma did not have.
Lovable shows your app in a preview panel beside the chat. That panel is a frame. Open the preview in its own browser tab, or use the published URL, and copy that.
A guide that only lists what works will waste your afternoon. These are the things that surprise people, set out before you start rather than discovered afterwards.
<iframe>, such as a map, a video player from another site or an embedded form, arrives as a placeholder of its size named after the site it comes from. wpgraft does not descend into it, which is also why a builder’s own editor canvas and an AI chat’s artifact preview have to be opened on their own URL before you can copy them.clip-path: polygon() or path() are not reproduced yet. Inset, circle and ellipse clips are, as masks.No. Nothing is installed in Figma. The Chrome extension builds the layers in the design file you have open in Chrome, through the editor’s own Plugin API, so the only thing to install is the extension.
Not directly: a Chrome extension cannot reach the desktop app. Open the same file at figma.com in Chrome and add the copy there. The layers are saved in the file, so you will see them in the desktop app as well.
View-only means you can look at the file but not change it: open a file you can edit, or use the file menu → Duplicate to your drafts. A file in Dev Mode takes no new layers: switch back to Design mode with the toolbar toggle or Shift + D, then press the button again. FigJam boards and Slides do not take copies either; open a Design file.
No. wpgraft reads the generated page and writes to Figma. Nothing is sent back to Lovable and nothing there is altered.
No. What lands in Figma is layers drawn from the page: frames, text, vectors and image fills, with the images stored in the Figma file itself. Nothing in it depends on Lovable still existing.
Editable. Every layer is an ordinary Figma layer: select it and Figma’s Design panel shows its real values, and an auto layout frame resizes the way Figma’s own do. Before release, real sites were built into a real Figma file this way and compared with the live page, pixel by pixel.
Yes, once you switch Also copy tablet & phone on. It is off by default, and with it off you get the desktop layout only, slightly faster. With it on, wpgraft measures the page three times: at your window’s own width, then at 768px, then at 375px. Each width becomes a frame of its own, Desktop, Tablet and Mobile side by side, because a Figma frame has one width. One honest caveat about the measurement: the Web Store build produces the narrow viewports inside the page rather than by resizing the window. It re-evaluates every media query at the target width, pins the layout width, resolves vw units and clamps position: fixed boxes to it, and the result is measured at 100% of the property values a real 768px and 375px window produces on getbootstrap.com and on a stock WordPress theme. What it cannot do is re-run the source site’s own JavaScript for the new width, so a layout a script computes on resize is copied as the desktop script left it, and the capture says so in a warning.
Every plan is paid; there is no free tier and no trial. Pro is $20 a month or $180 a year, and Lifetime is $299 once. Each one includes every destination, whole-page copies as well as sections and elements, and unlimited copies at full fidelity, with nothing watermarked or downgraded. If it does not work for what you build, ask within 7 days of the charge and 90% of the plan price comes back.
A page you generated yourself is yours to use, subject to the terms of the tool that generated it. Fonts, images and icons that the page pulled in from somewhere else carry their own licences and those follow them into the copy.
Read moreThe layout, usually yes. The words, photos and logo inside it, no. Take the shape, bring your own content, and you are on the safe side of the only line that really matters.
Read the postNot legal advice: the post says so too, and says why.
Other ways into Figma
Other places Lovable can go
Every destination unlocked, full fidelity, on every plan. Point at one Lovable section, put it in Figma, and judge the result inside the refund window.
