Hosting design specs with Sketch Measure

Sometimes I need to create a design spec for a developer or team of developers. More often than not I get little to no information about how best I can share a design spec with them. Do they have InVision or Sketch? Will they even download and open the Sketch file or PDF of the spec? How do I share work without sharing on the public internet? I ran into these problems and decided to ask another question: How can I share design specs without my end consumers needing any special software or files and being privately available?
Enter Sketch + Sketch Measure and Github Pages. Using these 3 tools will enable you to answer the question with some additional benefits:
- Design spec is hosted (Just share a link others can access anytime.)
- It can be hosted inside a firewall, keeping it private.
- No more downloads, licenses, or software needed. (They do need a browser.)
- No more hours spent making redlines.
- It is interactive.
- It is free. (Assuming you already have Sketch.)
Assuming that you are still interested you will need three tools for this example:
For this tutorial, we will be exporting and hosting this simple modal design. Let’s get started.

Part 1: Sketch Measure
Start by using Sketch and Sketch Measure. Our goal in part 1 is to export our spec as a static HTML site.
- Add Sketch Measure plugin to Sketch. There is a good write up here if you need help with that.
- Now that you have Sketch Measure installed we can get into the fun stuff. Ether using the design provided our your own go-to Plugins > Sketch Measure > Spec Export

- After selecting Spec Export you might get a pop up to select units (If you have already set units this prompt won’t appear.). Pick the units you need, I will use pixels in this example.
- Select the artboards or pages you would like to export. You can also make some choices about layout and order, more details on can be found on Sketch Measure’s GitHub.
- Choose where to export your file and export. Be sure and export the file to a place that makes sense to you. I keep a folder on my machine for all my design specs.

DISCLAIMER: As of writing this the measure plugin hangs/freezes when export artboards with Symbols. My current workaround is to duplicate designs and detach all Symbols before exporting.
Part 2: GitHub Desktop
In part 2, there are several ways you can approach getting your work to GitHub. We are going to focus on using the GitHub Desktop app but Terminal works great as well.
- If you didn’t already, download the GitHub Desktop app.
- After the application is installed and you have logged in you should see a screen something like this.

- We have already exported the design spec and created a folder for it. Click “Add an Existing Repository from …”.
- Add your repo by using “Choose…”, navigate to where you exported the design spec and open the folder.
- Click the “create a repository” in the detail text of the new pop-up.
- A new pop-up for the details of the repo you are about to create will appear. Note the “Local Path” is pre-filled and disabled and “Name” is pre-filled. Change the name if you want and click “Create Repository”.

- After clicking create you will be taken to repo changes screen. There are no changes listed. That is because your spec was in the folder when you created the repo so it automatically was committed to the repo. If you go to the “History” tab you can see this.
- Click “Publish repository” and your work will be pushed to Github.
- “View on Github” is an option now. Click “View on Github” or go to the repo on GitHub.

Part 3: GitHub
Now it is time to host your design spec and get the URL to share. Your repo page on Github should look something like the image below.

- Navigate to the “Settings” tab and scroll down to the “GitHub Pages” section.
- From “Source” use the dropdown to select the “master branch”.
- Click “Save” GitHub will generate a URL for your spec. Click it and see it live! (You may have to wait a few seconds for it to be hosted.)

Congrats, your spec is hosted! Share this URL with your team. It will be accessible to anyone or if you are behind a firewall it will be only available to those that are within it.
If you are interested in seeing the spec from this tutorial, it can be found here.
Justin Carter is a Product Designer at IBM Design based in Durham, North Carolina. The above article is personal and does not necessarily represent IBM’s positions, strategies or opinions.

