Unless you’ve been on Mars for the last few months, you’ve already heard the news that Adobe is feature-freezing Fireworks. And Adobe is not offering a replacement tool for Fireworks users (at least, not for now.)

What does this mean for you if you use (and rely on) Fireworks to design user interfaces and screens? What are your options?

In this article, we’ll take a close look at Adobe Fireworks, explaining why it is a unique and powerful design tool, how we can continue to use it effectively, and what our alternatives are for the future.

But first, a bit of background.

I have been using Fireworks since the Macromedia days, and I find it indispensable in my daily design workflow. Fireworks is like a small (but powerful) Swiss Army knife, or a superhero. In short, Fireworks is extremely versatile and powerful for screen design.

In fact, I am so passionate about this tool that when Vitaly Friedman asked me to be the editor of the Fireworks section of Smashing Magazine a couple of years ago, I instantly said “Yes!” Fast-forward to today: We’ve published over 20 high-quality articles about Fireworks and received many positive comments from our readers.

The news earlier this year that Adobe is abandoning Fireworks made me very sad. Looking at the over thousand comments on the Adobe Fireworks blog, it seems that I am not alone and that Fireworks will be missed by many.

So, what can you do if you also use Fireworks?

The good news is that we have quite a few options to continue using it, as well as some new apps on the horizon that could take its place. Let’s explore them!

1. Adobe Fireworks: The Current Situation

First, let’s look at the bad news official status of Fireworks. In May 2013, Adobe announced that it was “feature-freezing Fireworks CS6”, meaning that no new features would be added to Fireworks and that Adobe has ceased active development.

The future of Adobe Fireworks is quite uncertain. (Image: by Ryan Hicks.)

The good news? Adobe has stated that official patches (i.e. minor updates) will be provided from time to time so that Fireworks CS6 continues to work on the latest versions of Mac OS X and Windows — hopefully, for a few more years. The first update (12.0.1) was released in June, and I hope we’ll see a few more in the next year or two. Fireworks CS6 is still available to all Adobe Creative Cloud (CC) subscribers, and it can be also purchased as a standalone version.

(Note: Unfortunately, it is very unlikely that Adobe will ever open-source Fireworks, even if there was a petition with thousands of signatures asking Adobe to allow the community to continue developing and enhancing Fireworks. Fireworks is tightly integrated with software that Adobe continues to develop and sell.)

Now, the better news? While Adobe will not add features to the latest (and last) version of Fireworks, a great community of developers continues to add valuable new functionality to Fireworks through the release of free extensions. For example, SVG export was recently added to Fireworks, then SVG import and many other new features. (We’ll talk about extensions in detail later.)

So, while Fireworks’ future does not look bright, you can continue to safely use it for your work today and at least for some time. Also, alternative apps could replace Fireworks in the future. Within weeks of Adobe’s announcement about feature-freezing Fireworks, several competing tools were announced. Clearly, Fireworks is an important tool for many designers, and there is a clear place for it (and tools like it) in our workflow and processes. (We’ll talk a bit about these alternatives later in this article, too.)

2. Why Fireworks Is So Awesome (Today)?

Designers, especially ones with little or no experience with Fireworks, often ask, “Why should I use Fireworks for UI design and screen graphics? Why not use Photoshop (as most visual designers do), combined with Illustrator? Or why not some other tool?”

Many features make Fireworks an excellent (and even indispensable) tool for screen design. We’ll quickly list a few below.

Focus on Screen Design

Fireworks is a tool to design for screens; thus, it is focused. It has features that help the UI designer work quickly and accurately, and clutter is kept to a minimum (for example, it has no print or 3-D features). It is also intuitive to use and has wireframing and prototyping capabilities. Fireworks is like a Swiss Army knife for UI design.

Powerful Vector Tools

Fireworks has powerful vector tools, too. In this regard, you could easily compare it to Adobe Illustrator — yet Fireworks’ tools are easier to master. You can go from the simplest of wireframes to the most complex of screen graphics, illustrations, icons, and full-page designs and comps, and then export the entire page or just selections as optimized bitmaps or SVG, without ever needing to switch to another app!

Good Bitmap Editing Tools

Fireworks also has full bitmap editing tools, so you don’t need to jump from Fireworks to another app when you want to modify bitmaps (for example, when you have to make a quick color correction on an imported photo, crop an image, apply a vector mask, etc.).

Create Live Prototypes

Create live (i.e. HTML) without ever leaving Fireworks? Yes, that’s possible. We’ve covered this in the past. Fireworks is also invaluable for other types of live prototypes; for example, you could quickly create a prototype of a music player?

Create Live iOS Prototypes

Fireworks can also create iOS prototypes. From wireframes to an iOS prototype to the final polished design — all of these steps can be done without leaving this one design tool!

The topic of iOS live prototyping with Fireworks and TAP was covered in great detail in the three-part article by Shlomo Goltz, “iOS Prototyping With Adobe Fireworks and TAP” (part 1, part 2, part 3).

The (Smart) Fireworks PNG File Format

Fireworks saves to a special editable PNG format, which offers many advantages: small file size (multi-page Fireworks PNG files are usually less than 10 MB in size, while a single PSD file can easily reach a few hundred MB, even for a one-page design!), the ability to embed custom meta data (such as annotations, notes and comments) within the source file itself, the ability to preview files in Finder and Explorer, the ability to make special libraries of symbols (which can be indexed and searched, as in the example of the Evernote and Fireworks workflow) and, last but not least, the ability to view a live preview of a single-page Fireworks PNG in any browser or device.

