My 6 Ideas for Sketch Guides on Steroids

Noah Nahar
Yummygum Journal
Published in
4 min readApr 12, 2018

As a interface designer you probably need some guiding in margins, paddings and alignment. Some designers strongly believe in using a grid, others use guidelines. I am a guideline guy.

These are the options to help you align in Sketch and what I think are the pro’s and cons to use them.

Sketch enables you to view a layout grid or a regular grid. But these can’t have a variable spacing between them and aren’t very flexible in terms of placement and alignment. So we can open the rulers [⌃R] and use Sketch’ smart guides. Guides are very handy (and almost a must for me) to use when designing interfaces in Sketch.

However, the guides have way more potential than the function they have now. That’s why I came up with a couple of ideas!

Idea #1: Multi-color Guides

Now imagine a world in which multi colored guides exist, we’d have more overview in the artboard we are working in. This way you can easily make a distinction between your main guides, gutters and the guides you use to align shapes. When right clicking on a guide, you would be able to choose a color.

Idea #2: Guide Groups

What if we could put our guides in a group and hide or show them only when we need them? Just like we do with our layers and regular groups. We could make a group for example to use in a grid or perhaps a guide group to help with alignment. A new key combination to instantly group guides could be [⌃⌘R]. The guide groups would be identified by a green folder with a guide icon on it, to differ from traditional groups. Every time you create a new guide, it automatically will appear in the guide list.

Idea #3: Locking Guides

It can happen that all your guides move up by accident when you’re busy pressing keys and dragging layers. That’s why it can be helpful to lock your guides. Locking guides should be done just as easy and in the same way as locking layers; [⇧⌘L].

Idea #4: Symbolize Guides

I know that the Copy Guides plugin exists and I use it a lot. However, if we’re envisioning a perfect Sketch and creating this hypothetical concept anyway; there’s a lot to gain still if you think about creating and re-applying guides. Imagine that you create the perfect set of guides and just add them to your Sketch library and use them as symbols.

Idea #5: Bind Guides

In a lot cases we set a guide on the left side of a shape and on its right side. When we want to adjust the width of the shape, we also need to adjust the left and right guides. It would be great if we could bind guides together as a set and when I drag one guide 20px to the left, the right one would relatively move along with it to the right.

Idea #6: Quick Positioning

To arrange the guides quickly, one should be able to give the horizontal guides a Y position and the vertical guides a X position in the Inspector. This way you will know hundred percent for sure that your guides are on the right pixels.

Deep down inside I hope someone who works at Sketch is reading along and they’ll pick up on some of these ideas. And if not; it’s always a lot of fun daydreaming about new features I would use as a designer, nonetheless.

Would you use this? Looking forward to reading about your hypothetical features for Sketch.

--

--