explaingit

utom/sketch-measure

6,861HTMLAudience · designerComplexity · 1/5Setup · easy

TLDR

A Sketch plugin that exports your design screens to self-contained HTML pages so developers can inspect CSS styles, font sizes, spacing, and colors without needing Sketch installed.

Mindmap

mindmap
  root((sketch-measure))
    What it does
      Design handoff
      Offline HTML export
      CSS inspection
    Key features
      Influence rect export
      Shadow border support
      No Sketch required
    Installation
      Sketchpacks
      Sketch Runner
      Custom shortcuts
    Audience
      Designers
      Developers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Export a Sketch design screen to an offline HTML file so developers can review specs without installing Sketch.

USE CASE 2

Share design measurements and CSS styles as a standalone file instead of relying on a live service.

USE CASE 3

Export design assets with shadow and outer-border influence areas so engineers get the full visual footprint.

Tech stack

HTMLJavaScript

Getting it running

Difficulty · easy Time to first run · 5min

Requires Sketch version 49 or compatible to be installed on the machine.

In plain English

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.

Copy-paste prompts

Prompt 1
I use sketch-measure to hand off designs. How do I generate the HTML spec page and send it to a developer?
Prompt 2
My Sketch element has a drop shadow. How do I use sketch-measure influence rect export so the shadow is included in the exported asset?
Prompt 3
How do I assign a custom keyboard shortcut to the sketch-measure measurement panel on macOS?
Prompt 4
I want a developer to check font sizes and spacing in my Sketch file without installing Sketch. How do I do this with sketch-measure?
Open on GitHub → Explain another repo

← utom on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.