How to Keep Your Sketch Kitchen Clean?

It is important to keep your Sketch designs clean and free of "kitchen grime" so that you can be efficient and your deliverables look polished. Here are a couple recommendations for avoiding kitchen grime in your Sketch designs: 

1. Stick to a Baseline Grid

It's important to stick to a baseline grid when designing your project. This will help keep everything aligned and organized. I personally prefer an 8px baseline grid, but you can use whatever size you like. Just make sure to be consistent with it.

A grid system is a great way to ensure that your components are spaced evenly and have a consistent visual rhythm. By using a grid, you can remove the guesswork from spacing and make it easier for your developers to work with a layout framework that adheres to the same system.

2. Use Bounding Boxes

Once you've set your baseline grid, bounding boxes can be incredibly useful for keeping objects on your artboard organized and spaced consistently. In the image below, I use bounding boxes for each tab item, and don't actually have to put any space between the tab groups. The spacing is built into the bounding box, so each tab is snug against the one next to it. Using a plugin like Ken Moore's Relabel Button will allow you to create evenly spaced tabs like this in seconds.

Additionally, objects with bounding boxes have larger click areas, and allow you to use things like inner-shadows as dividers or highlighters. Which brings us to the topic of using shadows and highlights to create more visually interesting and interactive content.

3. Avoid Lines for Dividers

It can be difficult to grab a line segment, especially when there are many other pixels on the screen. Sketch is saying "We know there are 2 million pixels on the screen, but you need to click just this one.

Secondly, even if you select the "Fit to Pixel" option in Sketch Preferences, drag-resizing a line will always put it on sub-pixels. This is extremely aggravating, and it will mess up your spacing elsewhere because the ruler will round up values for any object that sits on sub-pixels.

Instead of using a line to separate each item, use an inner shadow. Here's how: 

This is better for a few reasons. Your click area is larger, you're protected from subpixel rendering, and most importantly, you can use it as a style. 

You can set your bounding box and give it an inner shadow.

4. Organize Your Styles and Symbols

By putting slashes in your style and symbol names, you can create an organized structure for finding things later. Sketch will even alphabetize things in your submenu for you, making it easier to find what you're looking for.

5. Give all of your layers names.

You can name your layers by selecting them on your artboard, then using the hotkey sequence Command+Shift+J, followed by Command+R. Alternatively, you can use the Tab key to jump to the next layer in your layers list and rename it that way.

If you have multiple layers that you need to rename, you can use a plugin like Rodrigo Soares' to do so quickly and easily. This plugin also allows you to find and replace text in your layer names, as well as add sequencing.

I used to never use the search function to find layers, but once I started naming layers semantically to describe what the content was and not what the content said, I realized the power of searching layers. One last thing - clean as you go. When you finish designing that list item, rename it! Group it! If you're feeling wild, symbolize it! Tiny amounts of work along the way will save you a ton of time in the long run. No one likes cleaning a tower of dirty dishes after spending an hour cooking dinner, so do yourself a favor and clean as you go.

Read More: The Best Kitchen Island