Fireworks Begat Sketch

It has been great to watch Sketch evolve from a fairly simple drawing application (DrawIt, originally) to a key part of many digital designers' workflow and the center of a design tool ecosystem. Having been a heavy Fireworks user, I see a lot of it in Sketch.

The Bohemian Coding team was obviously aware of Fireworks and the community around it. One of the first Sketch plugins I knew of was Ale Muñoz's Sketch Commands, which he originally developed for Fireworks. He has since joined the Bohemian team. Bohemian Coding also asked illustrator and designer Isabel Aracama to create a vector illustration showing that Sketch could be used for such things. Prior to its demise, she was a vocal promoter of Fireworks. If you didn't know Fireworks could handle complex vector illustration, check out her work.

Fireworks wasn't just for slicing images. A number of features made it a good tool for designing any pixel-based interface, features that are among those designers coming from Photoshop to Sketch have found particularly welcome.

Flexible Canvas Sizing

Fireworks allowed you to creates pages within your design file of different resolutions. Ultimately, it's not as flexible as the Page > Artboard (or infinite canvas) arrangement in Sketch, but it was a lot more flexible than Photoshop allowed at the time. This made it easy to design different parts of interfaces while having access to the same symbols and styles.

Flexible Symbols

Fireworks allowed you to nest symbols, and scale and style them without affecting other instances. If configured with 9-slice scaling, you could stretch symbols without distorting the areas outside the center slice.

Buttons were a special symbol type in Fireworks, allowing you to create a base button and reuse it with custom label text. Within the symbol, you could create up, down, and hover states.

Rich Symbols were a pain to create, but provided some of the same functionality as Symbol Overrides do in Sketch. The prolific John Dunning wrote some tools to ease the process, but Fireworks was a bit buggy in handling custom Rich Symbols.

If you needed to share your symbols, you could just export a symbol library file.


Plugins (known as Extensions in Fireworks) were an under-promoted feature in Fireworks. As designers find with Sketch, plugins can dramatically increase your efficiency. One of the first plugins I installed whenever I set up Fireworks was John Dunning's QuickFire, which put all the commands of other plugins a few keystrokes away rather than buried in a submenu of the Commands menu, much like Sketch Runner does in Sketch. I used Ale Muñoz's Orange Commands, John Dunning's keyboard resizing commands, and Matt Stow's math resizing commands a lot to improve my workflow.

The Twist and Fade plugin included with Fireworks is similar to Looper for Sketch.

Click-Through Prototyping

If you are primarily concerned with testing whether a navigation scheme makes sense, simple click-through prototyping is quite useful. It doesn't let you work with user input beyond clicks or transition smoothly between states and views, but it can help you address problems in layout, contrast, and labeling.

In Fireworks, you would draw arbitrary polygonal hotspots or place button symbols, then specify a page within your Fireworks file to which they should point. You couldn't specify a transition (push left, right, cross-fade, etc.); everything just swapped. You could export to HTML (which created an image map) or to a clickable PDF with everything rasterized. The prototyping functionality in the recent v49 release of Sketch is not terribly different, but it represents what Emanuel Sá referred to as “the tip of the iceberg.”


  • Fireworks used an extended version of the PNG file format that made for pretty compact files, even with lots of pages. It's certainly not why I chose Fireworks as my design tool, but it was welcome when backing up or working on a machine without tons of memory.
  • I miss Fireworks' Auto Shapes sometimes. There are a few in Sketch (star, polygon, arrow, triangle), but Fireworks provided a few more. A former colleague learned how to use Fireworks after seeing how easy it was to redline mockups using the Measure Auto Shape.
  • I still miss the ability to simply see the distance between two guides by holding down a modifier key while the cursor is between two guides on the same axis.
  • They wouldn't really make sense in Sketch, but Shared Layers were another huge advantage of Fireworks over Photoshop for UI design. These worked a bit like master pages in InDesign. Create a layer (a navigation bar, for instance), then share it to all the pages where it should appear. You could achieve the same basic thing with a symbol, but symbol positions don't carry across instances.
  • There was a cool gradient fill type in Fireworks called Satin that could be used to create nice abstract graphics. It would be tough to translate to code (be it CSS or a native UI toolkit), but it would still be great for static graphics.

What Wasn't So Great

  1. There were stability problems that decreased over the time Adobe developed the product, but it never became rock-solid. Sketch has really improved in this regard.
  2. No native vector export. John Dunning wrote an extension to export SVG that worked quite well, but no built-in option existed.
  3. No multi-resolution export. This wasn't a big deal until the iPhone 4 came along with the high-PPI Retina display.
  4. Text anti-aliasing was always so-so.
  5. No springs and struts (or constraints, resizing rules, etc.).

I'm glad that David Malouf had adopted Fireworks for the team at my first job working as a designer. It served me well from 2006 until Adobe announced the end of development in 2013. Reading the writing on the wall, I switched to Sketch, even before it had many tools for reuse like symbols and shared styles. If they can just get that guide space measurement feature implemented…

Fireworks Extinguished

