Designers and developers are the key players in creating digital products—and a healthy handoff is critical to keep projects moving smoothly. As a designer, it’s up to you to make sure that handoff sets the developers up for success. So let’s take a look at 3 common mistakes that are easy to make in Sketch and how to fix them.
Oh, and pssstttt… Here’s where to get Craft.
1. Forgetting about half-pixels
When a layer is positioned or scaled to a fraction of a pixel, it may not look alarming on the Sketch canvas. Which is why it’s easy to let it slide until it’s too late.
If we zoom in on this icon, for example, you’ll notice that the 2 rectangles that make up the plus sign don’t line up with the pixel grid. Since Sketch is a vector drawing application, edges appear crisp—but that’s not how a raster asset would export.
To get a more honest view of the issue, head up to View > Canvas > Show Pixels. Now you can see that anti-aliasing is being used to smudge the edge to the next full pixel. Nasty stuff.
Sketch will offer us a helping hand in this situation if we select the offending objects and visit Layer > Round to Pixel. But you’ll still want to double-check the numbers to make sure they rounded the way you expected.
2. Using almost the same color
The beauty of designing in a freeform application like Sketch is that you don’t have to constrain yourself with rules along the way, which is where many of us get a little sloppy with colors.
As we build things out over many, many hours of work, we make plenty of minor tweaks along the way that create little inconsistencies that can be optically impossible to spot. So how can we catch and fix all of these subtle mismatches?
The solution lies in our free suite of Sketch plugins called Craft.
Using the Libraries plugin, we can automatically generate a living style guide that shows every color used in our document. Here you can see an awkward and accidental variety of blues, greens, and dark grays.
The most beautiful part is that these color swatches can be unified here on the “Styles” page and synced back into the document with a click. Visually, your design may look about the same, but now developers will have zero color confusion when they inspect your design… and they might even consider having lunch with you now.
3. Using blending modes
A big part of setting developers up for success is giving them any graphic assets they may need to reproduce your design accurately in the final product.
The artist in you may feel determined to use a blending mode from time to time to get the visual effect that you’re going for.
But… when exporting an asset from Sketch, the blending mode doesn’t go with it. Since a blending mode is the visual result of how 2 or more layers interact, an individual graphic asset unfortunately can’t carry it along.
But fear not! This “unblended” asset would be exactly what your developer needs in order to apply the blending mode programmatically.
Related: Questions to ask developers before you start designing
The great news here is that when you use Craft Sync to get your screens added to your InVision prototype—your developers will be able to use Inspect to see exactly how your blending modes are meant to look—and download the proper assets all in one place.
They’ll also be able to see those nice colors that you cleaned up for them.
Smooth sailing ahead.
You may also love these Sketch videos…
Video Producer at InVision, former UI/UX designer of international in-flight entertainment, and avid automotive enthusiast.
