Learn shortcuts. Work faster.

Sketch Measure Plugin Tutorial

By itself, Sketch does a good job of showing measurements when you’re moving or resizing a layer, but if you want to know your measurements without moving anything, the Measure plugin is a great tool.

How to install

The easiest way to install Measure is:

  1. Download the zip from GitHub.

  2. In Sketch, go to Plugins > Manage Plugins

    Manage Plugins

    and you’ll see this panel:

    Manage Plugins panel

  3. Click on the little gear near the bottom. You’ll see the menu item “Show Plugins Folder.” Select that.

    Show Plugins Folder

  4. Copy the Measure plugin (not the whole zip) into the Plugins folder.

    Copy plugin

  5. Save your current Sketch file or restart Sketch to start using Measure.

All Menu Items

For a plugin, Measure has a lot of features.

All menu items

Let’s go over all of them, one by one.

Create Overlay

The word “overlay” can mean a few different things. In Sketch, an overlay can mean a popup, alert, or lightbox over a background. Here’s one example of an overlay:

Overlay as message

However, with the Measure plugin, creating an “overlay” simply creates a layer on top of whatever you’ve selected, and it’s the same size as what you’ve selected. Here’s a selected layer:

Select Harold

Pressing ⌃⇧1 (control+shift+1) creates a little overlay layer.

Overlay layer

It’s simply a layer, the same size as your selection, filled with a beige color with an opacity of 30%.

Measure Size

To measure the size of a layer, start by selecting it.

Select Harold

Then either press ⌃⇧2 (control+shift+2) or select “2. Measure Size” from the Plugins > Measure menu.

Measure Size menu

The size measurements of that layer will then appear. You might have to deselect the layer to read the numbers.

Harold's measurements

By measuring layers one by one, you can display multiple measurements.

Multiple measurements

When you want those measurements to go away, you hide them by:

  1. Pressing ⌃⇧H (control + shift + H)
  2. Choosing “Toggle measure hidden” from the plugin menu
  3. Deleting the measurement layers (the top two in this case). This, of course, deletes the measurements instead of just hiding them.

    Layers

Measure Spacing

To measure the space between two layers, select them both.

Selecting Harold and his name

and press ⌃⇧3 (control + shift + 3) or choose “Measure spacing” from the dropdown menu.

Measure spacing

The aqua color makes it a little hard to see the numbers, but it’s still legible.

You can also select two layers, where one is inside the other.

Harold inside

Get Property

Get Property is a nice way to display all the information you want about a layer. Here, I’ve selected the text layer “Bethany” and pressed ⌃⇧4 (control + shift + 4).

Get Property panel

Click “OK” and get this result:

Bethany Name properties

Create Note

Creating a note simply reformats an already-existing text layer. Here, I’ve created a little text layer.

Zoo crew layer

If you press ⌃⇧5 (control + shift + 5), you get a reformatted layer that looks more like a note.

Zoo crew layer as a note

Percentage for Size

Predictably, this measures a layer’s width and height as a percentage of the total image.

If you select a layer and press ⌃⇧6 (control + shift + 6), you get something that looks like this:

Size percentage

You can display sizes by both percentage and direct size measurements.

Size by percentage and point measurement

Percentage for Spacing

Like Percentage for Size, this measures the distance between the edges of two layers as a percentage of the whole image.

If you select two layers and press ⌃⇧7 (control + shift + 7), you get something like this:

Spacing percentage

Toggle Measure Hidden

You can hide and show all of the Measure layers with ⌃⇧H (control + shift + H). If you have too many measurements visible, like this:

Too many measurements

Press ⌃⇧H to make them disappear.

Hidden measurements

All this function actually does is to hide all the Measure-created layers. Here they are, at the top:

Measure-created layers

…and here they are, hidden.

Hidden Measure layers

Toggle Measure Locked

Like “Toggle measure hidden,” locking the Measure layers means they can’t be changed until they’re unlocked.

Use ⌃⇧L (control + shift + L) to lock/unlock.

