Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. 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. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

How To Optimize The Design Workflow With Fireworks Extensions

I’ve been using Adobe Fireworks for over a decade now and I can recommend it to anyone searching for the optimal screen design workflow. Much has been said about Fireworks’ capabilities as a design application, but today I want to focus on one of its other biggest strengths — its extensibility.

As a platform, Fireworks gives its users a lot of freedom, when it comes to extending it. Because of that, Fireworks has a thriving ecosystem of add-ons (extensions) that add a lot of valuable functionality with newer options.

In this article, I’ll try to list some of my top extensions for Fireworks. These are not necessarily the most complex or powerful extensions, but rather those that have helped me be more productive with my Fireworks workflow over the years. Also, all of these are free to test and use, so you can even try them right away!

My article is pretty detailed, so to help you navigate it, you can use the following list:

  1. Grids Panel1
  2. Guides Panel2
  3. Smart Resize Auto Shape3
  4. Tables Auto Shape4
  5. Placeholder Auto Shape5
  6. Orange Commands6
  7. QuickFire7

Further Reading on SmashingMag: Link

Working With Extensions In Fireworks Link

Fireworks can be easily extended, but the extensions are installed and maintained via the Adobe Extension Manager — a tool that must be run separatey from Fireworks.

Before we review in detail the extensions that I can personally recommend, I would like to share a few general tips and suggestions on how to work with extensions in Fireworks. Although these tips are mostly geared towards Fireworks CS5 and CS5.1, there are actually only a few minor differences if you are using version CS6.

Easy fix for issues with Windows Vista / Windows 7 Link

If you are using Fireworks on Windows Vista or Windows 7, the Extension Manager may give you strange errors when you attempt to install an extension. The easiest solution to this problem is to run the Extension Manager as administrator. Simply right-click the “Extension Manager” shortcut and select “Run as administrator”.

Note: The reason why the EM needs to be run sometimes with administrator privileges in Windows Vista and Windows 7 is simple — some extensions specify installation locations in the Program Files folder, and Windows requires administrator approval to install anything in this area, for security reasons. Usually older extensions (that were not recently updated) are installed into the Program Files folder, while new extensions are installed into the User Application Data folder. Fireworks can run extensions from either the Program Files folder or from the “User Application Data” folders in order to maintain backward compatibility with older extensions.

Where are the installed extensions located? Link

If you are installing Fireworks extensions for the first time, keep in mind that:

  • Commands will usually appear in the Fireworks Commands menu.
  • If an extension also installs a panel, you will find it in the Window menu.
  • If an extension installs an auto shape, it could be found in the Auto Shapes panel.

Extension descriptions Link

The best way to learn how an extension is supposed to work, or in which menu / submenu you’ll find it, is to look for the extension description in the Extension Manager. However, please note, that the Extension Manager lets extension developers link to descriptions online, which means that if you are not connected to the Internet, you will see empty description boxes in the Extension Manager. If you do come across these, know that a missing internet connection might be the cause.

Using shortcuts Link

If there are some commands that you find yourself using very often, you may want to assign keyboard shortcuts to them for gaining more productivity.

To do so, go to menu EditKeyboard Shortcuts, duplicate the default shortcuts set, then select your command from the list and add a shortcut combination of your choice. Fireworks will let you know if the shortcut you want to assign is already in use. Then, depending on what it already does, you can either choose to replace it with the new one, or select a different key combination.

Updating extensions Link

Updating extensions in Fireworks is pretty straightforward — you just have to open the Extension Manager every once in a while. If an extension has an update available, you’ll see a notification in the list of extensions. Then, simply select the extension and click “Update”.

Updating Extensions Using the Adobe Extension Manager
Process of updating extensions.

Please note that not all Fireworks extensions have the “Automatically Check For Updates” option built-in. So alternatively, you can simply download a newer version (if there is one available, of course) from the website where the extension was originally posted, and then run the Extension Manager. The EM will ask you if you’d like to replace the old version with the new one — select “Yes”, and the process will complete automatically.

