The designers and front-end developers at Planet Argon started transitioning from Fireworks to Sketch in early 2015. Although we were, for the most part, quite fond of FW, the app had been discontinued by Adobe in mid 2013 and features were no longer being added. FW crashed on me constantly. It was old and bulky and hadn’t changed significantly in years. It was time, finally, for a change.
Sketch seemed like the logical successor to Fireworks. It’s a powerful tool that was built specifically for designing web interfaces, is actively maintained and improved, and has a devoted community of plugin developers. For the most part, our conservative gamble on Sketch has totally paid off. I can do most of what I want to do in the app quickly, efficiently, and intuitively. There are, however, a handful of Fireworks features that I would love the Sketch developers to emulate:
Line Height
For some reason, Sketch’s built-in functionality only allows for pixel units. Fireworks has gotten this right for years – it gives the user the option to choose between pixel units or percentages. I’m surprised that Sketch, an app that caters primarily to web designers, doesn’t offer this flexibility. In practice, this means that a block of text, after setting and then changing the font-size, breaks pretty much immediately. The pixel-based line-height doesn’t update and you’re left with text that has either far too much or far too little leading.
Exporting
While Sketch boasts about its robust Export feature, I’ve found it to be a bit lacking compared to Fireworks. In the Export dialogue, FW shows a preview of the image at different levels of compression. Sketch has no such feature. I’ve also found the file sizes of Sketch-exported images to be far larger than their FW-exported counterparts. I exported 2 identical images as PDFs, one from each program – the resulting Sketch PDF weighed 1.7 MB compared with Fireworks’ 1.2 MB. The color of the Sketch PDF was also way off.
I made the same comparison with 2 identical PNGs. The image saved out by Fireworks was 225 KB, while the Sketch PNG weighed a whopping 650 KB.
Guides and Smart Guides
Smart Guides are one of Sketch’s best features. As you drag objects around the canvas, Smart Guides appear in order to give alignment cues and to indicate how far the selected element is from other objects. Sketch also has manual guides, which you can drag out to the locations of your choice. Unfortunately, both of these types of guides are known as “Smart Guides,” which means that you can’t hide manual guides without disabling Guides entirely. If you want to take advantage of automatic Smart Guides, get used to always seeing those manual guides as well.
Bitmap Manipulation
There are times when I need to take a screenshot of a website, open it in a design program, make a couple quick edits, and send it over to a front-end developer to implement. This was always incredibly fast in Fireworks. Tweaking screenshots or photos in Sketch requires a few more mouse clicks and feels somewhat less intuitive. Bitmap editing mode, although simple enough to activate, is an extra step that FW managed to avoid.
On a related note, there isn’t a selection, direct selection, or marquee tool in Sketch. Instead of a selection tool, there are different ways to edit or select objects on the page, depending on the type of element. The “selection tool” in Sketch is simply the default – the state of not having any other tool selected. This is fine, and perhaps even more elegant, most of the time. But try figuring out how to drag to select anchor points on an open path. Hint: there’s a tiny, inconspicuous button that appears in the Inspector when editing a path.
Color Filters
Fireworks is an Adobe program and we all know that Adobe knows photo manipulation. If you want to modify a photo in Sketch, you’re limited to adjusting hue, saturation, brightness, contrast, and blur. Fireworks, on the other hand, offers those filters as well as granular adjustments like Curves, Levels, Sharpen, numerous Blur options, and more.
What Sketch Does Well
Fortunately, Sketch does pretty much everything else extraordinarily well. Here are some of my favorite features:
- Keyboard actions – The ability to move, resize, and change opacity of an object without touching the mouse has considerably sped up my process.
- Pages and Artboards – This adds a ton of versatility and gives the designer helpful workspace options.
- The Layout Grid – Sketch’s built-in grid is highly customizable and flexible. This functionality helps to bridge the gap from design to development, as Sketch’s grid settings directly inform the CSS grid.
- Drag out layers to save – Simply drag a layer or group onto the desktop to automatically save the image as a PNG.
- Reliability – the app has never crashed on me. I’ve lost so many designs to the Adobe gods that Sketch, simply by virtue of being fast and dependable, has earned a special place in my heart.
Although there are a bunch of funny little Sketch quirks, it is heartening to watch the pace of development of the app. Rarely does a week go by when a new release of bug fixes and improvements isn’t pushed.
I did, however, just start playing with Adobe XD. The app is laughably basic at the moment, but I’m curious to see how it evolves. It might be Stockholm Syndrome, but I’d like to think that Adobe might still has a few tricks up its sleeve.