Edit the Default Artboard
Presets in Sketch 3

NMC designers are all big fans of Sketch (be sure to check out my post on essential plugins). And one of its handiest features is the artboard presets: select Insert > Artboard from the menu (or simply type the letter 'A') and you'll see the inspector change to something like the image at left.

Adding artboards is easy by clicking the "+" at the bottom of the inspector pane. Sketch will prompt you for the dimensions and you can name it whatever you want; artboards created this way are automatically grouped under the "Custom" heading.

That's all well and good for one or two, but what if you want to change the names or sizes of the ones you add? Or delete them? Or edit the default artboard presets that Sketch comes with? A quick search and you'll find instructions to look for a folder like this:

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

For whatever reason, that folder doesn't exist on my machine (I have a Mac App Store copy). I looked around and I have two folders called com.bohemiancoding.sketch3 and that's where I found the file instead:

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

In it, you'll see a file called artboards4.plist: that's the one you're looking for — at least, that's the one that worked for me. You can edit a .plist file in practically any code editor (Sublime Text, Coda, whatever).

Depending on your setup, the Library folder might be hidden in Finder. If you're comfortable navigating at the command line, you can use Terminal; otherwise, open a Finder window, select Go from the menu and then press the option (⌥) key. You should see Library appear in the dropdown. Alternatively, open a Finder window and press command (⌘) + G in the finder and paste in the above line to go to that folder.

(For the uninitiated, the little tilde character "~" before "Library" represents the path to your home folder. So if your home folder is named "Galadriel", then you want /Users/Galadriel/Library/...)

The syntax of a .plist file takes a little getting used to but it's essentially just a series of XML key/value pairs. Here's my custom one:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<array>
	<dict>
		<key>name</key>
		<string>Web Design</string>
		<key>presets</key>
		<array>
			<dict>
				<key>height</key>
				<real>568</real>
				<key>name</key>
				<string>iPhone 5 Portrait</string>
				<key>width</key>
				<real>320</real>
			</dict>
			<dict>
				<key>height</key>
				<real>667</real>
				<key>name</key>
				<string>iPhone 6 Portrait</string>
				<key>width</key>
				<real>375</real>
			</dict>
			<dict>
				<key>height</key>
				<real>320</real>
				<key>name</key>
				<string>iPhone 4 Landscape</string>
				<key>width</key>
				<real>480</real>
			</dict>
			<dict>
				<key>height</key>
				<real>1024</real>
				<key>name</key>
				<string>Tablet Portrait</string>
				<key>width</key>
				<real>768</real>
			</dict>
			<dict>
				<key>height</key>
				<real>1024</real>
				<key>name</key>
				<string>Tablet Landscape</string>
				<key>width</key>
				<real>1024</real>
			</dict>
			<dict>
				<key>height</key>
				<real>2048</real>
				<key>name</key>
				<string>Small</string>
				<key>width</key>
				<real>1280</real>
			</dict>
			<dict>
				<key>height</key>
				<real>2048</real>
				<key>name</key>
				<string>Medium</string>
				<key>width</key>
				<real>1440</real>
			</dict>
			<dict>
				<key>height</key>
				<real>2048</real>
				<key>name</key>
				<string>Large</string>
				<key>width</key>
				<real>1600</real>
			</dict>
			<dict>
				<key>height</key>
				<real>2048</real>
				<key>name</key>
				<string>NMC</string>
				<key>width</key>
				<real>1340</real>
			</dict>
		</array>
	</dict>
	<dict>
		<key>name</key>
		<string>iPhone Screens</string>
		<key>presets</key>
		<array>
			<dict>
				<key>height</key>
				<integer>1136</integer>
				<key>name</key>
				<string>Portrait</string>
				<key>width</key>
				<integer>640</integer>
			</dict>
			<dict>
				<key>height</key>
				<integer>640</integer>
				<key>name</key>
				<string>Landscape</string>
				<key>width</key>
				<integer>1136</integer>
			</dict>
		</array>
	</dict>
	<dict>
		<key>name</key>
		<string>iPad Screens</string>
		<key>presets</key>
		<array>
			<dict>
				<key>height</key>
				<integer>768</integer>
				<key>name</key>
				<string>Landscape</string>
				<key>width</key>
				<integer>1024</integer>
			</dict>
			<dict>
				<key>height</key>
				<integer>1536</integer>
				<key>name</key>
				<string>Landscape Retina</string>
				<key>width</key>
				<integer>2048</integer>
			</dict>
			<dict>
				<key>height</key>
				<integer>1024</integer>
				<key>name</key>
				<string>Portrait</string>
				<key>width</key>
				<integer>768</integer>
			</dict>
			<dict>
				<key>height</key>
				<integer>2048</integer>
				<key>name</key>
				<string>Portrait Retina</string>
				<key>width</key>
				<integer>1536</integer>
			</dict>
		</array>
	</dict>
</array>
</plist>

You don't need to quit Sketch to see the changes. They should appear instantly while the app is open after you save the file.

My label names are mostly arbitrary but I based them loosely on the viewport / responsive sizing breakdown suggested by Chris Coyier in this CSS-Tricks article Media Queries for Standard Devices. If you need more help, the tutorial series Sketch Casts has a (paid) video walkthrough.

Happy Sketching!