Tiled Patterns in Sketch with Craft

Recently while using Craft I discovered a secret feature. Actually, before we get to that, let me talk a bit about how Craft works.

Craft is a Sketch plugin that makes working with real data a breeze. Instead of lorem ipsum and gray boxes, it lets you insert all sorts of real copy and real photos, from a number of sources.

The Photos panel in Craft lets you pluck images from a local folder, Dropbox, Unsplash, and the web at large.

That last part is what we’re talking about today. Using a tiny built-in browser, Craft lets you insert any image on the web right into Sketch. It works like this:

1. Select a shape you want to fill with an image
2. Open the Photos panel in Craft, and select Web as the source
3. Browse to any website and click on a photo
4. Craft will set a new background fill on your selected shape, using the image you just clicked on

The chosen image will fill your shape perfectly from edge to edge, akin to the CSS property background-size:cover; which is great.

But what if you need a tiled background? Perhaps for a pattern?

Insert Tiled Patterns with the ALT Key

Here’s the secret sauce: if you want to insert the image as a tile, you can do so easily by holding the ALT key when clicking the image. Here’s a GIF of that in action:

Perfect! Now your background fill will be inserted as a Tile, which means it will repeat again and again (in both the X and Y directions). Still not getting the difference? Check out this comparison I made:

The one of the left is old and busted, the one of the right is new hotness. That’s all there is to it. If you need a full background fill, go with a plain ol’ click. If you need a tiled fill, hold the ALT key while clicking.

Grab some patterns!

Since the built-in browser can grab images from any site, you’re free to use patterns from any source you like. Here are a few of my favorites:

• Free Patterns, a collection of over 1,000 patterns, ranging from subtle to bright and flashy. You can even sort by color, which is pretty dang helpful when browsing.
• Subtle Patterns, a source for hundreds of minimal patterns. Note: since the site isn’t responsive, you might want to visit the Thumbnail View when selecting patterns.

A note to webmasters (is that still even a term?)

When the mini-browser hits your site, it’s basically like a mobile device. The smaller viewport works best with a responsive site, where things rearrange and tighten to the available space.

Even though my site is responsive, I took it a step further and built a Craft-specific page that lets me easily pluck any content I want, fast as can be. On the left is a bucket of all my post titles, on the right is all my recent media.

This should help with my upcoming redesign, a process that would normally require a ton of copying and pasting from my live site. Now? I just pop open Craft.

I’m hoping more of my favorite design sites and resource collections start making even-more-responsive versions of their offerings, because this seems like a match made in design heaven.