$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.
ShopifyAny Shopify storefront page
FigmaLayers built into the design file you have openCopy a page from Shopify into Figma as editable frames, text and auto layout, not a screenshot. What comes across, and what does not.
wpgraft needs no access to your Shopify account, no export file and no API key. 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 Shopify still being there.
A store redesign usually starts by recreating the current pages in Figma. wpgraft builds the storefront page you have open into your Figma file as layers, product cards and all, exactly as they looked when you copied them. Prices and stock are drawn as they were; nothing in Figma updates them.
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.
The live store, not the theme editor. A password-protected store works too: you are logged in, and wpgraft copies what your browser rendered.
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.
The live store, not the theme editor. A password-protected store works too: you are logged in, and wpgraft copies what your browser rendered.
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. Nothing is exported, moved or deleted. wpgraft reads the rendered Shopify page the same way any browser does and writes a new copy into Figma. Your Shopify site keeps running exactly as it did, which is what lets you rebuild one section at a time and switch over when you are ready.
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 Shopify 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.
That depends on whose page it is and what you copy. Your own site, your own client’s site, a template you have licensed, or your own design on a platform you are leaving. None of that is in question. Somebody else’s design is a decision you are making, and wpgraft asks you to confirm you have the right to make it before your first copy. Text, images, fonts and icons all carry their own licences, and they travel with 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 Shopify can go
Every destination unlocked, full fidelity, on every plan. Point at one Shopify section, put it in Figma, and judge the result inside the refund window.
