Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

The Present And Future Of Adobe Fireworks

Unless you’ve been on Mars for the last few months, you’ve already heard the news that Adobe is feature-freezing Fireworks1. 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 Macromedia2 days, and I find it indispensable in my daily design workflow. Fireworks is like a small (but powerful) Swiss Army knife, or a superhero3. 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 section1264 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 comments5 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 Link

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

Adobe Fireworks
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.17) 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 petition8 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 export9 was recently added to Fireworks, then SVG import10 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)? Link

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 Link

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 Link

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 Link

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 Link

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

Create Live iOS Prototypes Link

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 TAP13 was covered in great detail in the three-part article by Shlomo Goltz, “iOS Prototyping With Adobe Fireworks and TAP” (part 19314, part 29415, part 39516).

The (Smart) Fireworks PNG File Format Link

Fireworks saves to a special editable PNG format, which offers many advantages17: 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 annotations18, 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 workflow19) 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 Link

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, SVG20, and ICO21 (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 SVG22 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) Link

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 Fireworks23” discusses this thoroughly).

Pages, layers and states in Fireworks
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 Link

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 Link

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

Design From A to Z in Fireworks Link

Fireworks could be the right tool for every stage of a screen design project26. 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 Link

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 libraries27 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 Link

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 exists31 to export styles as CSS!

Styles in Adobe Fireworks

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 Link

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 → Insert → Rectangular Slice (or right-click and choose Insert Rectangular Slice from the context menu), and choose “Multiple Slices” from the dialog that appears.

Slices will then be automatically drawn around each object individually. Each slice can be named (in the Properties panel) and can have its own optimization settings, so exporting PNGs, GIFs and JPGs all from the same document and all at the same time is possible! Slices remember their name, saved file location and optimization settings, so you can edit the design and re-export the new graphics without having to re-slice and re-optimize.

If you need to slice just a portion of a design or object, rather than the whole thing, then the Slice tool in the “Tools” panel makes it easy to draw borders around exactly what you want to export as a graphic.

Note: While you can easily export slices from a Fireworks PNG design, creating an individual slice for each element that you want to export might be a pain. With the “Generate Web Assets8635” command, exporting different parts of your document becomes so much easier. Simply specify how you want an object to be exported (i.e. change its name to include an image-based file extension, like header-opt.png or company-logo-opt.png), and then export. Voilà! PNG, GIF and JPG file formats are supported.

Here are some resources that might help you:

Pixel Perfection Link

Fireworks always works with whole pixels, and objects fall on a pixel-perfect grid. There’s no need to activate any setting to “snap to pixel” because, by default, everything snaps to the whole pixel. In rare cases when an object or a particular object property falls off the pixel grid, such as when scaling a vector object up or down and the nodes fall between pixels, the intuitive command Modify → Snap to Pixel (or Control/Command + K) fixes any problems. If you modify a vector object with anti-aliasing applied to the stroke and/or fill and you notice blurry edges, then just select the object and snap it back to pixel to make it sharp and clear again.

Properties Panel and Direct Interaction Link

In Fireworks, you interact directly with the objects on the canvas (without having to dig through hundreds of layers in the Layers panel) using the Select and Subselect tools. When an object is selected, the Properties panel (also called the “Property Inspector”) automatically updates to display information about that object and shows nearly all of the properties that may be edited. This makes it easy to draw, select and modify almost any type of object directly: vector objects, text blocks, bitmap objects, vector masks, hotspots and so on. Auto shapes (which are special types of complex vector objects — more on these below) can be modified, too, using the Properties panel, but you can also modify them directly on the canvas by using their control points.

The Fireworks Properties panel.37
The Properties panel allows you to intuitively edit (and check) the properties of any object or group of objects selected on the canvas. (View large version38)

So, regardless of the type of object on the canvas (text, vectors, symbols, slices, hotspots, groups or bitmaps), as soon as it is selected, the Properties panel will tell you what it is and will enable you to modify it instantly.

As you see in the illustration above, the Properties panel intelligently adapts to the type of object. In the following screenshots, you can see when various objects are selected:

Gradients Made Easy Link

Creating gradients is easy with Fireworks because they are edited in live mode. You can intuitively control all gradient properties directly from the Properties panel.

Gradients in Fireworks
Gradients in Fireworks are powerful yet easy to use. (Image: “Optimizing the Design Workflow With Fireworks Extensions, Part 343,” Ashish Bogawat)

Also worth noting is that Fireworks offers many more types of gradients than other graphic editors. Here are all of the gradient types supported: linear, radial, rectangle, cone, contour, satin, starburst, folds, ellipse, bars, ripples and waves.

Two free extensions make working with gradients even easier: Gradient Panel and Gradient Direction Editor (both of which we’ve reviewed in detail44).

Blending Modes Link

Believe it or not, Fireworks has more blending modes than Photoshop, and some of these unique blending modes are pretty useful. Blending modes can be applied to any type of object, not just bitmaps, and can be used to adjust an appearance as well as to create special effects.

Fireworks blending modes
Fireworks’ blending modes

9-Slice Scaling Tool Link

Sometimes when scaling an object up or down, we want to maintain the appearance of some parts of the object so that it does not appear stretched or distorted. If we just made it large or smaller, everything would change in scale proportionally; if we made it just wider or just taller, then it would appear distorted. 9-Slice Scaling enables us to identify which parts of the object should scale (and in which direction) and which parts should maintain their shape and proportion.

For example, buttons often have rounded corners, and these should not be distorted, no matter how wide or narrow a button becomes.

9-slice scaling in Fireworks (example with button).
Maintaining the appearance and proportions of certain parts of an object (in this case, the radius of a button’s corners) is easy with the 9-Slice Scaling tool.

Modal dialog boxes also often have rounded corners as well as a title bar with icons and a text label, but the amount of content in the dialog will vary, so the dialog box will sometimes need to be large and sometimes small, but the corners, title bar and icons should always have the same proportions and scale.

9-slice scaling in Fireworks (example with modal dialog).
Maintaining the appearance and proportions of certain parts of an object (in this case, the title bar with icons and the rounded corners of a modal dialog box) is easy with the 9-Slice Scaling tool.

A Versatile Alignment Panel Link

With the help of the Align panel, you can align and distribute objects relative to the canvas or to each other. You can space them evenly or specify a precise value (in pixels). The options here are almost limitless.

Find and Replace in Fireworks45
The Align panel in Fireworks offers many options.

Live Filters Link

Fireworks’ live filters can be easily applied to any type of object, and they are non-destructive, which means that you can add and modify filters without altering the original object or image. The stacking order of applied live filters can be changed with simple dragging and dropping; the visibility of an applied live filter may be turned on and off; and multiple filters of the same type may be applied to a single object on the canvas. Live filters can be used for color adjustment, shadows and glows, and blur effects, and even to add and edit Photoshop live effects if you have opened a PSD file.

Fireworks live filters (example)
This simple example shows two “Inner Shadow” live filters applied to the same object.

Linked Images Link

Other products in Adobe’s Creative Suite support the “smart objects” feature, which lets you import objects from one app to another. When the source object changes, the imported one will update as well. Thanks to the Linked Images46 panel, achieving almost the same functionality in Fireworks is now possible!

Scale Stroke and Effects Link