Now that we’ve covered the basics, let’s move on to the list of extensions!

1. Grids Panel12

John Dunning13 is a legend in the Fireworks community, and his growing list of powerful extensions14 often compete with themselves for the top spots as valuable and useful. His grids extension15 is unquestionably the first one I reach out for every time I start a new project.

In a nutshell, the extension lets you set up a grid for your design. You set the parameters (the column width, gutter width, number of columns, etc.) and it then creates a locked layer with the columns, rows and guides spanning the height of your canvas. Since there are a couple of setups that I usually prefer to work with, I’ve saved them as presets, so it’s simply a matter of opening the panel and selecting an existing preset.

For responsive designs, what I typically do is create a few grid setups for different viewport sizes. Then I simply create a new page for each breakpoint and apply the appropriate grid before pasting the content in for realignment.

Insert Grid Panel16
Insert Grid Panel: Typical setup for a 12-column grid. Large preview17.

The features of the grid panel are evident from the screenshot, and make it easy to control columns, gutters, and baselines as wells the appearance of the overlay (and whether or not guides should be created). If you have ever tried to set up a grid in Fireworks without this extension, you’ve wasted a whole lot of time!

Useful tip: Using Photoshop and need something similar? The GuideGuide18 panel might be something worth giving a try.

2. Guides Panel19

As awesome as the grid panel is, it’s probably not suitable for every situation. Sometimes you may need to just create a set of guides without all of the other grid structures (e.g., if you are creating individual assets such as banner ads, rather than entire pages — grids are great for entire pages and screens, but they can be an overkill for specific components).

Also, for those of you who work extensively with guides, it often seems much easier to quickly set up the grid precisely with guides. If you are like me, and addicted to the fine control that guides offer in Fireworks (or any other design application for that matter), you most certainly would like to check out the Guides panel20 by Eugene Jude.

The panel gives you several options to add guides to the canvas with precise numerical control: you can set margins on either (or all) four sides, create columns and rows, or add individual guides at specific coordinates.

Guides Panel General
Guides Panel (with the “General” tab selected in it).

You can copy entire collections of guides and paste them into another page or document, or even save sets to retrieve later (this feature is pure gold if you have a setup that you work with often, and want to reuse).

But where this panel really shines is in its ability to work with selected objects. Lets say you need guides all around and through the middle of that image you just placed in your design, so you can align objects around it. Simply select the object, go to the “Selection” tab in the Guides Panel and select the appropriate boxes. You can even set an offset value between the object and the guides.

Guides Panel Selection
Adding guides through the center of a selected object.

Finally, there’s the ability to delete all guides, or at least only the vertical or horizontal ones (oh, how I wish I had this panel a little earlier — this would have easily saved me a couple of precious weeks every year!).

3. Smart Resize Auto Shape21

Since Adobe Fireworks is used extensively for UI design, a very common use case is to create an interface element by grouping a few objects together — rectangles, text fields, buttons, etc.

Fireworks’ object-based workflow makes this an easy task (compared to Photoshop’s predominantly layer-based structure). The problem though is that once you have created such a group, resizing it can be difficult. You can’t just select the group and change its width or height, since Fireworks will simply stretch everything in the direction specified, and deformations to the individual objects will occur.

That’s where John Dunning’s Smart Resize22 comes into play.

Once you’ve selected a group that you need to resize, use menu CommandsSmart ResizeAttach, and the command will convert your group into a special smart object with the typical yellow resize handles.

Smart Resize: Saving Time When Resizing Groups of UI Objects
Smart Resize: Saving Time When Resizing Groups of UI Objects.

You can use these handles to resize the group in any direction and witness the magic in action. The extension will resize only elements that extend across more than 50% of the group’s size — which is typically your background boxes — and retain the rest of the elements in position relative to the closest edge of the group.