Today at the MAX conference we announced the latest generation of our creative tools now known as CC including Photoshop CC, Dreamweaver CC, Flash Professional CC, Edge Animate CC, and many others. As you may have noticed this announcement did not include updates to Fireworks CS6.

— The Future of Adobe Fireworks

Adobe never seemed too enthused about Fireworks. Major feature development was very slow and serious crashers have gone unfixed for years. I will be looking at Sketch (already purchased) for graphics and Tumult’s Hype (which I’ve been using for a while) for interaction. I’d call it the Skype combo, but…

Lightroom is now the only Adobe software I care to use.

Zee Index!

A little feature for design apps such as Fireworks and Illustrator that would make it a bit easier to keep your layer stack straight.


  • The indicators in the Layers panel could be larger.
  • Ideally, the object bounds handles and layer position markers for selected and hovered would be different shapes. Squares for the selected objects, diamonds or circles for hovered, perhaps.

Layers Cake

Fireworks‘ ability to share layers to multiple pages makes it much easier to build mockups sharing some screen elements. I suppose the feature enables use similar to how many designers use Photoshop’s Layer Comps, but without layers that you don’t want appearing cluttering up your panel and you can place a shared layer in a different stack position on each page. Great as the feature is, the UI for it has some problems:

  1. Fixed, relatively narrow width of the two panes; names get cut off around 25 characters (proportional font)
  2. Page numbers displayed in the Pages panel do not appear in the Share Layer to Pages modal window, which compounds the previous issue
  3. No page thumbnails to help you visually orient yourself
  4. No easy way to apply the sharing settings for one layer to another
  5. Newly shared layers are always placed at the top of the layer stack
  6. Button text labels consume space
  7. Button arrows are not graphical
  8. Vertical scrolltrack displayed regardless of need
  9. Though you can select multiple layers in the panel, only the last selected layer will be acted on; this makes it a real pain to create new pages once you’ve built up a set of layers that need to stay separate for flexibility
  10. The Escape key is not bound to the Cancel button
  11. Ok is not OK

I came up with three potential solutions with various pros and cons.

Multi-Layer Sharing Utility

This design would open to the current page by default (the canvas shows the selected page so you don’t need a thumbnail) and lets you share multiple layers to multiple pages in one pass. If a page already has one of several checked layers shared to it, the checkbox next to the page in the right pane would show the horizontal line mixed state.

Single Layer Sharing Popover

This could be invoked through the contextual menu on a top-level layer object on the canvas or, somewhat less smoothly, the existing Layers panel command (contextual or panel menu).

Modal Window with Usability Enhancements

Basically, let the whole window and the various panes be resized. I suspect most are not designing on 1024 x 768 displays anymore.

How Fireworks Designers Can Help Developers

I recommend Matt Gemmell’s How Designers Can Help Developers. Being a proponent of Fireworks for UI design, I have a few comments regarding the Fireworks designer to developer workflow, particularly if the developer is working with the Fireworks PNG design file directly.

  • Don’t name styles based on their appearance (“Blue Helvetica 12pt”); use functional labels like “Primary link” or “Default button background”. This makes it easier for you to keep your styles straight after changing the appearance and for the developer to understand the purpose of the object.
  • If you are designing icons for a platform that requires specific names for certain images (such as launch images for iOS apps), use those names for your slices.
  • Use PNG-8 (set through the Optimize palette) for slices where acceptable to reduce filesizes. If you are using Photoshop, ImageAlpha can convert PNG-32 to PNG-8 with alpha opacity. You can then run images through ImageOptim to further compress them.
  • Place a consistently named layer at the top of your pages containing Measure autoshapes to provide pixel sizing for and between elements. To differentiate vertical and horizontal measures in tight spaces, you can subselect the arrows and labels to change their color. Placing a semi-opaque rectangle on the same layer at the bottom of the stack helps with clarity. Or use Specctr to generate such specs automagically.
  • If you are designing a web site or app in Fireworks, tell your development counterpart about the CSS3 extension for Fireworks.


My Stylo

The Fireworks Styles panel has some shortcomings, particularly when the icons are the small default size.

Fireworks' Styles panel as of CS5

  1. Style names appear in the bottom left of the panel only when scrubbing over them. You can use the Styles menu in the Properties Inspector, but that has no visual cues.
  2. There is little differentiation between type sizes with the small icon size.
  3. Styles cannot be rearranged, making it hard to group related styles if they aren’t created serially.
  4. White text or objects appear as white boxes in the list, requiring mouse scrubbing to reveal the title if multiple are used.

Styles List

Fireworks Styles panel list mockup

  1. Type is rendered at size up to a point, beyond which letterforms are too big to be meaningful in icon form. For those unusually large sizes, the icon might appear similar to another, but at least the size is given in the secondary label.
  2. The icon for text styles is based on the first use of the style.
  3. Styles can be rearranged. This isn’t depicted, but it would just be a matter of drag-and-drop.
  4. Light text and objects are given a contrasting background. Fireworks would have to determine a subtle but contrasting color.

A list view could complement the two existing icon views.