It’s been a rough couple of years for us former Fireworks users.
At the time, it was just the latest step in Fireworks’ long, sad death march since Macromedia’s acquisition by Adobe in 2005. We all knew how this story was going to end. But we held out hope that maybe — just maybe — Adobe’s recent reawakening would include a renewed interest in our favorite UI design tool.
Then, about this time last year, the end finally, mercifully came. Adobe announced Fireworks was going into maintenance mode with a post cruelly titled The future of Adobe Fireworks (and they’ve fallen short of even maintenance mode, because as of right now I can’t open the app). I’d guess either sometime later this year or beginning of next they’ll kill it outright.
It was with that announcement that I made a concerted effort to try and switch to Sketch 2 full-time for my UI design work. It had a lot of what a recovering Fireworkser was jonesing for: it was vector-based, had sensible defaults, cost just $50. Unfortunately, I’m not sure whether it was the infinite canvas, the extra steps it took to set simple things like text color, or the lack of necessities like symbols — but it just didn’t click. I found myself feeling uncomfortable in the interface, and that effected the things I was designing. Instead of using Sketch 2 full-time, I settled for an unproductive, unsatisfying hodgepodge of as much pixelated Fireworks as I could stomach (since it wasn’t, and wouldn’t ever be, updated for retina), some Sketch 2, and some Photoshop and Illustrator.
Enter Sketch 3
Last week Bohemian Coding announced Sketch 3, and not only is it the biggest improvement I can remember seeing in an application since Macromedia released Fireworks MX (when Fireworks added the properties panel, symbols — 3 years before Photoshop added smart objects, mind you — and inline editable text), it’s the first time in a year that I’ve felt 100% comfortable inside of a design tool again.
So, fellow Fireworks refugees, what is it exactly that makes Sketch 3 feel like home again?
In 2002 Macromedia sought out to give all of their applications — Dreamweaver, Flash, Freehand, and Fireworks — a consolidated look and feel. This brought Dreamweaver’s properties panel to Fireworks, giving Fireworks one of its biggest breakthroughs.
Fireworks’s properties panel was contextual — meaning if you clicked on the canvas it let you edit the canvas’s properties, if you clicked on text it let you edit the text’s properties, etc. — and this made Fireworks much less reliant on the layers panel. Unlike Photoshop at the time, you didn’t have to hunt for your object in the layers panel and then edit it in the layer properties dialog. With Fireworks, almost everything you could change about an object was just one click away, making it by far the fastest tool available for building complex UIs.
Now, Sketch 2 also launched with a properties panel that they called an inspector. But too many important properties were hidden behind an extra click. In Sketch 3 the inspector’s been totally revamped and now everything is either one level deep or in a quick modal that you can just click off of to dismiss once you’ve edited the values you needed to edit.
Thanks to the hard work put into Sketch 3's new inspector, creating a complex UI in Sketch 3 feels just as fast, if not faster, than it ever did in Fireworks.
Pages + Symbols, layer styles, and text styles
Fireworks CS3 added the ability to create multiple canvases, which they called pages, inside of the same mockup. This allowed you to create, say, a homepage, about page, and contact page all inside the same mockup. It was the last great feature Fireworks introduced after the Adobe acquisition.
Combined with symbols and the concept of a “master page” (this was where you could set properties for the main page, like the background color, nav bar etc., and they would cascade down to all the other pages) it made creating a design system for the site or web app you were working on extremely efficient.
Sketch 2 had pages and a confusing concept of “linking” styles, but the addition of symbols, layer styles, and text styles in Sketch 3 makes it all so much more powerful. In fact, with the addition of those three huge new features, Sketch 3 is practically as robust as CSS itself, and a far more powerful UI tool than Fireworks ever was.
Sketch 3's symbols work just like Fireworks’s did. You make your icons or your nav or your footer into symbols, and they take all the changes you make to them and apply those exact changes everywhere else you’ve used the symbol. Perfectly in sync.
But, say you need some modules to have the same background color but unique content. That’s where layer styles come in. You’d make those modules a layer style and, if you start off with a green background and then change your mind to grey, all the modules will get updated simultaneously with the change.
Text styles work the same way. You can style your content hierarchy in Sketch 3 the same way — headlines, subheadlines, paragraphs, lists, etc. —that you eventually will in your finished project with CSS. And every font, weight, and color change you make will cascade throughout your designs.
If someone isn’t already working on a plugin that automatically creates a style guide based on your Sketch symbols, layers, and text styles, I’m guessing they will very soon.
When Fireworks debuted in 1998, one of its most innovative features was its export capabilities. Its export preview allowed you to fine-tune your assets before saving them. You could toggle between GIF, PNG and JPG to find the best combination of file size and quality. And its compression rivaled all the then available tools that you had to use to supplement Photoshop’s bloated file sizes (later the next year Photoshop had to respond to Fireworks by debuting “Save for web” and bundling a copy of ImageReady, their image compression software, free with every copy).
Sketch 2's exporting was a first step, especially its ability to export @2x, but it was finicky. It was based around artboards, and you had to constantly delete and resize the artboard if you had resized the graphics inside of it.
Well Sketch 3’s new export features are to 2014 what Fireworks’s were to 1998.
Everything can be made exportable with the “Make exportable” button. From artboards, to layers and groups, to Sketch 3's smartly thought out “slices”. Unlike Fireworks, where you could only show and hide all the slices at once, Sketch 3's slices act just like another layer in the layer panel. You can size and place them, and then you can export whatever’s inside of them.
Plus — and damn this is such a clever feature — you can export multiple sizes of the same vector graphic. Perfect for @2x retina graphics that need a @1x fallback, or for Mac, iOS or Android icons that need multiple sizes.
A couple other smaller feature enhancements that would appeal specifically to us Fireworks Alumni:
- I used the “hide all panels” shortcut in Fireworks all the time to give me an unobstructed view of my work-in-progress . Sketch 3 has a “presentation mode” that hides all the panels with a quick keyboard shortcut.
- For whatever reason I’ve missed being able to set the canvas background color ever since I stopped using Fireworks. In Sketch 3 you can now give artboards a background color. It’s a small thing, but it’s yet another new feature that’s helped me finally get over, well, you know.
The buzz and excitement around Sketch 3 reminds me of Fireworks’s debut. Some may find it annoying. “You can build great UIs in Photoshop and it does tons more on top of that,” they’ll say. But folks have been looking for alternatives to Photoshop in 1998, 2014, and every year before, after, and in-between. Fireworks survivors got used to the snide comments and put downs long ago. We tasted a more efficient way to build our sites, web apps, and apps, and Sketch 3 is the oasis in the desert that we’ve been looking for.
So if, like me, you’ve been wandering aimlessly from app to app ever since you know who did you know what to you know who, or if you’re just curious or looking to challenge yourself with a new approach — like an always growing designer should be — trust me, uninstall the past and give Sketch 3 a try.
This article was written in memory of Fireworks. 1998-2013. May it R.I.P.