Web Behavior Preview

About this plugin

Figma shows how your design looks. Present shows how it clicks. Neither shows how the page behaves when you scroll it.Web Behavior Preview opens your Figma page as a real webpage in a real scrolling window — and then hands you that page as a single HTML file you can send to anyone.Design the behavior in Figma. Preview it on the web.The plugin invents nothing on your behalf. It reads the connections you drew in the Prototype tab — the work you already do when a client has to see the interaction — and turns them into a page that actually scrolls. You do that work once, and from then on you send a file instead of a sentence beginning with "imagine that when you scroll…".START WITH NOTHING TO SET UPOpen the plugin, tick Prototype only, click your frame, press Run. That is the whole setup. The page scrolls, and every interaction you already wired in the Prototype tab works — because the plugin reads the file, not a configuration of its own:• On click → Change to — accordions, tabs, show-more, menu items• While hovering → Change to — hover states, held by the pointer and dropped when it leaves• Open overlay — menus, modals and popovers, with their scrim and their close-on-click-outside• Open link — a real link in the browser• Scroll to — a click takes the page to its target sectionTransitions keep the duration you set on the reaction. Reactions inherited from a main component work too, so forty identical cards cost one setup.Try it right now — the playground file has a page with everything already wired; duplicate it and press Run:THEN ADD STICKINESS, THE WAY REAL SITES DO ITUntick the box and click the elements that should stay with the page while it scrolls:• Smart sticky — a sidebar taller than the window rides with the text: down until its bottom shows, up until its top does. The pattern from Stripe docs, GitHub and Medium.• Sticky top — headers, promo bars and section navs stack beneath each other like on a real site: header → menu → banner. Everything below them rides under whatever is currently pinned, and the space frees up smoothly as a bar scrolls away.• Sticky bottom — cookie bars, toasts and CTAs slide in at the bottom edge, push the ones already there upward, and leave with their zone.A sticky element can carry a second look for when it is pinned — the solid header on scroll, done in two clicks — and a submenu opened from a sticky header stays anchored to it and pins along with it.SEND THE FILE, NOT THE EXPLANATIONDownload HTML gives you one self-contained file: markup, styles, script and every image inside it. No server, no account, no internet. Open it in any browser — or send it to a client or a developer and let them scroll it themselves instead of reading your description of how it should feel.NOTHING TO PREPARE, NOTHING TO BREAKNo frames to build, no layer renaming ritual, no Shift-clicking. Adjust behaviour in the popover that opens right over the preview, and where a ride should end, drag the blue handle in the preview itself. The plugin never modifies your layout.Your choices are saved into the file per page, so tomorrow you press Run and carry on.LIMITS• One page at a time. The plugin previews a single top-level frame. It is not a multi-page prototype exporter and does not follow navigation between top-level frames.• Up to 40 sticky elements per page, and up to 24 discovered interactive elements with their own bitmaps. Links and scroll zones are unlimited.• Everything is baked as images at export time, so text in the exported file is not selectable and does not reflow.• Not yet read from the prototype: After delay, drag triggers, and more than one reaction per element.• What is not wired in Figma does not appear in the preview. The plugin reads your prototype; it does not guess what a layer was meant to do. A file of pictures with no connections previews as a page of pictures — and the run tells you so instead of leaving you wondering.PRIVACYAll processing happens locally in Figma. The plugin has no network access at all. The exported HTML embeds everything it needs and makes no network requests; links open only when the viewer clicks them.—If this plugin saves you time, you can support its development here