Design Mode 2.0.0 — now on Firefox, with alignment guides and a calmer color picker

Design Mode 2.0.0 is a milestone release — the extension is no longer Chrome-only. It now installs on Firefox too, and it does so without a second codebase or a separate build. Alongside the Firefox launch, dragging an element now snaps to alignment guides the way Slides and Keynote do, and the color picker opens in a much lighter compact form.

Design Mode now installs on Firefox 121+ from Firefox Add-ons (AMO), right alongside the Chrome Web Store build. The important part: it ships from one dist/ and one merged manifest.json. There is no separate Firefox build — the same bundle serves both browsers and detects the platform at runtime, so every feature that can work on Firefox stays in lockstep with Chrome instead of drifting behind a fork.

On Firefox the panel renders as the browser's native sidebar; on Chrome it's the native side panel. Alt+D opens it on both. A few things are genuinely Chrome-only because Firefox has no equivalent API — the pop-out floating window, the always-on-top Picture-in-Picture window, and the screen eyedropper — and those controls are simply hidden on Firefox rather than shown broken.

Drag the body of a selected element and its edges and centres now snap to its siblings and to the parent box, with a solid magenta guide drawn through each match — the same feel as dragging a shape around in Slides or Keynote. Snapping is per-axis and composes with the existing Shift axis-lock, so you can constrain to one direction and still snap along it. Hold Alt to drag freely with snapping off, and the guides clear the moment you drop. Multi-select drags snap as a group.

Clicking a color swatch used to throw the full HSV square, hue slider, and numeric channels at you every time. Now the picker opens compact — a live swatch, a Hex field, the eyedropper (Chrome only), and the HEX/RGB/HSL format cycle, with the site's design-token colors listed below. The full HSV surface is still one click away behind a Custom colour disclosure; it's just collapsed by default so the common case stays quiet.

Undo/redo got more reliable — it no longer injects literal HTML tags into text, and style/resize/move steps replay through the change-tracker so the page and the Changes tab never drift apart. Escape now drops back to hover mode instead of turning inspection off. With a multi-selection active, a plain click collapses the set to the one element you clicked (Shift-click still adds). Resizing past a min/max cap now widens the cap so the element actually moves. Aligning a single flex child works. Drop shadows on text layers hug the glyphs instead of boxing the text. And the texture effect is visible again, with an Opacity control.