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 TextCoda, 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!

Comments

Chris Hadley's avatar
Chris Hadley
Yeah man. Thanks for this, i was just wondering this week how to change the default artboards.
Sean's avatar
Sean
Hi there I hate being stuck to layers only moving forward to top of their layer. Is there a shortcut to bring a layer to the top of the artboard. Use this in PS all the time.
thanks
Nathan's avatar
Nathan NMC team member
@Chris You got it!

@Sean There sure is. Look under Arrange for Bring to Front. The shortcut is control command option up arrow and all the defaults are here if you forget: http://sketchshortcuts.com
Dan Dineen's avatar
Dan Dineen
Nice write-up of a really useful trick to tailor Sketch. Thanks :-)

I've been using my own artboard presets via this method for a few months now. It works great. Or rather it *did* work great...
I updated to Sketch 3.3.1 this morning and it appears that it no longer uses artboards4.plist to set the artboard presets (or on my Mac at least this file no longer works). Do you have any thoughts on where the artboard presets might have gone in this latest version of Sketch? I'd really like my carefully curated artboard sizes back!
Fredrik Carlsson's avatar
Fredrik Carlsson
@Dan Dineen If you havent figured it out yet.

"Easiest (I think) way to find where this file should be is to open Sketch. Click Plugins (in menu bar between Arrange and View). Then Reveal Plugins Folder... (at the bottom for me). This opens up finder in the folder where the file should be put. It used to be named artboards4.plist but now it's just artboards.plist." https://gist.github.com/fc-io/951592753248dd3ce5ab
Johannes's avatar
Johannes
With Sketch Version 39.1 (31720) this does not work for me. Does anyone else observe the same issue?
I really love these custom artboard sizes. Does anyone have a clue how to make these changes in the lastest Sketch version?
Would be happy for feedback.
Mike Earley's avatar
Mike Earley
I'm having the same problem, the file no longer seems to exist in that location or with that name. In fact, I can't seem to find that file on my computer.

Leave a comment