How To Optimize The Design Workflow With Fireworks Extensions
Email Newsletter
Weekly tips on front-end & UX.
Trusted by 200,000+ folks.
Sponsor OWD on GitHub
Start with a free demo —
Take a break with a 3D game built on Netlify!
Build skills. Boost ROI.
Check the frontend report!
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:
- Grids Panel
- Guides Panel
- Smart Resize Auto Shape
- Tables Auto Shape
- Placeholder Auto Shape
- Orange Commands
- QuickFire
Working With Extensions In Fireworks
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
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?
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
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
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 Edit → Keyboard 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
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”.
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 Panel
John Dunning is a legend in the Fireworks community, and his growing list of powerful extensions often compete with themselves for the top spots as valuable and useful. His grids extension 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.
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 GuideGuide panel might be something worth giving a try.
2. Guides Panel
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 panel 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.
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.
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 Shape
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 Resize comes into play.
Once you’ve selected a group that you need to resize, use menu Commands → Smart Resize → Attach, and the command will convert your group into a special smart object with the typical yellow resize handles.
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.
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.
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 Panel
If there is one extension in this list that I would award as the “Most Underrated”, it would have to be the Tables Panel 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!
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.
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.
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 Shape
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 Placeholder 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.
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.
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 Command
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 QuickFire 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 Quicksilver on Mac OS and Launchy or Colibri 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.
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:
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 website.
Conclusion
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
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 Interviews”
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 Lang, Nick Myers, Benjamin De Cock, Jonathan Snook 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 Police”
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 project 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 Extensions”
A long list of Fireworks extensions, prepared by UX designer Dave Hogue. - “John Dunning’s extensions”
John Dunning’s extensions for Fireworks. Make sure to check all of them out! - “Aaron Beall’s extensions”
Aaron Beall (who is an experienced user and developer for both Fireworks and Flash) has some pretty useful extensions, too. - “Matt Stow’s extensions”
Matt Stow has a few extensions that will help any professional Web designer and developer. - “Fireworks extensions | Adobe Exchange”
List of all Fireworks extensions published on the Adobe Exchange website.
Further Reading
- Switching From Adobe Fireworks To Sketch: Ten Tips And Tricks
- Sketch, Illustrator or Fireworks? Exploring A New Free UI Design App: Gravit
- Sketch With Material Design
- Using Sketch For Responsive Web Design (A Case Study)
(mb, jvb, mrn)
