Editor’s note: This is the first of 2 posts on Sketch for front-end developers. Read part 2 here.
As a front-end developer, finally getting passed a design file is a big moment for me. There’s lot to explore, busily digging into every little corner of what I’ll be spending my next few weeks on.
That Christmas-morning excitement is easily dashed when someone sends me a file from a program I’m not super familiar with. I mean, I’ll build your website that’s designed in Illustrator, but I’m not gonna be stoked about it.
It’s in that spirit that I’m here to attempt to explain some inner workings of the relatively new kid on the block, Sketch. As we see more adoption, I’m noticing more and more developers diving in, ready to learn the new ropes.
If you’re looking to do that, you’ve come to the right place.
Related: 8 critical shortcuts in Sketch
Sketch 101
To understand how to navigate your way around a file, let’s start with some basics—terms and skills you’ll need every time you open a Sketch document.
Most of these aren’t explicitly new concepts, but Sketch has a way of doing things a bit differently (read: better) than you might be used to in other design apps, so this is definitely the place to start.
Terms
Pages
A single Sketch document is capable of containing a bunch of different sections. Pages are the top-level of organization inside your Sketch file, and designers use them in a number of different ways.
They can be used as literal pages, like those in your website or app. And they can be used to split out and organize different views or breakpoints. If your designer uses Craft, you might find a page containing a living style guide.
Point is, you might need to open the Sketch doc and poke around a bit to make sense of your designer’s flow. No biggie—just jump from page to page with the menu in the upper left corner of Sketch, located at the top of the layers palette.
Artboards
Inside of a single page, your designer is probably using multiple artboards. An artboard is a space inside of a page that’s used to contain a specific design.
Just like pages, there are lots of ways to use artboards. Most often, artboards are used to contain a single screen or single view. Sometimes artboards contain isolated elements, like icons or modular blocks of design. I often use artboards for various device breakpoints so I can design for all devices inside a single space (I love seeing mobile right next to desktop). When I’m working on a complex flow, I’ll have artboards with step after step laid out in a big web.
Take some time to poke around the file and see how the designer is using artboards. You’ll find artboards listed in the layers palette, and you can jump from artboard to artboard by holding down the FN key and pressing the right/left arrow key.
Layers
You kinda get a break on this one, because layers in Sketch work like they do in most other modern graphics programs. Everything you see inside the document is listed in the layers palette, which you’ll find running along the left side of Sketch.
If your designer loves you, things will be helpfully named and grouped logically. If you find yourself a bit lost in the document, you can automatically scroll a layer into view by selecting it in the layers palette and pressing CMD + 2. Remember that key combo—we’ll be talking about it again in just a moment…
Symbols
Okay, developer—prepare to get excited. Symbols are what initially pulled me into Sketch, because they make repetitive and complex design systems really easy to work with.
Most simply, a symbol is a reusable bit of design. It’s a group of elements packaged to be reused around the Sketch file, all in sync. Sound familiar? It’s just like the code you’re about to write! Using symbols keeps the design consistent from view to view
, and it gives a developer huge hints about how to translate this design system into code.
“Using symbols keeps the design consistent from view to view.”
A symbol is denoted in the layers palette by a purple sync icon (2 arrows pointing in a circle). In a recent update, Sketch added the ability to catalog all symbols inside the document into a special page, called symbols (smart, right?). As a developer, that’s a great place to get quick overview of the modules that make up the build—a great head start.
Styles
Another one that translates well into code, styles are visual rules (color, border, shadow, etc.) saved for repeated use around the file. A designer can use styles to make sure fonts and fills are consistent from view to view.
Aside from offering consistency, styles also offer sweeping changes, like the ability to instantly change all title text to dark blue (across dozens of pages—a huge timesaver). And just like symbols, they give you a darn good hint about how to structure the build.
“Styles offer consistency and the ability to make sweeping changes.”
My favorite way to view all styles in a document is with Craft, which creates a living style guide that I can share with my team. Getting a clear view of the design system before you build saves lots of time.
Basic skills
Now that we’ve got some basic navigational terminology covered, let’s talk about some actual functionality—things you’ll be doing with the mouse over and over as you build.
Selecting: With a complex design, it’s sometimes hard to select exactly the element you need from a crowded layers palette or a busy canvas. Fix that by holding the CMD key, and make a direction selection of any element on the canvas, even through groups and other layers. To keep it rolling, you can hold CMD + Shift and select multiple layers at a time.
Measuring: A front end is only as good as its spacing, which means you’ll be using the measuring tool a lot. With an element selected, hold the option key while hovering on other elements to bring up the measurement guides. You’ll get exact pixel values, centering lines, smart snapping to other layers, and more.
Exporting: There’s a full section on it coming up in another post, but I wanted to mention it here, because you’ll be doing a lotttt of exporting. The good news? Sketch has my favorite export system, ever. You can export layers and artboards and slices with ease, and the export settings travel with the file, saving on repeat work.
Zooming: Sketch has something called the infinite canvas, which means designers are capable of putting lots of stuff inside a single page or document. As mentioned above, CMD + 2 will automatically zoom to the selected layer, and it works just as good when selecting something on the canvas. You can also hold Z to zoom (or Z + OPT to zoom out) with the mouse, but I find myself using the auto-zoom far more often.
Whew! With those basics covered, we’re ready take some deep dives into the finer points of Sketch. Stay tuned for the next post in this series—we’ll explore the robust export system, making and sharing style libraries, pulling CSS directly from the design file, and working with Sketch files without even having Sketch installed (spoiler alert: it’s totally possible).
On to part 2 of this article
Keep reading about Sketch for front-end developers.
More posts on Sketch
Clark is a UX designer in Austin, TX. Equal parts freelance, startup, and agency, he’s been rebuilt into a content producer with a designer-friendly interface.