Smart Resize in Action
Smart Resize in action.

For extra control over how elements in your Smart Resize group scale or are being repositioned, you can set anchor points for each individual object. For example, elements that have their X anchor set to the left will only scale on the right side; the left edge will stay fixed in proportion with the rest of the group.

Smart Resize: Selecting Anchor Points
In this example, the X anchor was set to the left, then the group was resized.

Text boxes will be resized while maintaining their text properties intact — the height and width of the text box will change, but not the text itself. John demonstrates the extension’s usefulness when working with a mock-up of a dialog box on his website. But of course, there are many more cases where you can save time with this extension. Personally having used it for a couple of months now, I’ve found my workflow immensely optimized, especially when creating wireframes where quick changes to try out variations become the “need of the day”.

4. Tables Panel23

If there is one extension in this list that I would award as the “Most Underrated”, it would have to be the Tables Panel24 from John Dunning.

It does something that seems very simple but is actually much more complex and tedious: building and editing tables (painlessly!) in Fireworks. It can also be an indispensable tool for editing many other design elements, including buttons, styled boxes, and placeholders.

We’ve all been there, haven’t we? Every designer knows that often the task of mocking-up a table inside a Web design (or a Web design prototype) can come up. Unfortunately, it is rare for a graphics editor to provide a decent level of support for building tables, and Fireworks is no exception. Everything from deciding whether to use rectangles for rows or individual cells, or aligning things manually every time there’s a change in the design, tables in Fireworks can be a pain.

But things change a lot with the introduction of the “Tables” extension!

Tables Panel: Easily Build Tables in Fireworks
Tables Panel: Easily build and modify tables in Fireworks.

To create a table, you simply lay out the content of the table roughly on the canvas, in the sequence you want. Select all objects, and hit the “Create” button in the Tables Panel. The extension will add individual boxes for each element and lay them out with the height and width of the biggest element that appears in a row or column. You can change the padding, decide whether you want to see the table outlines (or not), and so on — and what’s better, everything always remains editable. Lets say you changed some text in the table, and now it’s too long for the cell that contains it? Simply press the “Update” button and the table will auto-adjust accordingly!

Apart from the obvious goal of creating tables and grids, one can use the extension in a few other scenarios. For example, you could use it in adding a background and border to text boxes for pull-quotes, so that the box always adapts to the size of text.

I often find myself using it for buttons when creating wireframes. It has always been very annoying to me that I have to keep managing a rectangle and a text field every time I need a button. With this extension it’s all taken care of, and I never have to manually change the width of a new button to fit the text inside it! Besides, you can even have borders of different widths around the button by changing the border widths in the Tables Panel.

Tables Panel: Creating Dynamically-Sized Buttons Quickly.
Tables Panel: Creating dynamically-sized buttons quickly.

The Tables Panel is pretty flexible and has many other options. You can even insert a table from a text file (tab-delimited or comma-separated text file — .txt or .csv). After you select the file, the contents of the table will be inserted at the upper-left corner of the document (you can later drag the table around and position and style it in any way that you want). You can also import a table from a Web page — you’ll just need to first convert it to tab-delimited or CSV format.

Tables Panel
Tables Panel: it provides you with a high level of customization and with various options.

As you can see, the possibilities for working with tables are almost unlimited. All of this is possible again thanks to the power of Fireworks and the talented extension developers that give so much to the community!

5. Placeholder Auto Shape25

If you use Fireworks extensively for wireframing, you are no doubt aware of the frustration of maintaining placeholder boxes and the necessary information contained within. I usually draw gray boxes for my images and include a descriptive label, the height and width co-ordinates within the box. The problem is, this metadata often needs to change with the size and position of the placeholder. Updating this information manually and re-aligning the text so that it is always in the center can be a pain.

John Dunning to the rescue again, with his Placeholder26 auto shape extension.