Because Fireworks was built from the ground up as a screen design tool, it has many little things that help the UI designer. One of these is the option to toggle on and off the “Scale Stroke and Effects” option, which is very useful when you’re working on a design that has to be rescaled later (for example, if you’re working on both a Retina and non-Retina design for iOS).

Scale stroke and effects47
“Scale Stroke and Effects” is easy to enable and disable.

Auto Shapes Super-Power! Link

Fireworks’ vector auto shapes are a unique feature and superb! You can easily create (and then later edit) rounded rectangles, stars, polygons, arrows, cog wheels and many other types of objects with only a couple of clicks of the mouse or by using the Auto Shape Properties panel. New auto shape objects can be placed on the canvas from the “Vector Tools” section of the Tools panel and from the Auto Shapes panel. You can change all of the properties of these special objects easily and with numeric precision. Auto shapes may be edited both as special auto shape objects and as vector objects.

Creating custom auto shapes is also possible, and many such objects exists as free extensions — the Multi-Border Rectangle48 auto shape, the Lorem Ipsum49 auto shape and the Filter Light Source and Sunburst50 auto shapes, to name just a few.

CSS Properties Link

In Fireworks CS6, you can easily extract any CSS properties of a selected object with the help of the CSS Properties panel51. Combined with Matt Stow52’s excellent free extension, Fireworks CSS Professionalzr53, the feature can save you development time and help you read, copy and reuse CSS properties more quickly.

Find and Replace Link

Find and replace — most applications have this feature, so nothing special, right? Wrong! Find and replace is much more powerful in Fireworks.

Fireworks can search (and search and replace) in Fireworks PNG documents for the following objects and object properties:

  • text strings,
  • fonts,
  • colors,
  • URLs.

You can restrict a search to a particular page, a state, a manual selection of objects or layers, a particular Fireworks PNG document or even a set of closed Fireworks PNG documents located in a particular folder!

Find and Replace is also very flexible. For example, when searching for a particular color, you can target the following: fills and strokes, only fills, only strokes, live filters, or all properties! Similarly, Find and Replace can be adapted to search for text strings, fonts used, etc.

Find and Replace in Fireworks54
The Find and Replace panel is powerful and customizable.

Batch Processing Link

Have you ever had to repeat the same actions over and over again, such as editing, resizing, optimizing and renaming hundreds of photos? Batch processing to the rescue!

Fireworks makes it easy to select multiple files and repeat the same actions on each one. Batch processing allows you to change export and optimization settings, change sizes, perform find-and-replace actions, rename files when saved, and even apply any commands (including custom ones!) that appear in the “Commands” menu (for example, “Convert to Sepia,” applying a “Gaussian Blur,” etc.). Batch actions may be saved and reused, too; simply go to File → Batch Processing, select the files and create your own batch script.

And If All of the Above Are Not Enough, Extensions to the Rescue! Link

With the help of free extensions made by developers, Fireworks becomes a much more functional, robust and productive tool. (We’ll go over some of the best extensions later in this article.)

Let’s Sum It Up: 1 + 1 = 3 ! Link

So many other powerful features are in Fireworks that we couldn’t mention and describe them all in one article.

The most important thing to know is that, while many of Fireworks’ features are not unique (other graphic design apps have similar features), the combination of features that Fireworks offers in one package is unique. You can work with vectors and raster (i.e. bitmap) images in Fireworks simultaneously; simply select an object, and Fireworks’ UI will automatically adapt to give you the tools, properties and options for that type of object. You can go from paper sketches to rough wireframes to a real live prototype (HTML or mobile) to a final polished multi-page design, with optimized exported assets in perfect quality, without ever leaving the app!

You can do nearly everything in Fireworks. Even better, you can work in Fireworks and import assets from other programs, such as Photoshop and Illustrator.

Fireworks is like a Swiss Army knife for screen and UI design. It has all of the tools one might need in a single lightweight package, offering quite a lot of power and versatility. Don’t forget about speed, too — working with Fireworks is all about efficiency and speed. You could, of course, use this Swiss Army knife in conjunction with other apps, but you’ll be relying on this app most of the time, because it has everything in one place, easily accessible, easily learnable and highly intuitive.

This is why thousands of people use Fireworks today: screen and UI designers, illustrators, Web designers, iOS and Android app designers, front-end developers and more.

Is Fireworks the Perfect Tool for UI Design? Link

No, Fireworks is not perfect. I have used this app for thousands of hours, and I must admit that.

But what tool for UI design is perfect? Is Photoshop the perfect tool for UI design? Is Illustrator? Or Sketch? Or InDesign? Or Pixelmator?

Is there even such a thing as a perfect UI design tool? I don’t think so.

Photoshop is the elephant in the room most obvious example. It was created for photo editing and print design tasks. A few UI design features were later added to it, yet Photoshop still lacks many features that would make it really useful (and easy to use) for screen design. Still, thousands (if not millions) of users worldwide have been working with this imperfect tool for more than a decade and use it successfully for UI design tasks.

Fireworks, on the other hand, was built from the ground up for UI and screen design, and every single feature in it is intended specifically to help the UI designer. Even though Fireworks isn’t the perfect tool, in my opinion it best meets the needs of UI designers. As I said earlier in this article, 1 + 1 = 3. Like a Swiss Army knife, none of the features in Fireworks is perfect, but when you combine them all, you realize that you’re able to design UIs more quickly than any other combination of features would allow and that you are very efficient in the process.

And yes, Fireworks has a few weaknesses. Its color picker feels a bit old. It cannot use more than 2 GB of RAM (because it’s a 32-bit app). If you work with too many pages or symbols in one document, Fireworks can feel a bit slow. Bugs do appear randomly (and then disappear). And so on. But bugs appear in other programs, too, which doesn’t stop us from using them, right? UI designers need the right tool for the job, not the perfect one, and Fireworks manages to be the right tool most of the time.

Finally, there are probably a few features that Fireworks does not have but that would make it even more useful to designers and developers. While Adobe will not likely add any more features, the great community of developers will continue adding extensions to the app, keeping it up to date for quite some time.

3. A Few Fireworks Designs Link

Let’s look at some excellent illustration and interface design work, done entirely in Fireworks.

55
Kawasaki Vulcan 1700 (vector illustration), by Isabel Aracama56

57
Ferrari 288 GTO (vector illustration), by James Parker58

59
Nikon (iOS icon), by Gianluca Divisi6260

61
TouchCDJPro (iOS UI), by Gianluca Divisi6260


Social bar (UI design), by Lorenzo Franchini63


Expenses app (UI design), by Lorenzo Franchini64


Restaurant navigation (UI design), by Tomas Gajar65


Sample navigation (UI design), by Tomas Gajar66

More Examples? Sure! Link

At the end of 2010, I wrote a pretty detailed piece for Smashing Magazine, “The Power of Adobe Fireworks: What Can You Achieve With It?67.” In it, I showed many examples of Fireworks being used successfully for UI design, Web design, amazing vector illustrations, logos, elegant icons, digital paintings and comic strips, and even for planning and creating Adobe’s entire CS5 branding. While the article is three years old now, the examples in it are still relevant, and you can take a quick look68 if interested.

Adobe CS5 branding (made with Fireworks)69
Adobe’s CS5 branding can be made right in Fireworks. (View large version70)

