Sketch Fu: exporting artboards in sequence

Sketch Fu is a series of articles that aim to help you — product designer and Sketch user — work faster, smoother, and better.

You’re working on a new feature for your music app. This feature is called “Add to Playlist”, and the flow of adding the Now Playing song to a new playlist is an important one.

You’re a good designer, so you’ve named your artboards meaningfully:

1. Home Screen
2. Music Home Screen
3. Now Playing
4. Now Playing — Menu
5. Add to Playlist
6. Create New Playlist

Now, Anushka from Marketing comes along, sees the feature’s immense potential, and declares that she’d like to build an advertising campaign around this flow. Good for you!

She just needs your screens in JPG format, and her team will take care of the rest. So you select your artboards, export them to Finder, compress them, and send them over to Marketing while slowly moving towards your champagne cabinet.

Just before you celebrate, Anushka calls you to complain that the flow doesn’t make any sense. “How can Add to Playlist be the first screen, Home Screen be in the middle, and Now Playing be at the end?”, she asks with befuddlement.

And so, you realise that the files need to be renamed in order. You stow the champagne away.

There are two painful options before you:

1. Manually prefix each file in Finder with “1”, “2”, etc.
2. Manually prefix each artboard with “1”, “2”, etc. and re-export.

I’m here to tell you there’s an easier way.

Rename Smartly with Rename It

Rename It is a free plugin I use to handle such situations. It has a wide set of nifty features, but I’ll focus on just one for now.

1. Select your artboards
2. Open Rename It from your Plugins and choose “Rename Selected Artboards”
3. Type “%n” or click on Num. Sequence ASC. This will rename your artboards to “1”, “2”, etc. in ascending order.
4. Enter a “ - ” just to be clean.
5. Type “%*” or click on Layer Name. This will add each artboard’s current name on to the artboard’s new name.
6. Hit Rename.

That’s it. Review your artboards.

Now export away! Your screens should be in perfect order.

Renaming 6 screens might not be a big deal, but consider how much time and effort you’d save with longer flows of 10+ screens.

Rename It comes with a bunch of other features you might find very useful, including Find and Replace. Explore the plugin over here.

Sketch Fu: Copy Paste Position Size

Sketch Fu: custom keyboard shortcuts