To create an image placeholder, pick this auto shape from the Tools panel (instead of the standard Rectangle tool), and it will draw a box with the necessary data already filled in. Every time you resize and reposition the placeholder, the coordinates will automatically update as necessary.

Placeholder Auto Shape: Dynamic Placeholders that Always Stay Up-To-Date
Placeholder auto shape: Dynamic placeholders that always stay up-to-date.

It’s interesting to mention that the Placeholder tool can be found in the Tools panel. But also, this extension installs a Placeholder auto shape, which can be found in the Auto Shapes panel. Both the tool and the auto shape do the same thing, and the difference between their use is very minor (you can select the Placeholder tool and drag it to any size on the canvas, while the Placeholder auto shape should be first dragged and dropped to the canvas, and then resized).

As you can see in the screenshot above, you can decide what information gets displayed in the placeholder. The choice is between showing a custom label for the placeholder (like “logo”, “screenshot”, “banner”, etc.), and the coordinate of the image (height, width, x & y coordinates). Clicking the crosshairs in the middle of the placeholder opens up a dialog box where you can turn these details on or off. You can also change the size and position of the paceholder precisely right from within this dialog box and change (or remove) the fill color.

Placeholder Auto Shape: Choose What Content You Want on the Placeholder
Placeholder auto shape: choose what content you want on the placeholder.

Useful tip: If you have multiple placeholder shapes in your file, you can select them and resize them all at the same time. Neat!

6. Orange Commands

If there’s anything I would call a Swiss Army Knife for Fireworks, it would have to be Orange Commands by Ale Muñoz.

Unlike every other extension in this roundup that focuses on a single task or a group of tasks, Orange Commands aim to bring efficiency to tasks across your entire Fireworks workflow. From aligning objects, to setting guides around selected objects, to combining two text objects into one — Orange Commands are a collection of small tasks that you would typically perform through a series of steps. And what’s more, they’re not only free, but are also open-source, letting anyone with enough know-how to tweak and extend them even further!

Here are a few of my favorite commands from the 100+ that this extension comes with:

  • Most designers don’t know this, but there is a way to change the alpha / opacity of a stroke in Fireworks CS5.1 as well as earlier versions. Unfortunately, to change it you will need to go into the “Edit Stroke” panel and then inside “Advanced” to get to this control — the feature is pretty much buried. Orange Commands bring this ability right up to a single click with the Stroke Alpha set of commands under Alpha.

    (Using Fireworks CS6? You’re lucky! A few new options were added in the Properties panel, which include independent control over the opacity of both stroke and fill!)

  • If you like to number your pages so they appear in a specific sequence after being exported, just set them in the right order in the Pages panel. Then hit Numberize under Pages, which adds a number in front of the name for each page. Need to change the order? Reorganize the pages and hit the command again. There is also a De-Numberize command that will let you get rid of those numbers, if needed.
  • Need to swap the position of two objects in your design? Select them and hit the Swap command under Position. Easy!
  • Fireworks has shortcuts for aligning multiple objects to each other, but you still need the Align panel if you want to align something in reference to the canvas. That’s where the Center on canvas set of commands under Align comes into play.
  • You can use the Space horizontal and Space vertical commands under Align to distribute selected objects with a specified distance between them.

This is just a small part of what Orange Commands can do. You can check out the detailed documentation for more details on what’s available.

Since Fireworks lets you assign keyboard shortcuts to all menu items, you can assign them also to your favorite commands, converting any series of steps into single, keyboard-driven actions. Although I have a few favorite ones, virtually every one of the commands has contributed to “shaving” precious seconds off my workflow, which amount to hours saved every month.

Useful tip: Did you know that Orange Commands come with their own keyboard shortcut sets that pair perfectly with the commands themselves? If you’d like to use one of them, simply copy the shortcut XML files to the “Keyboard Shortcuts” folder (see “Installation” for reference), restart Fireworks, and then select one of the “+ Extras” sets. Of course, you can can further customize these shortcut sets, as well.

