sketch-measure

Sketch Measure is a plugin for the Sketch design application that helps designers hand off their work to developers. When a designer finishes a screen layout in Sketch, developers need to know things like font sizes, spacing, colors, and how elements are positioned. Normally that involves a lot of back-and-forth or manual annotation. This plugin automates that process.

With one click, Sketch Measure generates a self-contained HTML page that shows the design and lets anyone inspect its details, including CSS styles, without needing Sketch installed. The generated page works offline, so designers can share it as a file rather than relying on a live service.

One notable feature handles a tricky situation with shadows and borders. When a design element has a shadow or an outer border, the area it actually occupies on screen is larger than its core bounding box. Sketch Measure can export what it calls the "influence rect," which captures that full visual footprint. This is useful when an image needs to include the shadow as part of the exported asset rather than having engineers recreate the shadow in code.

The plugin installs directly into Sketch and can be found through several Sketch plugin managers, including Sketchpacks and Sketch Runner. Custom keyboard shortcuts can be assigned through the operating system's standard keyboard preferences. The interface uses an Option-key toolbar for accessing measurement panels.

The README notes compatibility with Sketch version 49 and links to a how-to guide and a Chinese-language tutorial. The project has multiple contributors and was created by the designer at utom.design. The README is straightforward and does not describe a payment model or hosted service.