4. The Power of Fireworks Extensions Link

One aspect of Fireworks makes it even more powerful and deserves special mention: extensions. Extensions are written in JavaScript, run directly in Fireworks, and add new features to make the app better and more productive. Extensions can be written to do almost anything, making it possible to configure Fireworks to be exactly the tool you need!

We have published an excellent series of articles, by Ashish Bogawat, that cover in depth some of the best extensions for Fireworks: part 171, part 272, part 373.

Personally, I recommend the following free extensions:

Also worth mentioning is Project Phoenix88, where many indispensable Fireworks extensions are frequently improved and updated!

Using Fireworks Extensions Yourself? Link

If you’re using Fireworks with extensions, which are your favorites? Which extensions work the best for you and help you the most? Share them with us in the comments!

Before reviewing the apps that might replace Fireworks in the future, we’ll recommend some articles and tutorials. These articles could prove very useful to you, and they showcase some powerful workflows in the app.

UI and Icon Design Link

Interactive (HTML and Mobile) Prototypes Link

Designer Workflows and Techniques Link

Reasons to Use Fireworks for UI Design Link

(Note: There are plenty of reasons to use Fireworks for Web, UI and screen design. While it competes partly with Photoshop, Illustrator, Sketch and other tools, Fireworks is a great tool and still relevant, and it offers a modern, powerful workflow for all kinds of screen design, even today.)

6. Replacing Fireworks: Exploring Our Options For The Future Link

Many designers will continue to use Fireworks CS6 with their favorite extensions as long as it is stable and continues to run on Windows and Mac OS X. But looking at the alternatives106 is important because sooner or later we’ll have to move on. Which apps might replace Fireworks today or tomorrow? Let’s take a quick look.

Today Link

Many people say that Sketch127107 is great, but it still has a few limitations and lacks many of the features of Fireworks. And unfortunately, it runs only on a Mac. But if you’re on a Mac, I strongly recommend trying it! These three fairly recent articles shed more light on Sketch and its features:

Made with Sketch (by Isabel Arakama)111
Sketch is quite powerful for UI design. This vector illustration was made entirely with Sketch by the talented designer Isabel Aracama112. (View large version113)

Antetype114 is an interesting alternative, as is Pixelmator115. Unfortunately, both are Mac-only, too.

Meanwhile, Xara Designer Pro116 is a UI design tool that runs only on Windows. PC Pro has a quick review117 of it.

Tomorrow Link

Alan Musselman118 (former Macromedia/Adobe Fireworks project manager and developer) is working on a new project, codenamed Project EvolveUI119. EvolveUI should address many of our modern screen design needs (such as combined vector and bitmap tools, styles, symbols, the ability to build interactive prototypes, etc.), so this sounds like a promising alternative. Bonus points: The app will be open-source and available on all platforms (Windows, Mac and Linux). The first version is expected at the end of 2014, but if you’re interested, you can sign up to the project’s Google Group120 and join alpha and beta testing and the discussions.

A new screen (layout) design tool by Tom Giannattasio121 and Adam Christ122 is in the works: Project Macaw123. A Kickstarter project124 supports it, and the first version for Mac and Windows should be available in early 2014. This app looks promising, too, but unfortunately, it might not replace Fireworks because it will lack vector and bitmap editing tools, and it will be more like InDesign for the Web than a full-featured screen design app.

As far as I know, Adobe is not working on a replacement. Many of Fireworks’ best features have already been added to its other apps (namely, Photoshop, Illustrator and Edge Reflow), so Adobe recognizes the power of Fireworks’ tools and workflow. However, moving features into other apps is not really a replacement — it just means that designers will be spending more time working across multiple apps.

Last-minute update: It seems that Adobe is working125 on a new design tool that could replace Fireworks in the future. I’ll try to update this article once I know more.

A Note to Our Readers Link

If you currently rely on Fireworks for UI design but have recently discovered an app that suits you better and that might replace Fireworks for you, please let us know in the comments. We’re always looking for alternatives!

7. Conclusion Link

What are our plans, you may ask? For now, we will keep the Fireworks section1264 open. Many designers out there continue to rely on Fireworks and use it. And, with the promise from Adobe to keep Fireworks available for some time longer, it seems that anyone using Fireworks today is still safe.

Of course, we, too, are exploring alternatives! New tools are emerging every day, and sooner or later a better tool will be created by some talented people who really understand how we design for the screen. (One of those tools might be Sketch127107, to which we’ll dedicate an article in the near future. Another is Project EvolveUI128, which is very promising but still in alpha.)

Finally, thank you to the amazing Fireworks community, a community driven by passion and one that makes Fireworks so much better through the contribution of free extensions, useful articles and tutorials — and love!

Also, thank you to Smashing Magazine’s authors — and readers, of course! You guys rock! Your constant support convinces us that we’re doing the right thing with the Fireworks section. We’ve done our best to provide the community with the highest-quality, most in-depth articles about Fireworks and all of the excellent workflows that it offers, and I feel very proud of our work.

Special thanks to Dave Hogue129 (currently UX Design Manager at Google), who helped me with this article and who has been involved in the Fireworks community around the world for many years. Dave has shared his experience with and knowledge of design, workflow and Fireworks in numerous articles, tutorials and videos (and on Twitter130, of course), and he helped me to make certain that this article doesn’t overlook any of the great features that make Fireworks so amazing and useful.

(mb, al, ea)

