Relayer — HTML to Figma

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", open the free Relayer plugin in Figma and press Ctrl+V (Cmd+V on a Mac) into its panel — the full import, nothing to download. Or press "Save file" and drop the .relayer file on the plugin. A paste straight onto the Figma canvas works too, as a quick look. 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: pasted into the Relayer plugin's panel it is the full import, identical to the file, with the import report; pasted straight onto the Figma canvas it is a quick look with no plugin in the loop. "Save file" writes a .relayer file for the plugin. One thing to know about the canvas paste. SVG icons paste as flat images, and the plugin keeps them as editable vectors. When you copy, Relayer tells you how many, if any. Pasting into the plugin has no such difference. Embedded frames. A YouTube embed, a map or a payment form from another site is captured from inside the frame and lands under it, at its size, with its own images and fonts. A frame that will not run a script arrives as an empty box, and the report says which and why. 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 (A paste straight onto the canvas needs no plugin at all; a paste into the plugin's panel is the full import.) 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.