Importing a web page into Figma can save the time spent reconstructing a reference by hand. It can also fill a file with hundreds of layers before you have decided what to learn from them.
The most useful import is scoped to a design question. You might want to study a navigation system, compare an account page, or understand how a pricing section communicates its options. Start there, then capture only the context you need.
Choose the smallest useful capture
Refcat Web to Figma offers page, viewport, and element capture. Each has a different purpose.
Use page capture when the sequence of sections matters. A pricing page, for example, may explain its plans, address objections, and introduce a call to action at different points in the document.
Use viewport capture when you need the visible composition at a specific browser size. Note that size alongside the reference; a layout captured with a wide window may change substantially on a phone.
Use element capture when you want to inspect a particular component or section without importing the rest of the page. This is often the best starting point for a focused comparison.
Install and sign in
The extension guide on Refcat includes a ZIP download and installation instructions. Extract the archive, open chrome://extensions, enable Developer mode, and choose Load unpacked. Select the extracted folder that contains manifest.json, then pin the extension from Chrome's Extensions menu.
Keep that folder in place: Chrome loads the unpacked extension from it. For an update, replace the files with the newer download and reload the extension. If the guide offers a Chrome Web Store listing, that is another installation route.
Open the extension, sign in to Refcat, and return to the page you want to capture. Choose a normal web page you have permission to inspect. Browser settings pages and other protected surfaces may not support capture.
Prepare the page before capturing
Set the browser width to match the state you want to study. Wait for images and fonts to finish loading. Open the menu, dialog, or section relevant to your question, and move unrelated overlays out of the way when appropriate.
For a reference containing sensitive or customer information, use a safe demonstration state. Imported content should not become an accidental record of private data in a shared design file.
Write a short note before starting: “Compare the relationship between plan cards and the feature table,” or “Inspect the spacing and hierarchy of the account navigation.” That note becomes the label for your imported material.
Copy or download the result
After conversion finishes, use Copy to Figma and paste into a Figma file. You can also download the .fig artifact and import it into Figma.
Inspect the result before building on it. Text and SVG can remain editable where conversion supports them. Canvas content, video frames, and some effects may be represented as images or flattened output. Web rendering and Figma do not share every layout or effects model.
An import is a reference artifact, not the original site's implementation. It does not replace the site's interaction behavior, responsive rules, accessibility semantics, or application logic.
Keep the reference separate from your proposal
Place the imported material on a clearly named reference page. Add the source, capture date, browser size, and your question. Use only material you are entitled to retain and share.
Next to the reference, create a small comparison frame. List the observed choices, the parts you want to investigate, and the constraints that differ in your product. Rebuild your proposal with your own components and content rather than treating imported layers as a finished design system.
For a plan comparison, you might preserve the idea of a clear recommended option while changing the information hierarchy to suit your own billing model. The import gives you something concrete to examine; your product requirements determine the result.
Capture, inspect, annotate, and adapt. That sequence makes Web to Figma useful well beyond the moment the layers appear.