Relayer — HTML to Figma

Capture any website as editable Figma layers — real Auto Layout, real layer names. Free, no account, nothing leaves your machine.

Relayer converts HTML to Figma. The page in your browser tab becomes editable Figma layers — real frames, text you can retype, real Auto Layout that reflows when you resize it. It is not a screenshot. HOW IT WORKS 1. Open the page you want. Click Relayer in the toolbar. 2. Choose what to capture: the whole page, only the visible area, or one element you pick on the page. 3. Press "Copy for Figma", then paste on the Figma canvas — Ctrl+V, Cmd+V on a Mac, or right-click and Paste. Or press "Save file" and open the .relayer file with the free Relayer plugin in Figma. WHAT YOU GET Four device widths in one capture. Tick Desktop 1440, Laptop 1280, Tablet 768 and Phone 375. Relayer loads the page again at each width, lays it out there, and brings back one Figma frame per device, side by side. One capture, not four. Two things to know about the device widths. They apply to a whole-page capture: if you switch to "Visible area" or "Pick an element", the device list stays on screen, turns off, and tells you why. And a site that refuses to load inside a frame is captured in an ordinary browser window opened at that width instead, so a window can appear for a few seconds while Relayer works. Copy or file — the same capture, either way. "Copy for Figma" puts the capture on your clipboard, and one paste drops it on the canvas with no plugin in the loop. "Save file" writes a .relayer file, and the plugin that opens it adds the full import report. Both come from the same capture. Two differences are worth knowing. SVG icons paste as flat images, and the file keeps them as editable vectors. A text layer with mixed styling pastes with its first style, and the file keeps every style. When you copy, Relayer names the ones that happened to your page, with the count; the plugin names them again after it imports a file. You read it before you paste, not after. Real Auto Layout. A container becomes an Auto Layout frame only where the layout is verified to hold. The conversion is simulated against the browser's own measurements to within 0.6 px, and the plugin measures the frame again on the Figma canvas and puts it back to absolute if it moved. You get Auto Layout where it is provably right, and correct pixels everywhere else. Real layer names. Sections are named by their headings, buttons by their labels, text by its own content: "Pricing", "Start a landing page", "H2: Flat fees". You will not scroll a tree of "div". Whole paragraphs. A paragraph arrives as one editable text layer with its wrapping intact, instead of one layer per line. The page's own fonts. Relayer reads the @font-face rules the page loaded and carries those font files into the capture. When Figma does not have a family, the import report offers you the captured font file to install and a "Re-apply fonts" button that fixes the text already on your canvas. You do not have to import the page again. Honest about what it cannot do. Some CSS has no exact equivalent in Figma — a skew, an unusual filter, a box that clips on one axis only. Relayer imports the closest thing it can, marks the layer, counts it, and writes one plain sentence saying what happened. A "Select them" button highlights the affected layers. You find out in the import report, not three weeks later in a client file. Works on the pages you actually work on: pages behind a login, localhost, staging, and single-page apps. The capture reads the page as it is rendered in your own tab. WHAT IT COSTS Free. There is no import counter anywhere in the code. If Relayer ever charges for something, it will be for a cloud convenience that does not exist yet — never for the local tool you are using today. No account. There is no sign-up in the flow, because there is nothing to sign up for. No import limits. Capture the same page ten times a day if you want to. Nothing leaves your machine. The capture runs inside your own tab. The file is written by your browser into your own Downloads folder. There is no Relayer server, no analytics and no telemetry. The Figma plugin declares networkAccess "none", which means Figma itself blocks it from making any network request. Relayer's own network requests are to the images, fonts and stylesheets the captured page already loaded, so that they can be stored inside your local file. Those requests are made without cookies unless the file is on the page's own origin. When you tick a device width, Relayer also loads the captured page itself again at that width, once per width — and a page that is loaded again loads whatever it normally loads. Nothing is sent to us, because there is nowhere to send it. YOU WILL ALSO NEED The free Relayer plugin for Figma, for the file path: https://www.figma.com/community/plugin/1677840614410832871/relayer-html-to-figma (The copy-and-paste path needs no plugin at all.) Questions, bugs and requests: contact@salmanahmed.tech I read and answer everything. Relayer is an independent tool, built by one developer. Figma is a trademark of Figma, Inc. It appears here only to say what Relayer does. Relayer is not affiliated with, sponsored by or endorsed by Figma, Inc.