Excellent Exporting, Opening, Importing and Saving Options

Fireworks can export to the following formats, with excellent compression and quality: PNG32 (i.e. PNG24 + alpha transparency), PNG24 (with no transparency), PNG8, PNG8 + index or alpha transparency, JPG and JPG progressive, selective JPG, GIF and GIF animated, SVG, and ICO (for favicons).

In addition to all of these “flat” file formats (and, obviously, the editable file-name.fw-opt.png), Fireworks can open most Photoshop (PSD) and Illustrator (AI) files, Encapsulated PostScript (EPS) files and most SVG files.

Fireworks saves to the editable Fw PNG (file-name.fw-opt.png) format by default, but it can also save to PSD (file-name.psd) and AI (file-name.ai) formats.

(Note: Support for PSD and AI files has some limitations, especially as the features of Photoshop and Illustrator continue to change.)

Pages and Master Page, Layers, States (and Objects)

Nearly all websites and mobile apps have more than one page or screen, and many pages and even many states (or variations) of those pages have to be designed. One of the most powerful features of Fireworks is its ability to contain many pages in a single file, as well as contain many states for both pages and individual objects in a design (the article “Using Pages, States and Layers in Fireworks” discusses this thoroughly).

Pages, layers and states

Those of you familiar with Photoshop might know about layer comps, but the pages feature in Fireworks is much easier to use and understand; multiple artboards in Illustrator serve a similar purpose, but once again, the concept of pages is more intuitive and corresponds more closely to our mental model of the pages in a website or app. Additionally, the Master Page in Fireworks enables us to create a standard structure (for example, header and navigation) for all of the pages on a website in one place and have it appear on all pages automatically. Thus, if you edit the Master Page, the changes will instantly and automatically appear on all pages.

The text, images and graphics that are placed on pages are organized in layers; layers may contain multiple objects and even sublayers. Because Fireworks is an object-based design tool (that is, each object is independent of the others — you simply click on an object on the canvas to select it), we use the layers primarily to organize our source files. We can share layers to multiple pages (so, editing on one page would change that layer on all pages), control the visibility of layers, and even export the objects of selected layers.

Fireworks also enables us to create multiple states (previously called “frames” because they were originally used for animated GIFs and Flash animations) of pages and individual objects. This is important and very useful for UI design, because many screens and screen elements have multiple possible states (for example, buttons could have hover or focus and down states), and sometimes you’ll design a few options for the same object to show variations to your client. States are also important for symbols (both graphic and animation) and rich (or component) symbols, because we can encapsulate many variations in a single symbol and then reuse that symbol in different states throughout the design and across pages, and we can even share symbol libraries with others to use them across files and projects!

Copy And Paste Attributes

Want to apply all properties of a particular object (colors, stroke, fill, live filters, etc.) to another object (or group of objects)? Easy! The super-powerful command Control/Command + C and then Control/Command + Alt + Shift + V will do it for you!

And what if you want to apply only certain properties of one selected object to another? This is possible, too, with the Paste Selected Attributes extension!

Excellent Tool for Mobile Design

Because Fireworks is (primarily) a vector design tool (which means easy scalability), it can be used equally well for all kinds of mobile design: iOS, Android, Windows Mobile.

Design From A to Z in Fireworks

Fireworks could be the right tool for every stage of a screen design project. You can start with ideas and sketches on paper, move to wireframes, then to (live) prototypes, then to the final polished design (and design assets), without ever leaving Fireworks. No need to constantly jump between tools depending on the task at hand — this workflow could save you quite some time.

Symbols and Rich Symbols

Fireworks has a two types of symbols: graphic symbols and rich (or component) symbols. The value of symbols is that they can be created once and then used multiple times throughout a design wherever needed. Then, if you edit a symbol, those changes will immediately appear in every occurrence (or instance) of the symbol in the document. The key difference between a graphic symbol and a rich symbol is that the former has the same appearance in all instances (for example, icons are typically created as graphic symbols), whereas rich symbols are much more complex, and each instance can be customized (for example, a button might have the same shape, but its text label can be edited and its color changed to indicate alternate states, such as hover and disabled), yet the core design of the rich symbol would be shared by all instances.

While graphic symbols are common to many design tools, rich symbols are especially powerful because they combine graphics, editable properties and even code, so that we don’t need to draw and redraw similar objects repeatedly. Their efficiency alone is great enough, but rich symbols can also be saved in libraries and shared with others, because they use the same editable Fireworks PNG format as all other Fireworks documents. There are even techniques to create cloud-based symbol libraries that can be shared and managed by an entire team!

Here are a few resources to teach you more about using symbols in Fireworks:

Styles

Styles are like CSS for Fireworks files: Define text and graphic styles once, then apply them as needed throughout an entire document. If you edit a style, all instances of that style in the document will be updated. Creating, saving and sharing style libraries with others to ensure design consistency across a team is also easy. Fireworks even enables you to apply a style to an object and change how that instance appears without breaking the link to the original style; then, you can revert to the original, save the modifications as a new style and even use the modifications to redefine and update the original style, with those changes being applied to all instances of the style in the document.

In fact, styles are so much like CSS that an extension exists to export styles as CSS!

Styles in Fireworks: Creating, redefining, copying and breaking a link to a style are easy to do.

Here are some sources that you might find useful:

Slicing

Slicing is a common way to extract and save specific graphics from a complete design, such as background patterns, button graphics, icons and illustrations. Fireworks makes it easy to slice multiple graphics quickly. Simply select all of the objects that you want to save as graphics, click Edit