Locked layers

Lite Width and Lite Height

These two options delete the selected layer, replacing it with a measurement of that layer’s height or width.

Let’s select the frog.

Selecting Kazak the frog

Lite Width

Use ⌃⇧[ (control + shift + [) for Lite Width. The result:

Lite Width

No more frog, but you know how wide he used to be.

Lite Height

Press ⌘Z (command + Z) to undo and bring the frog back.

Then use ⌃⇧] (control + shift + ]) for Lite Height. The result:

Lite Width

As with Lite Width, the frog layer itself is deleted, with only a Measure layer showing its height left behind.

Color Palette

The Color Palette menu option requires a little more up-front work before you can use it.

You have to select one or more artboards, and then choose Color Palette.

First, you have to have an artboard with color in it (images don’t count). Here’s an iPhone 6 artboard with a simple color gradient.

Artboard with gradient

Select it by clicking on the artboard’s name “iPhone 6.”

Selected artboard

Then choose Plugins > Measure > Color Palette

Measure will create a separate page called “Sketch Measure”.

First Color Palette result

It only cares about the set colors in our gradient, not all the in-between colors.

You can add to this Color Palette by selecting another artboard. Go ahead and select our original artboard.

Original artboard selected

Choose Color Palette again, and you’ll see this:

Additional colors in the Palette

Color Palette kept the original red and blue colors and added three colors from the other artboard:

  • black (from the background)
  • gray (from the image masks)
  • white (from the text).

Notice that the colors from the animal images were ignored.

Color Palette and Opacity

Color Palette has some trouble with non-opaque colors. For example, if you change the red color in the gradient to 50% opacity, like this:

Lowering red opacity

And then run Color Palette, you get this:

Color not appearing as half-opaque

There’s nothing in the Palette that shows we have a non-opaque red color in an artboard.

Fixing this requires a little workaround. To get Color Palette to recognize an opacity, you have to either

  • create a new color, or
  • resize the shape where you altered the color.

Go ahead and create a rectangle with a 50% opacity green color, and resize the original gradient.

Opacity workaround

Run Color Palette.

New colors

Aha! There they are.

Spec Export

Spec Export creates an HTML page of an artboard, which you can then either send to a client directly or post on a web site.

To see it in action, select our original artboard.

Press ⌃⇧E (control + shift + E) or select Plugins > Measure > Spec Export.

You’ll be asked to save the HTML and JavaScript files somewhere.

Save your spec files

This will save a folder with some files in it.

Sample export

Open up “Tablet Portrait.html” in a browser.

Spec Export

You can also click on an item in the spec to get its details.

Click on Harold

The developer of Sketch Measure says that Spec Export is still in beta, so it may be a little buggy. The measurements on the exported spec (that is, the web page) don’t always match up 100% with the measurements you’ll see in Sketch, but they’re pretty close.

Settings

The Settings menu has several options.

Settings Menu

Move to @Specs

Selecting “Move to @Specs” places any measurement layers in a special locked layer called “@Specs”.

Move to @Specs

There isn’t any documentation for the menu item, but it appears to simply make it impossible to accidentally move the existing measurements.

Clear Page Measure

Choosing “Clear Page Measure” deletes all of the measurement layers, even if they’re in a @Specs folder.

Measurements before choosing “Clear Page Measure”:

Before "Clear page measure"

And after:

After "Clear page measure"

Reset Configs

Choosing Reset Configs in Measure displays this popup:

Configs

Choose whatever resolution you want, usually depending on what kind of device you’re designing for.

Be warned: this menu always shows the first option (Standard) selected, even if that’s not what you originally chose.

Toggle Theme

Measure has a couple different ways to display measurements, but it’s not clear what they are without experimenting.

The default theme is what you’re already seen:

Default theme

Choose “Toggle Theme” and nothing happens. Unfortunately, you have to remeasure everything in order to see the new theme.

Other theme


That’s the Sketch Measure plugin, inside and out. Good luck!

Comments