7. QuickFire Command27

With the large number of useful extensions available for Fireworks, it doesn’t take very long before your “Commands” menu becomes overcrowded with items. At this point it could be really difficult to get to the command you need right at that moment. On the other hand, remembering countless shortcuts for quick access of all the commands, panels and menu items in Fireworks can also be difficult.

And that’s where QuickFire28 comes into play. This extension is again from John Dunning, and it is a fitting tribute to the power and flexibility of Fireworks. QuickFire is similar to Quicksilver29 on Mac OS and Launchy30 or Colibri31 on Windows. It is a super simple, keyboard-driven interface for getting to the Fireworks command you need, without all the slow digging through various menus and sub-menus.

Once you’ve installed QuickFire, assign a keyboard shortcut to it and restart Fireworks. Then, when you hit the QuickFire key combination, you can start typing what you need. It will instantly list everything that matches what you are typing, with various icons to easily differentiate between panels, commands, auto shapes, pages and more! The most relevant item will be at the top of the list and ready to be run once you press Enter. The icing on the cake is that QuickFire works with everything in Fireworks, and not only the custom commands that you have installed.

QuickFire: Access any Command, Panel and Auto-Shape in Your Fireworks Set-Up with a Few Keystrokes.
QuickFire: access any command, panel and auto shape in your Fireworks set-up with a few keystrokes.

Let me take a real-life example to demonstrate how I use the QuickFire panel to increase my productivity in Fireworks on a day-to-day basis. Let’s say I need three lines that I need to align to each other, position them with even spaces from one another and add vertical shadows to each one. Here’s how I do it (without ever touching the mouse) once I’ve drawn and selected one of the lines:

QuickFire: Lightning Fast Editing Workflow.
QuickFire: lightning fast editing workflow.

Useful tip: When you open QuickFire and search for a specific command in the list, pressing Enter normally executes the selected command and closes the dialog, while pressing Shift + Enter runs the selected command but keeps QuickFire open — this will allow you to run several commands in a row (and save a few more keystrokes).

QuickFire offers many more productivity enhancements. It will let you:

  • Open panels quickly.
  • Insert Symbols from the Common Library.
  • Insert Auto Shapes.
  • Access standard Fireworks menu commands.
  • Apply textures and patterns to selected objects.
  • Open recent files or create new files from templates.
  • Select layers and pages, and also move or copy selected objects across layers and pages.

Again, you can check the detailed description of QuickFire and its common uses on John’s website32.

Conclusion Link

As you have probably already guessed, I’m a huge fan of extensions and use them quite regularly in my design workflow with Adobe Fireworks. The list of extensions I use on a daily basis is much longer than what I can include in just one article — what’s covered here are just a few of them that address critical areas in Fireworks, to make a designer’s life a bit easier. And please note: in a possible follow-up to this article, I’ll try to review in detail a few more extensions that address several more specific areas within Fireworks.

Also, with the sheer number of extensions available for Fireworks, I’ve only scratched the surface of what’s possible. If you feel I missed any important ones, do let me know in the comments — I would love to learn about those and try experimenting with them myself.

(In)complete List Of Useful Resources Link

