whatisgithub

What is sketch-measure?

utom/sketch-measure — explained in plain English

Analysis updated 2026-06-24

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

In one sentence

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

What do people build with it?

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.

What is it built with?

HTMLJavaScript

How does it compare?

utom/sketch-measurekristopolous/bootstra.386paddingme/front-end-web-development-interview-question
Stars6,8616,8606,847
LanguageHTMLHTMLHTML
Setup difficultyeasyeasyeasy
Complexity1/51/51/5
Audiencedesignerdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

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

So what is it?

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?

Frequently asked questions

What is sketch-measure?

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.

What language is sketch-measure written in?

Mainly HTML. The stack also includes HTML, JavaScript.

How hard is sketch-measure to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is sketch-measure for?

Mainly designer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.