Published on | Prototyping: From UX to Front End — Medium Guy Ligertwood

Making Sketch to Invision a breeze

My desk drawn in Sketch!

My Work

Like all UX Designer’s, I have a set of tools to get the job done. Sketch by Bohemian Coding is the tool I currently use to design Tabcorp’s apps. I’ve been a Sketch user for two years and similar to my Wacom tablet , once I started I was hooked. Sketch is simple and great for what I do.

The Problem

When making a straight forward prototype, I use InVision. Now here comes the problem. When I export artboards into InVision from Sketch the screens need to be ordered by number. As I design artboards I can number them as I go. However if later on I add a screen in the middle (which happens a lot) it messes up the numbering system. As a result it won’t sync in the right order.

After several trips to Github, I came across a few helpful plugins that solved my problem — more than one plugin was needed!

The Goal

To name, number & sort all my artboards quickly & easily. Do this so that I can have a tidy Sketch file that downloads to Invision in the correct order.

The 5 Steps

1. Collapse all Sketch artboards (this one’s a gem!)

Download this Sketch plugin: http://ift.tt/2oftfPG

Then you can press command E to collapse all your artboards in Sketch.

Tip: If you use no other plugin’s from this article, make sure you use this one!

Cracking plug in!

2. Top align artboards

Select all your required artboards and hit the top align. This allows the next plugins to see the artboards as a group.

Don’t forget to top align!

3. Rename artboards

Download this Sketch plugin: http://ift.tt/2ozsiVL and rename all your artboards.

Tip: make sure there is no number in the second input box

Leave the second input box empty

4. Prefix artboard names with numbers

Download this sketch plugin: http://ift.tt/2ozvksP

Now number all your artboards.

Tip: For some reason it starts it numbering from 100 or 200 or some other number, not sure why, but it makes no difference!

This is needed for Invision to order the files correctly

5. Sort artboards

Download this sketch plugin: http://ift.tt/2ozrAHV

Select the unsorted artboards and sort them!

Tip: You don’t have to do this but it keeps a tidy Sketch file and is great for the OCD designers!

The Result

Problem solved! Tidy Sketch files, time saved and a slicker workflow prototyping Sketch files in to Invision. The end goal would be to have is done in one step, but for now it works.

Awesome Sketch plugins to speed up & simplify your journey into Invision was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Awesome Sketch plugins to speed up & simplify your journey into Invision

Cool stuff, every week

More Articles