Custom Sketch Artboard Presets

I love Sketch. It's my web-design tool of choice, great for creating mockups, prototypes, icons etc. When creating artboards in Sketch, you can choose from a set of -- in my opinion, very apple-centric -- presets. Here I'll show you how to create your own artboard presets.

The Easy Way

Clicking the artboard icon

artboard24
in Sketch reveals the artboard presets.

artboard-resizing
resizing the artboard

You can create a new artboard by simply dragging a rectangle onto the canvas. You can resize the artboard by editing the dimensions in the right sidebar.

artboard-renaming
renaming the artboard

You can rename the artboard by double clicking the name in the left sidebar.

Once you've resized and renamed the artboard, click the plus button near the artboard presets, this will add the current artboard to your presets.

artboard-presets

This is well and good if you just want to add one or two artboard presets, but what if you want to add a bunch of them, and with with a fancy drop-down menu like the one beside 'Icons' and 'iOS Screens'?

For that, we need to take a dive into the plists.

The Hard Way

Sketch actually keeps these artboard presets in an artboards.sketchpreset file located somewhere on your mac. If you're using the App Store version of Sketch, then the file is located here:

~/Library/Containers/com.bohemiancoding.sketch/Data/Library/Application  Support/sketch/

Press command+G in the finder and paste in the above line to go to that folder.
In this folder, there's the artboards.sketchpreset file. We can open it in a text editor like Sublime Text.

The file is an xml document with the artboard presets. We can see that each preset has a name, height and width associated with it.

I'm going to add some presets for some old-fashioned desktop displays. The resolutions will be 640x480, 800x600, 1024x768 and 1280x1024. All we have to do is add the following code right before the ending tags.

<dict>
    <key>name</key>
    <string>Desktop</string>
    <key>presets</key>
    <array>
        <dict>
            <key>name</key>
            <string>tiny (640x480)</string>
            <key>height</key>
            <integer>480</integer>
            <key>width</key>
            <integer>640</integer>
        </dict>
        <dict>
            <key>name</key>
            <string>Small (800x600)</string>
            <key>height</key>
            <integer>600</integer>
            <key>width</key>
            <integer>800</integer>
        </dict>
        <dict>
            <key>name</key>
            <string>Medium (1024x768)</string>
            <key>height</key>
            <integer>768</integer>
            <key>width</key>
            <integer>1024</integer>
        </dict>
        <dict>
            <key>name</key>
            <string>Large (1280x1024)</string>
            <key>height</key>
            <integer>1024</integer>
            <key>width</key>
            <integer>1280</integer>
        </dict>
    </array>
</dict>

And Voila, we've created our custom artboard presets.

custom-artboards