Sketch for front-end developers, part 2

If you’re just joining us, we’re taking a look at Sketch through a front-end lens. In part 1, we covered the basic terms and skills that’ll let you poke around
inside of Sketch.

Now we’re going to take a look at the really important stuff, mainly: getting stuff out of Sketch.

Exporting assets

When I start a build, one thing I find myself immediately doing is pulling asset after asset out of the design file. Images, illustrations, icons—they all need to be selectively cut out of
the document for placement into your front-end build.

And Sketch gives us tons of ways to do that! The way it manages exports is one of the main reasons I use Sketch. There are a number of ways to makes things exportable, all with specific
use cases:

Slices are the most traditional way of grabbing something out of the document. You can use the Slice tool (press S key or Insert > Slice) to manually select regions of the canvas you’d like to export.

Layers and groups can be exported by selecting them in the palette and using the Make Exportable dialog in the bottom right of your Sketch interface. It’s a great way to quickly isolate assets in a complex document.

Artboards can be exported whole, by selecting it from the canvas and using the Make Exportable dialog. I usually use artboard export to share entire screens, either with my team in Slack or into a prototype with InVision.

As you mark things for export, you’ll also able be able to select the file type and the export file size (@2x, @3x, etc.). The best part? It’s stackable! Which means you can grab that icon in all 4 sizes in 1 swing.

Once an asset is marked for export, it’ll show up in the Export menu (top right in Sketch interface), as well as travel with the file. Meaning, if you share the file with a team member, all the assets will be ready to roll when the file is re-opened.

Recently the team behind Sketch released 2 official plugins targeted at the export process: SVGO Compressor and Sketch Image Compressor, and both help you minimize the size of your exports (while using trusty open-source libraries).
There’s also a command line tool, but we’ll talk about that a bit later.

Making a Style Library in Sketch

The phrase “handoff” has recently fallen out of style, and with good reason. We’re getting rid of that old way of working—where the designers design and then separately the developers develop.

“As the lines between design and dev blur, it’s more important than ever to document work.”

As the lines between design and dev blur, it’s more important than ever to document, document, document. Keeping track of the decisions being made leads to a more consistent build, less last-minute rework, and smoother teamwork all
the way through.

Related: Learn how to switch to Sketch

While there are dozens of ways to build out a style guide, I tend to opt for something automated (out of both laziness and desire for accuracy). My favorite is Craft Library, which gives
you some super-handy tools for organizing and documenting your design decisions (and soon-to-be code decisions).

Library has a couple ways of indexing styles. Your Document Styles are a complete inventory of styles and colors and font sizes inside your document—every single one. Your Shared Library is a bit more choosy, and you
can individually decide what gets added to it, including symbols and groups you can define. Think of it a bit more like a public repo where you only put the stuff you’re sure about and ready to share.

I’d imagine at this point that most developers in the crowd get how awesome this is, but here are a few more things to keep in mind:

Inventory everything. See every single color, font, and more in a single place. It’s a great place to start before you write any code, and it’s just as helpful when you’re deep into the build. Even better, seeing all the styles at once
is also a great way to cut some fat before it gets to code, as it makes it easy to spot duplicate and near-duplicate styles (which happen to even the best designers).

Share your style guide. Craft makes it easy to share a style guide between team members, which means it’s easy for designers and developers to work together on this.
Regardless of who creates the guide, review it together and discuss the finer details.

Consider symbols part of your guide. I love considering the symbols in the Sketch document part of the modular front-end build I’m creating. If it’s reusable in Sketch, it’s a good candidate to be reusable in my code.

In fact, with Craft Library, you can easily add symbols and other elements into named buckets for easy sharing. One designer can make the card layout, another can fill it and place it into the layout, and then you can code it.

A good style library can get rid of one of the worst things during a build: surprises. While surprises might be good for birthday parties, during a tight build they’re absolutely the worst.

Pulling CSS from Sketch

One of the best ways I can explain what I do as a front-end developer is to call myself a translator. Open the design file, look at the elements, determine the size/color/position, translate this in my head into HTML and CSS,
save, rinse, repeat.

“This thing is blue and is this big and has this kind of font.”

It’s not exactly hard, but the repetition can be crushing. It’s a lot of looking, computing, committing.

Then one day I noticed Sketch had a Copy CSS option in the right-click menu.

“Front-end developers are translators.”

Let’s check out a quick example, in the form of this button. Waaaay back in the day, this might have been an image I sliced out of Photoshop. Now I can grab the CSS and make the button with code only.

When I copy CSS from this button group, it brings me the styling of button and the styling of the text inside. It also adds the layer names to help you keep things straight.

While the CSS rules provided are generally spot on, there’s a few things you might wanna consider:

Speed up your workflow—don’t replace it. The CSS generated by Sketch is a big helper, not a one-stop shop. It’s not going to code your layout for you. Think of it as a way to quickly grab verified style information,
not a WYSIWYG editor.

Add your own browser prefixes. The CSS code you copy from Sketch might need browser prefixes (fancy things like box-shadow and such), so make sure you add them yourself or use a preprocessor that takes care of it for you.

Test on your target screen. Font sizes and border settings have a way of looking different on different screen sizes and resolutions (and depending on how your Sketch canvas is set up). Before you take any of the numbers Sketch produces
as fact, check it on a real screen in a real browser.

No Sketch app? No problem.

For years now, one of the biggest problems with sending design files around on a team is that not everyone has the software to open them. Remember getting a Quark file? Or something locked to Illustrator 11 when you’ve only got 10?

Luckily that trend has been changing lately, and there are now a bunch of ways to explore a Sketch doc without even having the app installed. Let’s run through a couple:

Open a Sketch file without Sketch app using InVision. When you add a Sketch document to InVision (free, sign up here), all the artboards and exportable assets are automatically added to your
project.

“No Sketch app? You can open a Sketch file using InVision.”

On top of that, you can use Inspect (currently in enterprise beta) to actually navigate around the design (measurements, colors, exporting assets, and more). Beside simply seeing what’s in the file, you can also use InVision to create a working
prototype from the Sketch file, which you can then discuss with your designers and team to make sure everyone is on the same page.

Command line master? Check out SketchTool. If you don’t have Sketch installed, you can still use this nifty command line tool from Bohemian Coding (the makers of Sketch) to
access the inside of that Sketch document. You can view file info, export assets, and a few other tricks. Really enterprising developers could even chain this into their build process (example: grab the latest icons from the design before you
bundle an icon font). But that’s a story for another day…

And there are more tools and integrations and plugins coming out all the time. So, even if you don’t have Sketch, there’s no need to freak out when someone sends you a Sketch file. In fact, you might owe that designer a high-five.

Let’s build!

Moving into new software is always scary. Heck, I toyed with Sketch for almost a year before I really committed. I hope this article has shed some light into the new (and familiar) paradigms inside Sketch, and that you master them in no time.

It’s a whole new world. We’re waiting for you.

Did you miss part 1 of this series?

Go and read Sketch for front-end developers, part 1.