Finally, I think that this article should end with a list of places to get (or to learn about) the best extensions for Fireworks:

  • Fireworks Interviews33
    The idea behind this project is to interview designers all around the world who use Adobe Fireworks on a daily basis. You’ll also see there are quite a few recommended extensions (with tips and tricks) by many skillful designers, such as: Keith Lang34, Nick Myers35, Benjamin De Cock36, Jonathan Snook37 and many others.
  • “Extending Fireworks”
    All about articles on Fireworks extensions and commands, interviews with their authors and helpful tips. The website is relatively new but already has a few valuable resources posted on it.
  • Fw Police38
    Brings many free resources to people using Adobe Fireworks — extensions, Fireworks PNG files and other freebies. (By the way, the same FwPolice guys are now working on a new project39 that will relate to Fireworks extensions, as well.)
  • “Adobe Fireworks: The Most Awesome Extensions”
    Designer Mikko Vartio talks about his favorite extensions and what they do.
  • Favorite Adobe Fireworks Extensions40
    A long list of Fireworks extensions, prepared by UX designer Dave Hogue.
  • John Dunning’s extensions41
    John Dunning’s extensions for Fireworks. Make sure to check all of them out!
  • Aaron Beall’s extensions42
    Aaron Beall (who is an experienced user and developer for both Fireworks and Flash) has some pretty useful extensions, too.
  • Matt Stow’s extensions43
    Matt Stow has a few extensions that will help any professional Web designer and developer.
  • Fireworks extensions | Adobe Exchange44
    List of all Fireworks extensions published on the Adobe Exchange website.

Further Reading Link

(mb) (jvb)

Footnotes Link

  1. 1 #grids
  2. 2 #guides
  3. 3 #smartresize
  4. 4 #tables
  5. 5 #placeholder
  6. 6 #orangecommands
  7. 7 #quickfire
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47

↑ Back to top Tweet itShare on Facebook

