How to change layout settings in Sketch
Before diving into recommended Sketch layout and grid settings, we first have to be able to change the layout settings available in Sketch. Here's how you can do that.
- Open Sketch and open a (new) file.
- Go to the top menu.
- Select view, canvas, and finally, layout settings.
You will now see the dialog with Sketch's layout settings, as seen in the image below.
These settings only apply to the pages you have selected.
If you want to work as efficiently as possible, I suggest setting your settings immediately and selecting the 'make default setting' option at the bottom of the dialog.
Recommended layout settings in Sketch
Once you've found your Sketch layout dialog, it is time to set up your settings.
As you can see, the layout dialog in Sketch shows several settings you can play around with. These include the following.
- Total width.
- Offset.
- The number of columns.
- Gutter width.
- Column width.
- Gutter height.
- Row height.
This list of layout settings can seem overwhelming at first but don't worry. These settings are connected. By changing the total width and the number of columns, most other layout settings adjust accordingly.
In some cases, you do not need to use rows. Because of this, you do not need to set the gutter height and row height.
With this in mind, I hope that changing the layout settings in Sketch becomes more manageable. So, let's go through the settings now step by step.
Total width and offset
First, we will set the total width of our Sketch layout. Align your settings with popular CSS frameworks like Bootstrap or Bulma. This way, you ensure a clear and easy handover with the development team of your project. To do so, we're going to set some breakpoints.
In responsive design, a breakpoint is the screen width where the design shifts from one screen size to the next.
Here's an overview of common breakpoints.
- Extra small: 360px.
- Small: 576px.
- Medium: 768px.
- Large: 1080px.
- Extra large: 1440px.
The small and extra small breakpoints are generally used for mobile devices. You can use the medium breakpoints for tablets. Everything from large and up is used for desktop devices.
Sketch has a nice feature where you can create artboards depending on these breakpoints. It will significantly help you with your layout settings.
As for the offset, you can have Sketch calculate the offset by selecting the 'center' button in the layout dialog. By centering the layout, you create an equal offset on both sides of the Sketch layout. It is a best practice in UI design.
Number of columns, column width, and gutter width
Now that we have the total width and offset, setting up the number of columns is up next. Twelve is the key number here.
The exciting thing about the breakpoints mentioned above is that you can divide them all by 12. Then, add line heights and padding in multitudes of 12.
Congratulations, you're looking at your first grid. You can set all of these using Sketch. 12 is indeed the magic layout number here.
If you set the number of columns to 12, you can always use multiple columns together to get to fewer columns. I recommend setting the number of columns to 6 and 2 for tablet and mobile, respectively.
Set the gutter width to a multitude of 12 as well. I usually go for 24px. When you do, Sketch automatically calculates the column width to fit your other layout settings.
Sketch layout and grid template
Layout and grid settings give a designer many options for setting up a project in Sketch. To help you, I've created a template that includes everything mentioned in this article and more.
- Common breakpoints.
- Layout settings.
- Examples and best practices.
- Project starter page.
- Compatible with Sketch and Adobe XD.
Sketch Layout and Grid Template
The Sketch layout and grid template is available on Gumroad for $4. Click the link below to check it out.
Frequently asked questions
As with many of my posts, I finish this post with several frequently asked questions about the subject matter. In this case, I'm answering some Sketch layout and grid questions. So let's take a look.
Further reading
Having a clear layout and grid setup in Sketch can help boost productivity in a significant way. In addition to these settings, you can apply many more options to boost your work in Sketch.
You can look at our list of Sketch plugins, for example. There's also our guide on picking the right design tool in the first place.