Footnotes Link

  1. 1 http://blogs.adobe.com/fireworks/2013/05/the-future-of-adobe-fireworks.html
  2. 2 https://en.wikipedia.org/wiki/Macromedia
  3. 3 http://www.reinegger.net/adobe_fireworks_a_super_hero_that_is_hard_to_kill.html
  4. 4 https://www.smashingmagazine.com/
  5. 5 http://blogs.adobe.com/fireworks/2013/05/the-future-of-adobe-fireworks.html#comments
  6. 6 http://blogs.adobe.com/fireworks/2013/05/the-future-of-adobe-fireworks.html
  7. 7 http://blogs.adobe.com/fireworks/2013/06/fireworks-cs6-update-12-0-1-is-live.html
  8. 8 https://www.change.org/en-GB/petitions/adobe-com-release-adobe-fireworks-to-open-source
  9. 9 http://fireworks.abeall.com/extensions/commands/Export/
  10. 10 http://johndunning.com/fireworks/about/SVG
  11. 11 https://www.smashingmagazine.com/2012/06/25/create-interactive-prototypes-with-adobe-fireworks/
  12. 12 https://www.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
  13. 13 http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/
  14. 14 https://www.smashingmagazine.com/2013/01/11/ios-prototyping-adobe-fireworks-tap-part1/
  15. 15 https://www.smashingmagazine.com/2013/01/ios-prototyping-with-tap-and-adobe-fireworks-part-2/
  16. 16 https://www.smashingmagazine.com/2013/02/15/ios-prototyping-adobe-fireworks-tap-part3/
  17. 17 https://www.smashingmagazine.com/2012/10/12/adobe-fireworks-enterprise/
  18. 18 http://www.3revolutions.com/public/fw_annotations.php
  19. 19 https://www.smashingmagazine.com/2012/09/13/create-pattern-library-with-evernote-fireworks/
  20. 20 http://fireworks.abeall.com/extensions/commands/Export/
  21. 21 http://johndunning.com/fireworks/about/ExportAsFavicon
  22. 22 http://johndunning.com/fireworks/about/SVG
  23. 23 http://www.adobe.com/devnet/fireworks/articles/pages_states_layers.html
  24. 24 https://www.smashingmagazine.com/2012/05/07/refining-designs-adobe-fireworks/
  25. 25 https://www.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
  26. 26 https://www.smashingmagazine.com/2012/06/11/developing-a-design-workflow-in-adobe-fireworks/
  27. 27 https://www.smashingmagazine.com/2012/09/13/create-pattern-library-with-evernote-fireworks/
  28. 28 http://tv.adobe.com/watch/learn-fireworks-cs4/understanding-styles-and-symbols/
  29. 29 http://help.adobe.com/en_US/fireworks/cs/using/WS4c25cfbb1410b0021e63e3d1152b00db4b-7fd4.html
  30. 30 http://www.youtube.com/watch?v=1k7ay0Szovg
  31. 31 http://fireworks.abeall.com/extensions/commands/Export/
  32. 32 http://tv.adobe.com/watch/learn-fireworks-cs4/understanding-styles-and-symbols/
  33. 33 http://layersmagazine.com/fireworks-cs4-styles-management.html
  34. 34 http://mtnstonemedia.wordpress.com/2012/12/01/tutorial-adobe-fireworks-cs5-installing-and-utilizing-styles/
  35. 35 http://johndunning.com/fireworks/about/GenerateWebAssets
  36. 36 http://www.mlwebco.com/2010/08/15/how-to-slice-images-like-a-pro-in-adobe-fireworks/
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2013/12/pi-panel-all-screens-large-opt.png
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2013/12/pi-panel-all-screens-large-opt.png
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2013/12/pi-panel-mask.png
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2013/12/pi-panel-rectangle.png
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2013/12/pi-panel-text.png
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2013/12/pi-panel-group.png
  43. 43 https://www.smashingmagazine.com/2013/11/06/even-more-fireworks-extensions-optimized-design-workflow/#gradientpanel
  44. 44 https://www.smashingmagazine.com/2013/11/06/even-more-fireworks-extensions-optimized-design-workflow/#gradientpanel
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2013/12/align-panel-opt.png
  46. 46 http://johndunning.com/fireworks/about/LinkedImages
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2013/12/fw-scale-stroke-effects.large_-opt.png
  48. 48 http://johndunning.com/fireworks/about/MultiBorderRect
  49. 49 http://johndunning.com/fireworks/about/LoremIpsum
  50. 50 http://fireworks.abeall.com/extensions/autoshapes/
  51. 51 http://www.adobe.com/devnet/fireworks/articles/css3-extracting.html
  52. 52 https://twitter.com/stowball
  53. 53 http://mattstow.com/css-professionalzr.html
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2013/12/search-and-replace.large_-opt.png
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2013/12/2011-Kawasaki-Vulcan-opt.jpg
  56. 56 http://dribbble.com/Isabel_Aracama
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2013/12/ferrari-in-adobe-fireworks-large-opt.png
  58. 58 http://dribbble.com/shots/861242-Ferrari-288-GTO-In-Vectors
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2013/12/nikon-ios-icon-opt.png
  60. 60 http://dribbble.com/graphic4fun
  61. 61 https://www.smashingmagazine.com/wp-content/uploads/2013/12/TouchCDJPro-opt.png
  62. 62 http://dribbble.com/graphic4fun
  63. 63 http://dribbble.com/shots/206827-Social-Bar
  64. 64 http://dribbble.com/shots/1167928-Expenses
  65. 65 http://dribbble.com/shots/1213384-Restaurant-Navigation
  66. 66 http://dribbble.com/shots/1089360-Navigation
  67. 67 https://www.smashingmagazine.com/2010/09/17/the-power-of-adobe-fireworks-what-can-you-achieve-with-it/
  68. 68 https://www.smashingmagazine.com/2010/09/17/the-power-of-adobe-fireworks-what-can-you-achieve-with-it/
  69. 69 https://www.smashingmagazine.com/wp-content/uploads/2013/12/adobe-cs5-branding-large.png
  70. 70 https://www.smashingmagazine.com/wp-content/uploads/2013/12/adobe-cs5-branding-large-opt.png
  71. 71 https://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/
  72. 72 https://www.smashingmagazine.com/2013/09/20/fireworks-extensions-for-better-workflow-part-2/
  73. 73 https://www.smashingmagazine.com/2013/11/06/even-more-fireworks-extensions-optimized-design-workflow/
  74. 74 http://johndunning.com/fireworks/about/Tables
  75. 75 http://johndunning.com/fireworks/about/SVG
  76. 76 http://fireworks.abeall.com/extensions/commands/Export/
  77. 77 http://johndunning.com/fireworks/about/MultiBorderRect
  78. 78 http://johndunning.com/fireworks/about/LinkedImages
  79. 79 http://johndunning.com/fireworks/about/SmartResize
  80. 80 http://johndunning.com/fireworks/about/SmartPunch
  81. 81 http://mattstow.com/export-responsive-prototype.html
  82. 82 http://fireworks.abeall.com/extensions/panels/Path
  83. 83 http://fireworks.abeall.com/extensions/commands/Modify/
  84. 84 http://fireworks.abeall.com/extensions/commands/3D-Rotate/
  85. 85 http://fireworks.abeall.com/extensions/commands/Paths/
  86. 86 http://johndunning.com/fireworks/about/GenerateWebAssets
  87. 87 http://johndunning.com/fireworks/about/KeyboardResize
  88. 88 http://phoenix-project.tumblr.com/
  89. 89 https://www.smashingmagazine.com/2012/05/07/refining-designs-adobe-fireworks/
  90. 90 https://www.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
  91. 91 https://www.smashingmagazine.com/2012/06/25/create-interactive-prototypes-with-adobe-fireworks/
  92. 92 https://www.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
  93. 93 https://www.smashingmagazine.com/2013/01/11/ios-prototyping-adobe-fireworks-tap-part1/
  94. 94 https://www.smashingmagazine.com/2013/01/ios-prototyping-with-tap-and-adobe-fireworks-part-2/
  95. 95 https://www.smashingmagazine.com/2013/02/15/ios-prototyping-adobe-fireworks-tap-part3/
  96. 96 https://www.smashingmagazine.com/2012/06/11/developing-a-design-workflow-in-adobe-fireworks/
  97. 97 http://www.adobe.com/devnet/fireworks/articles/css3-extracting.html
  98. 98 https://www.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
  99. 99 https://www.smashingmagazine.com/2012/09/13/create-pattern-library-with-evernote-fireworks/
  100. 100 https://www.smashingmagazine.com/2012/10/12/adobe-fireworks-enterprise/
  101. 101 https://www.smashingmagazine.com/2013/08/26/mojo-motors-responsive-redesign-with-adobe-fireworks-part-1/
  102. 102 http://www.webdesignerdepot.com/2010/08/7-reasons-why-i-choose-fireworks-over-photoshop/
  103. 103 http://pixelyzed.com/pixelforge/whychoosefireworks/
  104. 104 http://www.further.co.uk/blog/the-features-that-make-fireworks-the-application-of-choice-for-web-designers
  105. 105 http://boagworld.com/design/fireworks-vs-photoshop
  106. 106 http://blog.tawhidkhan.com/replace-adobe-fireworks-uiux-design-tools-comparison/
  107. 107 http://www.bohemiancoding.com/sketch/
  108. 108 http://medium.com/design-ux/c59ff242715d
  109. 109 http://medium.com/design-ux/25545f6cb161
  110. 110 http://www.creativebloq.com/khoi-vinh-using-sketch-instead-photoshop-6133901
  111. 111 https://www.smashingmagazine.com/wp-content/uploads/2013/12/made-with-sketch-opt.jpg
  112. 112 http://dribbble.com/shots/1218993
  113. 113 https://www.smashingmagazine.com/wp-content/uploads/2013/12/made-with-sketch-opt.jpg
  114. 114 http://www.antetype.com/blog/2013/04/guest-post-photoshop-is-not-a-page-layout-tool/
  115. 115 http://www.theverge.com/2013/5/8/4312054/pixelmator-2-2-new-shape-tools-ui-hands-on
  116. 116 http://www.xara.com/us/designer-pro/
  117. 117 http://www.pcpro.co.uk/reviews/software/383914/xara-designer-pro-x9
  118. 118 http://twitter.com/AlanMusselman
  119. 119 http://www.evolveui.com/
  120. 120 https://groups.google.com/forum/#!forum/underdog-discussions
  121. 121 http://twitter.com/attasi
  122. 122 http://twitter.com/gesusc
  123. 123 http://macaw.co/
  124. 124 http://www.kickstarter.com/projects/macaw/macaw-the-code-savvy-web-design-tool
  125. 125 https://www.smashingmagazine.com/wp-content/uploads/2013/12/dm.png
  126. 126 https://www.smashingmagazine.com/
  127. 127 http://www.bohemiancoding.com/sketch/
  128. 128 https://groups.google.com/forum/#!forum/underdog-discussions
  129. 129 http://www.davehogue.com/
  130. 130 http://twitter.com/davehogue
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Michel is a freelance designer, illustrator and photographer. He also happens to work as contributing editor at Smashing Magazine and is very passionate about modern UI design tools, HTML/CSS, Web Standards and the smell of good coffee. When not editing articles, he can often be found reading about design, riding his bicycle, looking at the clouds in the sky, or tweeting. :)

  1. 1

    I stopped using fireworks. I use Sketch now. FW has been, pretty much, feature frozen for a few years now. Thanks Adobe *finger* but you dropped the ball on pretty much all the Macromedia products, and have yet to integrate some of their amazing features into your existing product line. Looking at you Illustrator.

    3
    • 2

      Michel Bozgounov

      December 19, 2013 3:42 am

      Many people started using Sketch (instead of Fireworks) and love it. Once Sketch expands its list of features in the future (symbols and rich symbols?), it might become a good replacement for Fw.

      It’s a pity that Adobe never truly explored the potential of Fireworks (after they acquired all the Macromedia products), but, on the other hand, I don’t think any other current Adobe app could really profit from simply “borrowing” Fireworks features. Illustrator (which you mentioned) is a tool that is very complex, often hard to use, and very un-intuitive. It’s also mainly a vector graphics tool (raster images in screen design, I look at you!;-), has too many print options, and so it really lacks the focus on UI design which is one of the strongest Fireworks features…

      Future will tell! For now, I will continue to use Fireworks, but I am also trying to explore new, better UI design tools.

      1
      • 3

        I was fed up with Photoshop, Illustrator and Dreamweaver to develop websites.
        I started to tinker with Fireworks last year but with the Adobe news I gave up on it…for now.
        Adobe should have provided better visibility of this great tool and stop pushing Dw as the only web tool. I personally miss HomeSite.

        0
      • 4

        It saddens me to no end that they are killing off Fireworks. I’m a web Designer, fireworks is THE ULTIMATE tool for web design graphics. I keep trying every now and then ever since Adobe bought Macromedia but have never found anything that’s close.

        Photoshop just sucks for web design and they’ve proven with ever version that they just don’t get it web design or even usability.

        Dear God, WHY hasn’t someone else made a photoshop killer like Fireworks. Why did they ever let Adobe buy Macromedia. Is this about the patents from Macromedia or something?

        Thanks for writing such a list of all the amazing things fireworks can do that Photoshop can’t or that Fireworks just does better. I HATE Adobe and I want to boycott them so bad but Dreamweaver and Fireworks are the bomb. They save me so much time. It looks like they are going to force me in a corner soon.

        1
        • 5

          “Why did they ever let Adobe buy Macromedia. Is this about the patents from Macromedia or something?”

          You can thank Stephen Elop for that. He’s built a career out of becoming some poor sucker company’s CEO and then setting it up to be bought by a larger competitor so he can get a nice financial windfall. He cares nothing about any company’s loyal customers, just big fat stock payouts for himself.

          I really hate what Adobe did with Freehand. They killed it because they couldn’t make Illustrator better, and they didn’t even bother putting Freehand’s best concepts into Illustrator.

          Adobe is a bunch of crooks. They abuse their monopoly power and hurt the consumer. If the DOJ was willing to clamp down on Microsoft, it should take a long, hard look at Adobe.

          2
      • 6

        Brandon Richards

        January 7, 2014 2:56 pm

        I’ve used FW since Macromedia 1.2 and I must say that I’ve seen enough Adobe bs to know that they don’t really care about their ‘bought’ macromedia users. The Fireworks dev’s themselves are very passionate but unfortunately some executive somewhere in the Adobe cloud frowns every time that a Macromedia product is brought before ‘him’. As soon as a tool can bust open the industry and Adobe file compatability problems and offer strong set of tools like Fireworks… I will send Adobe a photo of me and my middle finger.

        3
    • 7

      I was once an avid Fireworks user. When I switched to Linux, I used Inkscape: a cross-platform, open source alternative. Not as polished as Fireworks but very nicely designed. Plus, it’s SVG, which we all know is the open vector format of the future ;-) http://inkscape.org

      0
      • 8

        *Shudder* Inscape/GIMP/Blender…

        Illustrator, Photoshop, Modo 3D… The only way to fly.

        Having given Inkscape, GIMP, and Blender a fair chance. I can honestly say I have no qualms with dropping all three of those like bricks.

        I’m not a huge fan of Indi/Free software, but Modo is by far one of the best alternatives to the mainstream products with a strangle hold on the industry. Specifically the 3D/post-prod industry, where entire companies have folded in the face of inflated licensing costs. *cough cough* AutoDesk *cough cough*

        Whatever works for you though. I’ve been with Adobe products since 1998. I would love to jump ship when the alternatives catch up.

        Sketch is on it’s way though. it’s still missing many features.

        0
        • 9

          I tied so hard to give GIMP a chance, but it just sucks so bad . .

          I really want a decent graphics editor but they just all suck so bad. I guess it’s harder to make than it seems.

          0
        • 10

          I dropped photoshop last year, Sketch is used throughout my office now with the only hurdle being supporting developers tied to a windows machine.

          Exporting to illustrator and then to PS isn’t the best option, we’ve actually ended up installing Mac minis with windows on it so the devs can switch between the two OS’s, that’s how much everyone is digging Sketch. Granted a few years back it was buggy and I dismissed it immediately, but having used it for more than 10 major projects over the last few months I can’t appluad this app enough.

          Working with a team of around 25 devs and designers, Sketch is proving to be invaluable.

          Follow my journey
          https://www.youtube.com/user/stevenc294/featured?view_as=public

          0
      • 11

        I too have switched to linux for more 4 years now. I remember being concerned about what apps to use. I loved fireworks. But it’s sad to see such an amazing app being cancelled. I made the decision years ago to learn opensource design apps on linux like: inkscape, gimp, scribus, bluefish, aptana studio, etc. in fact, all my designs are made with these tools. I do all my web mockups in inkscape. Any designer using adobe apps can make the switch, I have. You’ll be surprised how easy it is to switch. You’ll save a lot and make more money as a result. Anyone agree with me?

        0
        • 12

          Well, somewhat. I’m still using Photoshop, but mostly for more complex tasks, because GIMP still can’t hold its own. It’s not its functionality – it does HAVE. IT. ALL – but the clumsy UI still makes a lot of stuff quite hard, and is just so easy to achieve in PS.

          Inkscape has been a great helpting hand in creating UI drafts and sketches thou. As a former Macromedia :P Freehand user, I was delighted to find out that its handling is quite comparable, and that it got all and everything hotkey-ed.

          Also, the commandline incredibely helped for all those nifty, nasty lil batch jobs you always stumble upon. ImageMagick is just so much better than any of the old “actions” PS crap and any kind of batch conversion tool / option built into a graphics viewer (eg. XnView or IrfanView, to name just a few), too.

          Simply said: Yeah, most stuff is much easier done with “replacements”, thou I havent had found one for Photoshop yet. For snobby stick-up-the-pooper elitists, changing their ways they happened to work for the last 15 years might be a bit too much thou. I don’t mind if they die out thanks to this, too :P

          IMHO, anyone complaining about eg. the command line when using Mac OS X should leave that platform and go back to hiding under the rock you’ve been sitting since the Apple II. Unixoid OSes are fun – and they are not ment to be left aside just for some proprietary GUI gadgets like Photoshop, etc. If more professionals would simply quit complaining about the horrible UI/UX of GIMP and INSTEAD haul their asses towards changing this, then this excuse of an interface would certainly change into something better.
          No proper programming is possible without proper concepts, esp. if its a graphical user interface.

          cu, w0lf.

          0
    • 13

      I agree. I am still waiting for an equivalent to FreeHand. Sketch and iDraw are on the way, but still far from it. I really miss FreeHand Graphics Find and Replace feature. There really is nothing like it in any software I’ve ever used. I could literally change all the colors, graphics and text in an entire 100 page FreeHand file in a few seconds.
      I am hoping for a web design tool that actually lets me specify font information as it is in CSS, as well as borders and other information.

      0
      • 14

        Wow, I loved Free Hand! It’s awesome that someone else remembers it!

        0
        • 15

          I miss Freehand too and cry every time I have to use Illustrator instead. I really miss the multi-paging feature as well as find/replace. The tools and interface were just more intuitive.

          I also use Fireworks for my UI work and just can’t get over what a loss it will be to have to move on.

          Illustrator and Photoshop are very good apps but are far too bloated to be nimble.

          0
    • 16

      Sketch is OK but their dev team is a little difficult to deal with. Killing their user forums because they didn’t like us talking about the bugs in their software was a bad move in my opinion.

      0
      • 17

        Graphic Poet

        March 3, 2014 1:00 am

        For me i am a PC person so I would love to give Sketch a run but I do not know of a windows version.

        0
  2. 18

    Great article!
    Definitely highlights why Fireworks is such a fantastically useful tool.
    It also demonstrates the sheer stupidity of killing it. That decision is really beyond my comprehension.
    Fireworks belongs to the rare breed of application programs that fits its intended use so extremely well…

    1
    • 19

      Michel Bozgounov

      December 19, 2013 4:16 am

      Fully agree with you, Etan! People are still asking Adobe the question: “Why you stopped the development of Fireworks? And why you neglected it for so many years?” but I doubt that we’ll ever get a (meaningful) answer… :(

      I don’t look into the Adobe direction anymore, because my hopes are elsewhere — I hope that someone, somewhere, who really understands UI designers (and their needs), will create a modern tool that will be everything that Fireworks is today… but also much more! The world needs such a new tool!

      1
      • 20

        You think it’s because they are just embarrassed at how much better it is than Photoshop at everything except editing photos?

        1
  3. 21

    I’m designing websites with FW for over years now and I totally agree with everything you mention in the article. Let’s all hope for a good replacement!

    1
  4. 22

    Interesting article Michael and I agree that FW is an awesome tool. Even though Adobe may be letting it whither on the vine it wouldn’t surprise me to see something like Fireworks appear in the Edge Tools and Services to fill a big, gaping hole in the line up: an image editor.

    As for learning Fireworks, I thought you may be interested to know that I have stuck an entire Fireworks CS6 video course up on my YouTube channel at https://www.youtube.com/channel/UCCjDB7XASezB9lERBF1qwbA .

    I originally did it for video2brain and it was given back to me when Lynda acquired v2b earlier this year. I felt it was the least I could do to keep the FW community rolling.

    1
    • 23

      Michel Bozgounov

      December 19, 2013 6:13 am

      Thanks, Tom!!

      1
    • 24

      That’s very kind of you Tom!

      Yeah, I had been using Fireworks since the Macromedia days. I found it very hard to convince Photoshop users to see the viability of Fireworks. (Just to note that I had Fireworks updated last week. So I am glad that they are trying to fixing the remaining bugs.) I think Adobe is committing more resources into tools like Reflow and Animate for HTML5.

      1
    • 25

      That’s exactly what I was searching! I’ve always had Fireworks on my computer but never learned it too well and since Adobe(which always makes stupid moves with its products they don’t seem to understand) dropped the support..well, it’s time for me to learn it!

      I’ve always been fascinated by the simplicity of FW even though I can understand just a little part of it and since Sketch is a Mac only program I can’t even consider it to go big enough.
      I will start learning FW better starting now in my spare time, I won’t let this gem die.

      1
  5. 26

    Frederick Weiss

    December 19, 2013 5:21 am

    I want Santa Claus to bring me FireWorks CC 2014!

    3
  6. 27

    Fireworks is really awesome, I’ve been using it for many years! Quite recently I started using Sketch as well. But Sketch is still missing a lot of essential features from Fireworks and is full of frustrating bugs, though it has promise. Just curious to find out what Alan Musselman is up to :)

    0
  7. 28

    Geert van der Heide

    December 19, 2013 5:00 am

    I think we’re currently in a transitional period when it comes to design tools. Many people have realised that many of the current tools no longer fulfill our needs when it comes to interface design, and the software creators have realised it, too. Currently, Fireworks and Sketch are the closest thing we have to the perfect apps for UI design, with Photoshop seeing a lot of use by people who work around or accept its limitations. But none of those actually fully work as well as they could, for the modern web or app designer.

    In the next two years, I expect there to be a shift towards new things though. Most prominently, the areas of UI design and front-end development will finally start to come together. We’ve been so used to creating static mockups and then coding them afterwards, or designing in the browser using CSS, that we’ve almost forgotten how cumbersome and time consuming this all is. We need tools that provide us with amazing UI design features, while also handling (a large part of) the front-end coding. Macaw is the most ambitious project to try to achieve just this, with a few other promising apps also on the way, like Adobe Edge Reflow and Webflow. These tools currently focus a lot on the front-end development side, but still lack a lot of the in-depth editing features of Fireworks and similar tools. I hope and expect these tools to grow, in order to become truly fully-featured tools for web and app designers / developers. Other software creators may also take cues from Macaw to create even more complete solutions.

    Personally, I’ve been using Photoshop for many years and, while I’m continuously annoyed by its lack of UI-focussed features and its oldschool workflow, I will continue to use it until something more capable shows up. I’ve tried Fireworks and I think it’s basically a better fit for UI design, but I’ve had trouble transitioning to its logic and workflow from Photoshop. Now that Fireworks is being abandoned, I’ve decided to wait and see what Macaw can deliver, possibly with Photoshop as a support tool for bitmap editing. I’ll wait and see what happens, but I’m fairly confident we’ll be seeing good stuff in the near future.

    I feel bad for Fireworks users though, it looks like a truly nice tool for UI design.

    0
  8. 29

    What a read, thanks Mike!

    Yeah, it is really hard to comprehend the decision of killing Fireworks with no anything to substitute some of its awesome features, specially when using them all together in one app…

    I’ll keep using it for now but feel like it is time to start exploring other tools…

    Cheers!

    0
  9. 30

    Great article, thanks Michel
    Small typo in your pixelmator hyperlink though….it links to a 404 now !

    0
  10. 32

    As someone who doesn’t use Fireworks I find this article very one-sided (which is fine, its an opinion) and perhaps doesn’t explore why Adobe have feature frozen it (as well as it could have). I don’t know the answer to this but it would be interesting to see a counter argument.

    My main point: I’m an avid Sketch user. I love it. Sure, it has holes and bugs but the prospect and potential of it make me want to sit it out and see where it goes.

    However your statement here, is very naive when talking about Sketch – “interesting alternative, as is Pixelmator. ”

    Pixelmator is NOT an alternative to Sketch. Obviously some features crossover and thats natural. But they are two different tools at their core. I personally feel Pixelmator in conjunction with Sketch makes for a great repertoire of tools.

    Thats my approach. I’ve thrown out Photoshop. I’ve gone with Pixelmator + Sketch and I love it.

    0
    • 33

      Michel Bozgounov

      December 19, 2013 6:12 am

      I know Sketch is a great tool, and quite promising. I’ve said it in my article, too! ;-) (And I never tried Pixelmator, but keep an eye on it, too, and hear good things about it.)

      You should know that Fireworks is a tool with more than a decade of history, and at least 12 major versions behind its back. Sketch came much later to the game. I don’t underestimate the power of Sketch, but rather wanted to explain in my article, which features make Fireworks such a great tool for UI design.

      Fireworks combines inside one tool the power of vectors and bitmap editing. This is its major strength. You don’t need to switch between a vector-based tool, and bitmap-editing tool. You have all inside one package. That’s the reason why so many people love it and use it…

      0
      • 34

        Thanks for the reply – my main opinion was that Pixelmator shouldn’t be compared to Sketch nor touted as an alternative. Its like saying the alternative to Illustrator is Photoshop. They have a 10% (number plucked from thin air) crossover in terms of features, but they are different.

        Convergence is both a good and a bad thing, for so many reasons. Fireworks combining bitmap and vector editing in a single package is certainly a plus and no doubt is efficient as a workflow. Thats a good example of convergence. The bad? You’ve already given the example – Fireworks feature-freezing. All of your eggs are in one basket so to speak. Lots of functionality, combined into a single product – now you’re left scrambling for a whole set of tools, rather than perhaps just vector editing tools.

        Convenience means different things to different people. I’m not saying you’re wrong/I’m right, or visa versa. Convenience fits into how you work best, so there’s always a counter argument.

        0
        • 35

          Michel Bozgounov

          December 20, 2013 3:54 am

          The bad? You’ve already given the example – Fireworks feature-freezing. All of your eggs are in one basket so to speak.

          — This could happen with any app you’re using. What if tomorrow there’s no Photoshop? Or no more Sketch? What if you rely on these programs in your work?

          There’s no problem that a good UI designer is using one app for all screen design tasks, if that app fulfills all his needs. The problem is that Adobe never really cared seriously about Fireworks, even if the tool had great potential. Now Fireworks users only have to hope that some smart software developer will create a tool that is better than Fireworks. (An no, using multiple tools for screen design is certainly not making things easier… The super-slow and clumsy Ps+Ai workflow, practiced by so many designers today, should prove this point.)

          0
          • 36

            Did Adobe care about any of the tech they bought from Macromedia? It seems like they systematically killed it all off.

            1
  11. 37

    Nice article. I look forward to the new UI software you hinted at coming from Adobe. In the meantime, we’ve been really excited at my current company (LOYAL3) to be using Antetype. You guys should all take a look. A great UI tool that is new to the scene and one that is just so great for us. It has changed our entire design process across our company. Features that are unique to our needs in the design space. Antetype.com

    0
  12. 38

    Great article! I rarely read articles that long but I read every sentence.

    Didn’t know about the ‘Modify → Snap to Pixel’ feature! That will come in handy. Long live Fireworks!

    0
    • 39

      Illustrator and Photoshop *both* have the snap to pixel feature in case you use either of those as well. That is a key setting to use with designing for the web in either products vector tools.

      0
      • 40

        Michel Bozgounov

        January 2, 2014 8:29 pm

        In Fireworks, snap-to-pixel is not a feature or an option. In Fireworks, every object, always, snaps to a pixel-perfect grid. In Illustrator and Photoshop, this is an option — but it’s not “ON” by default, and even when it’s “ON”, you can switch it off.

        This clearly shows that Fireworks is a tool for UI/screen design, and Ps and Ai are not such tools.

        P.S. Oh, and the “snap-to-pixel” features were added fairly recently to both Ps and Ai. Fireworks had this since version 1.0. ;-)

        2
  13. 41

    I am a long term Fireworks and Freehand user and still feel bad about the buy out of Macromedia by Adobe.

    I was watching the FreeFreehand community and have also closely followed their alternative app, previously called Stagestack and now rebranded to Gravit Express.

    They have an early preview on their site and a pretty up to date news channel. Might be worth checking out – gravit.io

    0
  14. 42

    I see you mention that Xara Designer Pro “… is a UI design tool that runs only on Windows. PC Pro has a quick review of it.”

    I have been using a Macbook for many years and have been using Xara Designer for at least 3 years on it. Yes, you will need to install a VM, to be able to install Windows and then any Windows based programmes.

    But, I wanted to make it clear that even if you have a Mac, this does not mean that you cannot use the best and fastest vector drawing programmes made by Xara.

    0
    • 43

      Michel Bozgounov

      December 20, 2013 3:50 am

      Well, similarly, you could install Sketch inside a Mac OS X virtual machine on Windows 7 or 8… but… that’s not the same as if Sketch was available “natively” for Windows users. :)

      0
  15. 44

    Please notice that most the features mentioned in this passage already existed in 2005, which means Adobe has never offered a BIG-UPDATE to Fireworks yet. Instead, they replaced Fireworks text engine in CS4 (consider it as a big update if you’d like) and removed the System-Antialiasing option for text object (which they added to Ps now with a new name: Windows LCD, thanks god Fireworks text looked sucks now). What’s more important, an old software like this is still an excellent UI design and prototyping tool, and it’s convenient to create any extension you need to speed up your work.
    I never use Sketch and Pixelmator as I am a Windows user. Although they’re great, but… hell knows? I have been wondering why there’s no a version for windows. Fireworks is the best, bar none! Based on what I’ve knwon.
    By the way, my favorite Fireworks extensions are ‘JSML Library’ and ‘FWXHR’!

    I write my own Fireworks extensions, btw, you can check them on my site. ;-)

    0
  16. 46

    I’ve had a designer who was a fan of Fireworks. He did everything in Fireworks.

    Once I’ve told him to design a full-door-size sticker. Turned out great and fast. But he could not export scalable vectors for print, and he could only export 6000px max length raster. We printed raster 6000px into 86 inches height door. You can believe it looked shit with that 70 DPI.

    Another turn I asked him to design a t-shirt logo which we wanted later to serigraph (I mean stitching) on cloth. Of course we were asked to submit vectors for production, so I ended up redoing everything in Illustator myself having a PNG from Fireworks as a background layer to vectorize.

    From that time I personally hate this guy and Fireworks. I’m sure its a great software, but use it only where its supposed to be used.

    0
    • 47

      Peter Hilgersom

      December 20, 2013 12:09 am

      Well instead of hating on the guy you could have helped him learn the error of his ways.

      1
    • 48

      Michel Bozgounov

      December 20, 2013 3:40 am

      Interesting story, but I see a couple of weak points in it:

      — Fireworks is a screen design tool. Why use it to make designs for print?

      — Fireworks can create a canvas with a maximum size of 6000×6000 px, but there’s a documented “hack” to make the max. size 10000×10000 px.

      — From Fireworks, it’s very easy to copy one or many vector objects and simply paste them as vectors into Illustrator. So I don’t understand, why you went this complex way (“redoing everything in Illustator myself having a PNG from Fireworks as a background layer to vectorize”)? You could have copied the vectors from Fireworks to Illustrator and save a few hours work. Or, you could have saved the vector illustration in Fireworks as *.ai file and then open it easily in Illustrator.

      You see, the moral of your story is that it’s important to know what tool to use and when, and also to use properly the tools for the job. It seems, you and your Fireworks designer guy, did neither. ;-)

      0
      • 49

        Michel, I fully understand what Fireworks is for. I’m 100% in line with the first point you given (and basically everything you’re giving, please read my very last sentence. Unfortunately my designer is not, so after couple of such faults he’s no more my designer. Yes, I’ve told him to use proper tool once I learned he can’t choose one, he just hated everything except Fireworks.

        As for that time I redo everything in Illustrator… Don’t remember exactly, but I think he used effects and tools specific to Fireworks. Yes, I could export/save basic shapes in vector format, but those effects were gone.

        0
        • 50

          Michel Bozgounov

          January 6, 2014 7:01 am

          1) Fireworks is a great tool for UI design. For vectors+print stuff, Illustrator is your tool. I guess we both agree on this point. :)

          2) If you apply live filters (or complex gradients) to vector shapes in Fireworks, then copy and paste the vector shapes into an Illustrator document, yes, you most likely will have to re-do these in Ai. But, the vector shapes will be 100% preserved and you won’t have any issues with that. You could save a lot of time if you “transport” your Fireworks vectors into Illustrator (either with simple copy-paste or by saving to .ai in Fireworks)… You’ll have to work on colors and effects a bit, but vectors will be intact and this alone is a major plus…

          0
  17. 51

    I was gutted when I first heard the news about Fireworks no longer being developed. I started using Fireworks from the very first version when I was about 15 years old and it was probably Fireworks and Dreamweaver that actually got me into the web industry. Photoshop always seemed too clunky to me – I love it’s photo editing features, but as a screen-design application, it’s just not streamlined enough.

    I know so many people that think of Fireworks as an essential part of their toolkit (TheOatmeal creates all of his comics using Fireworks) and I’m going to carry on using it for as long as possible.

    0
  18. 52

    Peter Hilgersom

    December 19, 2013 11:56 pm

    For the last 4 years I’ve been trying to get away from Fireworks because of aforementioned reasons. Feature-frozen and annoying bugs.

    But it’s just sheer impossible to find a worthy replacement that runs on windows. I tried Photoshop many times.. but after being stuck for minutes doing something you’d intuitively do in seconds in FW.. yeah.. forget it. Although PS seems to incorporate new features that help along the way.. it just doesn’t cut it.

    0
  19. 53

    I stopped working with Fireworks when they got sucked by Adobe. And it really proved me right. I’m not too much into designing stuff with Photoshop, but it seems to be the #1 supported way these days while Fireworks got abandoned since they belong to Adobe. Its performance, its interface, its handling has already been frozen ever since so officially freezing it now doesn’t really change too much. It’s such a shame, I really, really loved this software and it broke my screendesigner’s heart to turn my back on it, but today no HTML or MobileAppDev would know what to do if I’d send him a FW-workfile. It’s just one example of how this once great software got completely irrelevant. What I don’t really understand is, that there is a huge gap between Photoshop and Illustrator and noone seems to be able to fill this gap with a software like Fireworks. I’d totally go for that as PS just isn’t a screendesignsoftware at heart, neither is Illustrator and still we are forced to work with those solutions? Actually I’m not even one of those people who don’t like Adobe, I just wish I could understand, what’s driving them. If FW sales got that bad, then surely not because there aren’t enough web/mobile/whatever-designers out there but because no one wants to professionally rely on software with such a bad support. So if they are now freezing it, then PLEASE just because they are developing something superfresh, the time would be right and the states of art also have reached a new generation to allow a step like this. I’d be the first to throw his money into the first developers direction that manages to deliver a real screendesign software solution.

    0
  20. 54

    I truly feel bad for those who really took the time to learn and use Fireworks (myself included). All of these software packages have a learning curve and that means a tremendous amount of time and effort is wasted when they pull the plug.

    I was an advanced Flash user and when it was killed (by a single individual), it destroyed a whole industry. People actually studied this program in college for years!

    Every time they kill a software package, it significantly decreases my value as a creative professional.

    My 2 cents

    -dp

    0
    • 55

      My though is that what we see here is an interesting parallel between traditional print and UI/web design. Technology no matter how effective or good gets replaced by those with an agenda that doesn’t always match the populace.

      When the newspaper industry went from letterpress to offset printing an entire trade was wiped out over night by Rupert Murdock in 1982. Hundreds off Linotype compositors actually lost their jobs overnight (actually not metaphically). The mostly men did seven year apprenticeships and worked their entire careers as “lino” operators.

      It happened similarly when Quark was killed off by Indesign (although not overnight). Having seen a few guys go through both these changes I think you have two choices. Learn something new or start an new trade/career. I think it is always good to be open to new methods of work, JUST IN CASE.

      I started using Corel 3 and miss one or two features but will never be held back by that.

      0

↑ Back to top