Ashish is a designer, technology enthusiast and gamer. Other than drooling over gadgety goodness on the web and elsewhere, he leads a UX Design Studio in Pune, India. He's on twitter as @abogawat.

  1. 1

    I only hope Adobe would do something about the text-rendering on Fireworks. Its so annoying to be working at 100% or exporting all the time.

    • 2

      Andrea Liliana

      August 28, 2012 1:00 pm

      Totally agree with you. Adobe have to be something with that text rendering, it’s time consuming the preview process.

      • 3

        For a better text-rendering you can apply Custom Anti-Aliasing from the Properties Panel under Anti-Aliasing Level. I often use 16 times oversampling with 255 sharpness and 0 strength. Note that these values vary based on situations. But this feature does allow you to control the fonts render for mockups.

    • 4

      Setup a default browser and then just hit F12 everytime you want to see a quick export.

  2. 5

    Fireworks is such a great tool, I’ve been using it since my first steps in web design – back in 1997 or so.

    What I can’t stand about Fireworks though are the mastodon font anti-aliasing and raster resize algorithms from the early days of computer graphics. Same largely applies to Photoshop.
    If you know any plug-ins that improve these 2 things, please share.

  3. 6

    Muhammed Jenos

    August 28, 2012 7:59 am

    Its such a pleasure to see more Fireworks articles and Smashing Magazine taking an active role to keep Fireworks alive from the threat of being discontinued. Once you master Fireworks takes just 25% of the time the same mockup to be designed in Photoshop. I hope Adobe would never make such a mistake and instead improve the text rendering in Fireworks as good as Illustrator.

    Keep up the great work Smashing Magazine. And thank you Ashish for the excellent article

  4. 7

    Andrew Richardson

    August 28, 2012 8:46 am

    This is a great resource, having just started using Fireworks for wire framing and rapid prototyping this will be really helpful.

    You HAVE to tell me how you create such elegant .gifs! They are simply amazing for showing an experience quickly. I’ve been looking for an effective way to create them for a while now.

    • 8

      Ashish Bogawat

      August 28, 2012 7:42 pm

      I used Camtasia Studio for the demos. Recorded a portion of the screen like you typically would for a screencast, and then simply exported the output as an animated GIF.

      • 9

        Andrew Richardson

        August 29, 2012 8:01 am

        How do you make sure they are so small yet still have good quality? It seems like mine are always HUGE in size.

        • 10

          Ashish Bogawat

          August 29, 2012 8:28 am

          Takes a little bit of trial and error. The key is to keep the visuals as sparse as possible and avoid too many colors and especially gradients.

  5. 11

    Great article, I hadn’t taken a look at the Fireworks extensions recently, but that Quickfire one looks like a 10/10. Thanks again to Smashing for putting out Fireworks resources!

  6. 12

    Thanks for the article. Any chance you could confirm if the extensions work with CS4?

    • 13

      Ashish Bogawat

      August 28, 2012 7:45 pm

      They should all work fine in CS4, although I’ve not been able test each one myself. In fact some of them were built for much older versions of Fireworks anyways, but still work in the latest versions.

  7. 14

    Interesting, always thought of fireworks as photoshop’s little brother. I would now revisit this product that’s installed in the production bundle but never launched. Great article.

  8. 15

    J Cole Morrison

    August 28, 2012 12:05 pm

    Oh. My. Gosh. AWESOME. Thanks so much for the share! That Tables extension alone will save me lifetimes of labor.

  9. 16

    Dano Alexander

    August 29, 2012 12:10 am

    FIVE big stars, man. Excellent article. Good karma by the truckload for you.

  10. 17

    13-year Fireworks veteran here. I rarely have time for extension research…thanks for making it easy for me! Let’s all keep up the (positive) noise about Fireworks…maybe Adobe will wake up and see the value of continuing development and support.

  11. 18

    That was a treat!!!
    Thanks for the article :)

  12. 19

    This is the AWESOME! I love the explanation of extensions as I don’t really use. I guess I will have to start now. Fireworks is a great graphical tool and I’m a proponent for it’s production and growth.

  13. 20

    Thanks for the great article Ashish!

    As a long time Fireworks user, these extensions will be very useful to my current workflow.

    @Arthur I agree that Adobe should continue the development of Fireworks as an initial Mockup and Prototype tool. There are some great features in Fireworks that I wish Photoshop had, when I’m creating Hi-Fi mockups.

    We need to have the best of both worlds. Adobe should combine all the great features of the new CS6 Fireworks into the already amazing Photoshop. Things like CSS export, better slicing, interactive prototyping etc. They are really making it difficult to choose/work between the two, because Fireworks doesn’t have enough features to be a complete solution, but Photoshop is lacking some of these really awesome web dev innovations.

    • 21

      Great point there Caleb. Totally agree if they could update Photoshop with some of the web savvy elements of the clunky Fireworks then the world would be a better place.

  14. 22

    Love it. Thanks for such a great post. More Fireworks posts please.

  15. 23

    Here is another handy extension Specctr. They have a free lite version…

    Thanks for the article

  16. 25

    Lembit Kivisik

    August 29, 2012 3:32 pm

    Thanks Ashish for a great article. As I share your respect for John Dunning, it’s heart-warming to see him getting the kudos he deserves on a publication with large audience. I had 13 of his extensions installed in my FW before reading your article, and now it’s 14 — I added the Placeholder Auto Shape thanks to your pitch :)

    For the folks reading this, I highly recommend you check out all the links to further resources Ashish has provided at the end of his piece (as most of these are also on my own FW bookmarks list, they should be golden, right..? ;) However, if you only have time / mood for 1, go with Dave Hogue’s favorite Adobe Fireworks extensions.

  17. 26

    Optimized for Web, that’s FIREWORKS
    Hope fireworks had the ability to make
    1) css grids out of those grid panels
    2) font face support
    3) templates for Smart phones and Mobile devices

    • 27

      Ashish Bogawat

      August 30, 2012 2:35 am

      For the third point, this iOS Panel extension (in the works at the moment) might come in handy.

      • 28

        Fireworks already has several Common Library options for smartphones. We are working on another project (aside from the Community Center) through which we hope to provide updates and upgrades for the Common Library contents. The iOS panel that Linus is working on will (from the beta) focused on Apple iPhone/iPad. I did not see any Android related features there. Follow Linus on Twitter to stay updated on the development progress. As for general phones, have you tried using jQuery Mobile? A wonderful feature.

        Text Rendering

        Honestly, for a quick mockup, I don’t really see this as a problem. In fact, we just place lorem-ipsum to show that it is a place holder anyways. In anycase, the text-render engine used by Fireworks is pretty darn light. Imagine they add a render engine similar to InDesign to Fireworks. Think of how heavy they would make the software. Better text-rendering for web-mockup is more a luxury feature. Yes it would be wonderful to have it, but not at the expense of a heavy software.

        Grids out of Grids

        Do you mean make John’s extension default in Fireworks? There is a pretty good grid system in Fireworks that allows you to align horizontally and vertically. Furthermore, the snap to grid makes alignment a snitch. To go even further, Linus’s Alignment Guide extension takes aligning, gridding and snapping to a whole different level.

  18. 29

    Thanks for this article, and all the others you write on Fireworks. I have been using it since version 1 and like you think it’s perfect for site design – the extensions in this article are really great and I’ve put them to use right away.

    So… we notice and appreciate your work!

  19. 30

    Aurélien Foutoyet

    August 30, 2012 4:50 am

    Thanks for sharing !
    I wanted to add the FW “Export” extension (url : to your list. It brings some interesting export options to FW like :
    – Export Pages and States
    – Export Slices as Sprite
    – Export Styles as CSS
    …and the great :
    – Export as SVG : which allows you to save your vector icons into .svg format in order to create resolution independent webfonts made of icons… (Using this tool for example :

    Cool isn’t it ?

  20. 31

    This was so unbelievably helpful you have no idea! Thanks for taking the time to put this article together. Bless Fireworks users everywhere.

  21. 32

    Great list of my extensions, I use most but haven’t seen that grid tool. Rad. Now, if only we could get Adobe to update the thing and keep it from crashing every 30 minutes.

  22. 33

    Thanks for a great article, Ashish. And thanks for increasing the downloads of those extensions by about 100X. :) Your animations also do a great job of explaining how the extensions work. I know how much time those take to make (which is why I haven’t done very many of them on my own site.)

  23. 34

    Does anyone know how to make the animated gif “videos” shown in this article? I have made many video tutorial style videos with Camtasia… but for very simple and short screen capture “video”… I really like these videos!

    UPDATE: NEVERMIND!!! I searched the page for “video”… but should have searched for “animation”… i see the explanation in the comments! Sorry for the dupe.

  24. 35


    I love fireworks! The extensions make it even better. Never used any of them! Will get it now!


  25. 36

    I never thought much about Fireworks but thanks to SmashingMagazine’s articles, I’m trying it out :) These extensions look really great, especially the “tables pannel”. Would someone happen to know if something like this exists for InDesign, too?

  26. 37

    Great article. I’ve been using Fireworks for a few years now for web/ui design and could never go back to photoshop again now. It is really that good. This article only barely touched the surface of the nice extensions available from the Fireworks community. And once you start using the extensions that fit your particular needs and workflow, Fireworks really starts to shine.

  27. 38

    This is a great article that showcase some of the best extensions we use daily in Fireworks.

    For those who like Fireworks and uses the extensions, now there is a fund raising site to support the developers for their exceptional work and send a strong message to them.

    You can do your part for Fireworks now at:


  28. 39

    Timur Prokopiev

    November 2, 2012 4:44 am

    The most critical for Fireworks is start export beautiful vector based PDF. It is very sad when you create pixel perfect vector gfx inside FW and then export it to ugly PDF.

  29. 40

    Robert S.P. Lee

    September 20, 2013 7:11 pm

    Thanks for the info. I used CS6 to build my first mockup and could have used the table extension to save on early mornings. Ugh. :-)

  30. 41

    I have been using Photoshop a lot but after reading this article i will definitely try fireworks for sure, its too Awesome.

  31. 42

    i <3 Fireworks.
    Release Adobe Fireworks to Open Source.
    search and sign the petition @


↑ Back to top