Useful Adobe Fireworks Resources: Extensions (Part 1)

Advertisement

Fireworks is an excellent UI design tool; however, Adobe decided to feature-freeze1 it back in 2013 and (at the same time) did not offer any replacement tool to its users. Nevertheless, since Fireworks runs fine today on the latest Mac OS X and Windows OS, and since it still offers a solid UI-design feature set, many designers continue to use it and rely on it daily.

For those of you who are searching for a similar tool, Sketch 3.02 seems to be a pretty good alternative to Fireworks, but it’s still not quite there yet; it’s Mac-only, and while its vector tools are very good and it now has artboards, pages, symbols and styles, it lacks a few of the basic features available in Fireworks. (I’ll talk more about possible alternatives to Fireworks in Part 2 of this series.)

So while we’re looking for alternatives, many of us also have to continue to use Fireworks3, and, as every designer out there knows, Fireworks works best with extensions! This article features some of the most useful (and free) Fireworks extensions that will help you work faster and be more effective with Fireworks; I have tested many of them myself, to be sure that they work flawlessly. In an upcoming article, I’ll be covering many articles and tutorials which I highly recommend that involve UI design and Fireworks, as well as a few freebies, such as editable Fireworks PNG files, templates, styles, Fireworks resource libraries, and so on.

To make the content of Part 1 better organized (and for easier navigation), I have grouped the extensions (commands, command panels and auto shapes) into the following main sections:

John Dunning’s Extensions

Lorem Ipsum Auto Shape

Fireworks is a very good UI prototyping tool (we’ve covered this topic in previous articles such as “Developing a Design Workflow in Adobe Fireworks10,” “Interactive Prototypes and Time-Savers With Adobe Fireworks11” and “iOS Prototyping With TAP and Adobe Fireworks12”). Without a doubt, another very important part of the prototyping process is working with text.

When working with prototypes, placeholder text is often used. There are many ways in which you can add some placeholder text to your Fireworks PNG files, but the problem starts when you need to adjust the amount of text (perhaps the layout has changed, or the font size was increased so the text is now too long). This is when the Lorem Ipsum auto shape13 (created by John Dunning555349434037333026221814) can help you.

Whenever you create a new placeholder text block, the auto shape will add just the right amount of text that will fit the shape you’ve created — no more tedious copying and pasting (or deleting) text to fit the space! Resizing the auto shape (using one of the yellow control handles) or changing the font size will also automatically adjust the amount of text, so you will always have exactly as much text as you need. This auto shape has many basic and advanced settings and could save you some serious amount of time.

Lorem Ipsum Auto Shape
The advanced options of the Lorem Ipsum auto shape. (Source15)

(Note: We have covered the use of the Lorem Ipsum auto shape in detail in “Optimizing The Design Workflow With Fireworks Extensions (Part 3),” section “Lorem Ipsum16“.)

Smart Resize Auto Shape

Working with UI prototypes… again? Smart Resize17 (by John Dunning555349434037333026221814) is a really smart auto shape that could be a real time saver during your next project! Basically, this auto shape helps you resize a group of elements without distorting any of them or disrupting your layout.

Let’s suppose you need to “smart resize” a group of objects. Select this group and use menu Commands ? Smart Resize ? Attach; the command will convert your group into a special smart object with the typical yellow resize handles. You can then use these handles to resize the group in any direction, and Smart Resize will resize only elements that extend across more than 50% of the group’s size, 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).

Smart Resize auto shape
The Smart Resize auto shape in action. (Source92918685462719)

(Note: We have covered the use of Smart Resize auto shape in “Optimizing The Design Workflow With Fireworks Extensions (Part 1),” section “Smart Resize20“.)

Multi-Border Rectangle Auto Shape

CSS allows a different width and color to be applied to the border on each side of an HTML element, but Fireworks’ vector rectangles are limited to a single border color and border width. The Multi-Border Rectangle21 auto shape (by John Dunning555349434037333026221814) addresses this limitation, making it easy to mock up CSS-style borders right on the canvas in Fireworks!

Multi-Border Rectangle auto shape
The Multi-Border Rectangle auto shapes makes it easy to mock up HTML-style borders. Here’s a quick example: select the auto-shape (1), drag the blue control point on a specific border (2), and the border’s width will be changed without affecting the other borders (3).

Of course, you are not limited to the width of the borders only — you can also change the color of each border separately. To do so, click the crosshair icon next to a border to open its color picker. You can also change the background color of the Multi-Border auto shape, by clicking on the the upper crosshair icon in the middle of the rectangle. And if you need even more control, you can change the border widths and colors numerically, by using the Multi-Border auto shape’s Properties dialog box.

Multi-Border Rectangle auto shape: controls explained.23
The Multi-Border Rectangle: control points explained. (See large preview24)

Tables Panel Extension

Tables Panel25 (by John Dunning555349434037333026221814) enables you to quickly mock up HTML-style tables without having to laboriously position each cell or border. Although it’s relatively straightforward to arrange elements in a grid using the alignment and distribution commands in Fireworks, as soon as the table contents change you’ll need to reposition everything manually. The Tables panel automates this tedious process.

Tables Panel extension for Adobe Fireworks
Using the Tables Panel, you can easily build and modify tables in Fireworks. (Source92918685462719)

The Tables Panel is pretty flexible and has many options; with it, you can even insert a table from a text file (tab-delimited or comma-separated text file — *.txt, or *.csv). You can also import a table from a web page (you’ll just need to convert it to tab-delimited or comma-separated text file — *.txt, or *.csv, before importing it).

(Note: We have covered the use of the Tables Panel extension in detail in “Optimizing The Design Workflow With Fireworks Extensions (Part 1),” section “Tables Panel28“.)

Keyboard Resize Commands

Keyboard Resize29 are a set of 16 commands (by John Dunning555349434037333026221814) which are very useful when you need to quickly “smart resize” objects.

For example, you created a button with a text label. Now when you need to increase the width of the button by a few pixels on the right, you would typically select the rectangle and either stretch it to the right using the Scale tool or change its width using the the Properties panel. Then, you will need to also select the text inside the button and repeat the same action, because selecting both and scaling them would have distorted the text and messed up the margins on the side.

With the help of one of the commands in this set, you can simply select both elements, press Alt + right arrow a few times and now your button is wider, and so is the text block; text is not distorted, and the margins between the text block and the button are intact. This is precisely what the Keyboard Resize commands by John Dunning do (and much more)!

Smart Resize (extension for Adobe Fireworks)
Smart Resize commands allow for quick and easy resizing of multiple elements, without any distortion. (Source31)

Linked Images Extension

When you import an image into a Fireworks document, Fireworks doesn’t maintain any link between the source file and the imported element — if the source file changes, you’ll need to find it, re-import it and then delete the previous image in the document. (Other Adobe products in the Creative Suite support the “smart objects” feature, which lets you import objects from one app into another, and when the source object changes, the imported one updates as well.)

The Linked Images32 extension (by John Dunning555349434037333026221814) makes this process much easier. Let’s say you are working on a website design, and the client hasn’t finalized the logo yet. Open the Linked Images panel, click the “Insert” button to select the current version of the logo (it can be in any image format, supported by Fireworks), and place it in the layout. Later, when the logo has been updated, simply select the imported image and run the “Refresh” command in the panel to reimport the latest version of the source file.

Linked Images panel (Adobe Fireworks extension)
The Linked Images panel. (Source646334)

The Linked Images panel has many options and supports all image file formats that Fireworks can currently open, including Fireworks editable PNG (*.fw.png), Photoshop PSD (*.psd), Illustrator AI (*.ai), EPS (*.eps), and all standard “flat” image formats, such as PNG8/24/32, JPEG, GIF, BMP and TIFF.

(Note: We have covered the use of the Linked Images extension in “Optimizing The Design Workflow With Fireworks Extensions (Part 2),” section “Linked Images35“.)

Fill With Background Extension

Fill With Background36 (by John Dunning555349434037333026221814) can save you quite a bit of time, when you’re working with screen mockups. Usually, when creating mockups, you may need to take a screenshot of an existing dialog box or web page and then modify it. You’ll probably also have to paint over existing elements in the screenshot (like a button label, for example, to replace it with new text). So you select a portion of the background pixels in the screenshot, copy them, paste them, stretch them over the element you want to replace, and then flatten the pixels with the original image; it’s quite a tedious process. The Fill With Background command does all of this in just one step!

Fill With Background (Adobe Fireworks extension)
Fill With Background command (example A): Select the areas of the bitmap that you’d like to fill with background pixels (1), run the Fill With Background command [menu Commands → Objects → Fill With Background] (2), and the selection will be automatically filled with a column of pixels copied from just to the left of the selected area (3).
Fill With Background (Adobe Fireworks extension)
Fill With Background command (example B): Select the areas of the bitmap that you’d like to fill with background pixels and run the Fill With Background command (1); the selection will be filled from left to right — which doesn’t work for a vertical gradient — so leave the selection and simply run the command again (2); the command will then switch to filling the selection from bottom to top (3).

There are a few different ways of using the command, and generally it works very well for background patterns that repeat either horizontally or vertically.

Create Symbol From States Command

Rich symbols are a powerful feature of Fireworks38, but creating them can be quite a complicated process. The Create Symbol From States39 command (by John Dunning555349434037333026221814) lets you create basic rich symbols containing multiple states in just one step and with no scripting required! The symbols created by this command can switch between displaying different states, controlled by a State menu in the Symbol Properties panel.

Create Symbol From States extension
An example: When a symbol instance is selected, the Symbol Properties panel will display a single State menu control; you can change this menu to choose which state of the symbol to display. (Source41)

Insert Grids Command

The Insert Grids42 command (by John Dunning555349434037333026221814) lets you set up a grid for your design in no time; simply set all the parameters — the column width, gutter width, number of columns — and the command then will create a locked layer with the columns, rows and guides spanning the height of your canvas. You can even create “Grid presets” for the layouts that you use most often and later re-use them with a single click of the mouse!

Insert Grids command44
Insert Grids example: A setup for a 12-column grid. (See large preview45) (Source92918685462719)

(Note: We have covered the use of Insert Grids command in detail in “Optimizing The Design Workflow With Fireworks Extensions (Part 1),” section “Grids47“.)

Generate Web Assets Extension

No matter how optimized your workflow is, generating assets for the development phase after finishing up your design composites is always a slow task — who likes the process of taking each individual design element and exporting it in the right image format, later to be integrated in a website, application or whatever else you are building?

The Generate Web Assets48 command (by John Dunning555349434037333026221814) can make this whole process much, much easier and simpler: once you are done with a design (or even while working on it), change the names of the objects that you want to export to the file names you want for them (including the file extensions), then run the Generate Web Assets command (menu Commands → Export → Generate Web Assets), define a folder, and presto! all of your assets will magically appear in this folder, with correct file names and in the correct formats.

Generate Web Assets (Adobe Fireworks extension)
Generate Web Assets process. (Source50)

(Note: We have covered the use of Generate Web Assets command in detail in “Optimizing The Design Workflow With Fireworks Extensions (Part 3),” section “Generate Web Assets51“.)

TweetFire Extension

TweetFire52 extension (by John Dunning555349434037333026221814) is a cool gadget for all Fireworks + Twitter fans out there. It lets you tweet the image you are currently working on in a few seconds without ever leaving the Fireworks canvas!

TweetFire (Adobe Fireworks extension)
TweetFire is very easy to set up. Install the extension and authorize it with Twitter (1), then post your first Fireworks tweet (2); once the tweet is successfully posted, TweetFire will show you a “Success!” message (3). You can even use multiple Twitter accounts.

TweetFire is very easy to use and the authorization step is done only once, when you add a new Twitter account to the TweetFire panel. After that, posting your current image you’re working on in Fireworks (be it a complex vector illustration or a UI design or simply a photo which you have retouched a bit) is only a click away. You can also decide if you’d like to post the full image or the current selection.

FlickrFire Extension

FlickrFire54 (by John Dunning555349434037333026221814) is very similar to TweetFire and (as its name suggests) lets you upload the image you are working on directly to your Flickr account without leaving Fireworks. It has many options — you can set the title of the photo, the description, the tags, if the photo should be public or private, etc. — and again, the authorization process with Flickr is only one step.

Personally, I have tried both TweetFire and FlickrFire and found them very easy and fun to use!

FlickrFire (Adobe Fireworks extension)56
Posting an image with FlickrFire. (See large preview57)

Aaron Beall’s Extensions

Export Commands

Export Commands58 (by Aaron Beall6259) is a set of commands that allows you to export pages and states to files at the same time, export slices as a single image (or each slice as a separate image), export all styles in one document as CSS styles, and export a selection (or a whole Fireworks PNG file) to SVG file format. (In my opinion, the “Export to SVG” feature is the most important one in this set.)

Export Commands
Export Commands.

(Note: We have covered Export Commands in detail — and specifically, the “Export to SVG” feature — in the article “Optimizing The Design Workflow With Fireworks Extensions (Part 3),” section “Export Commands60“.)

Path Commands

The Path61 set of commands (by Aaron Beall6259) is a very helpful set if you create a lot of vector artwork in Fireworks — which icon designers and illustrators certainly do. There are more than ten commands in this set, among them: Blend Paths, Convert Strokes to Fills, Deform to Path, Distribute To Points, Divide Paths, Exclude Paths, Fisheye Effect, and a few others.

Deform to Path — with this command, you can arc the bottom of a shape outward or inward as much as you need, or deform a shape based on a selected path:

Path commands: Deform tto Path command (Fireworks extension)
Deform to Path command. (Source646334)

Convert Stroke to Fill — this command that will be very useful if you do a lot of illustration work in Fireworks and need to treat outlines as filled objects. Convert Stroke to Fill also allows you to simulate gradients on a stroke (similar to how it is done in Illustrator)!

Path commands: Convert Stroke to Fill command (Fireworks extension)
Convert Stroke to Fill command: select an object with a stroke (left), run the command, and the stroke on the object will be converted to an object with a fill (center). You can then apply a gradient to the new object (right). (Source646334)

(Note: We have covered the use of some of the Path commands in detail in “Optimizing The Design Workflow With Fireworks Extensions (Part 2),” section “Path Commands65“.)

Matt Stow’s Extensions

Copy Color To Clipboard Commands

Fireworks CS5.1 and older versions support all types of screen color spaces66, incl. RGB/RGBA, HSL and HSV. However, when you need to quickly access and copy a specific color value, it’s easy to do so only for RGB colors in #HEX format. Copy Color To Clipboard67 (by Matt Stow7468) amends that issue and allows you to copy easily the color value of any object in #HEX or rgb()/rgba() format, with a couple of clicks of the mouse or with easily customizable shortcuts.

Copy color values to clipboard [#HEX or rgba()] is one click away in Fireworks CS6.69
In Fireworks CS6, it’s easy to copy color values to clipboard, in either #HEX or rgba() format. (See large preview70)

In case you didn’t yet upgrade to Fireworks CS6 (where the option to copy color values with one click was added to the new Color Selection box), this extension could be a nice little helper in your daily design tasks!

You can copy the color values in #HEX or rgb()/rgba() format; the color value can be copied from the color picker, or directly from the fill or stroke of any selected vector object. You can also assign shortcuts to the Copy Color commands, which will make working with them faster.

Copy Color to Clipboard extension71
Copy Color commands: You can easily copy any color in either #HEX or rgba() format (toggled via preference). (See large preview72)

CSS Professionalzr Extension

CSS Professionalzr73 (by Matt Stow7468) is a great extension that complements the CSS panel in Fireworks CS675. If you’re using the CSS panel in Fireworks, you should also get CSS Professionalzr!

CSS Professionalzr v1.1 (Fireworks extension).
CSS Professionalzr.

Other Extension Developers

Orange Commands Set

Orange Commands76 (by Ale Muñoz77) is a collection of commands for Adobe Fireworks that can make the life of a web designer easier. They are completely free and open source78, and are regularly updated. 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.

Orange Commands for Adobe Fireworks.
Orange Commands for Fireworks.

The latest version of Orange Commands is 1.7.2 and is available for Fireworks CS3, CS4, CS5/CS5.1 and CS6.

(Note: We have covered the use of Orange Commands in detail in “Optimizing The Design Workflow With Fireworks Extensions (Part 1),” section “Orange Commands79“.)

Texture Panel Extension

Currently in Fireworks, you can apply textures (which are pulled from your “Textures” folder) to any vector shape on the canvas. However, the way Fireworks works with textures isn’t very intuitive: you are presented with a simple list with all your textures, and when you mouse over a texture name, a small preview of that texture pops up next to it; but there is no easy way to get to your most commonly textures nor organizing them into groups.

Selecting and applying textures in Fireworks
Selecting and applying textures in Fireworks, using the Properties panel.

Here the Texture Panel80 extension (by Matt Curtis) comes to the rescue! This panel:

  • Sorts textures into lists (groups them),
  • Displays the textures as thumbnails (plus, you can change the size of the thumbnails),
  • Allows you to add your own textures easily and refresh the current list, and
  • Allows you to search for a specific texture, using the built-in search option!

You can get the Texture Panel from Sourceforge81 and read all the details about its use in our article (written by the author of the panel himself), “Using The Texture Panel In Adobe Fireworks82“. If you work a lot with textures in Fireworks, this panel is an absolute must-have!

Texture Panel (Adobe Fireworks extension)
Using the Texture Panel in Fireworks, you can easily organize and use your textures, and more. (Source83)

Guides Panel Extension

One extension which can help you immensely in the task of managing guides, is the Guides Panel84 (by Eugene Jude), which allows you to add guides to the canvas with precise numerical control.

Guides Panel extension
The Guides panel: “General” tab. (Source92918685462719)

The panel also gives you the ability to work with selected objects — for example, if you need to place guides through the center of a selected object or around its edges (so you can align objects to it), you can simply select the object and create the guides with the help of the panel.

Guides Panel extension - a selection example.
The Guides Panel: An example of adding guides through the center of a selected object (“Selection” tab). (Source92918685462719)

(Note: We have covered the use of the Guides Panel extension in detail in “Optimizing The Design Workflow With Fireworks Extensions (Part 1),” section “Guides87“.)

Gradient Panel & Gradient Direction Editor Extensions

Gradient Panel88 and Gradient Direction Editor89 (both created by Grant Hinkson90) are a couple of extensions that greatly enhance the control over gradients in Fireworks.

Gradient Panel extension (example)
The Gradient Panel provides fine control for manipulating gradients. (Source92918685462719)
Gradient Direction Editor panel (example)
The Gradient Direction Editor panel can edit gradients’ angles with precise numeric control. (Source92918685462719)

Touch Application Prototypes (TAP) for iOS Extension

Touch Application Prototypes (TAP)93 for Fireworks is an excellent free extension — in fact, it’s more like a full-featured iOS prototyping framework than a simple extension.

Latest iPhone and iPad models.
TAP + Fireworks allows you to build prototypes for all modern iOS devices.

While its very powerful and allows you to build great iOS prototypes for all modern iOS devices (including the latest iPhone 5/5c, iPad Retina and iPad Mini), the use of the TAP frameworks is a bit complex. Luckily for you, we have covered the use of TAP + Fireworks in the following series of articles by Shlomo Goltz from Cooper94:

  1. iOS Prototyping With TAP And Adobe Fireworks, Part 195
  2. iOS Prototyping With TAP And Adobe Fireworks, Part 296
  3. iOS Prototyping With TAP And Adobe Fireworks, Part 397

This series covers everything you need to know about TAP and Fireworks: from starting to build your wireframes, then moving to the fully-developed design, and then how we can convert the design to a working iOS prototype. There are many solutions out there that help you create an iOS (or Android/Windows 8 Mobile) prototypes, but this is the only one which will allow you to do everything from A to Z inside one application — Fireworks!

TAP + Fireworks example (screenshot)98
TAP and Fireworks: working with hotspots and hotspot properties. (See large preview99) (Source100)
A TAP + Fireworks on an iPad.
A TAP + Fireworks demo being tested on an iPad. (Source101)

Tapotype Library

While we’re still at the subject of making iOS prototypes with TAP and Fireworks, I should probably also mention Tapotype102. Tapotype (currently at version 1.01) is a free reference library of transitions which was created specifically for the TAP + Fireworks prototyping workflow. It can help you in the task of making iOS prototypes with the TAP extension and is available for free download103 and use.

Tapotype library
Tapotype is free reference library of transitions for TAP + Fireworks.
TAP Tapotype example
Cubeleft/Cuberight transition example from the Tapotype 1.01 library. (Source104)

Fireworks Annotations Panel Extension

Fireworks Annotations Panel105 extension (by Mariano Ferrario106) will help you increase the efficiency of quickly annotating wireframes and designs, all inside the Fireworks document you’re working on. The panel allows you to add numeric bubbles to your document and associate a corresponding message with each annotation. In addition, you can export your annotated document in multiple file formats: images, HTML, Adobe PDF, TXT, CSV, or XML.

Annotations Panel (Adobe Fireworks extension)
The Annotations Panel extension.

The current version of the Annotations Panel supports Fireworks CS4, CS5/5.1 and CS6. (Please also note that unlike all of the extensions reviewed here, it’s not free but costs only $5.99.)

Specctr for Fireworks Extension

The Specctr plugin for Adobe Fireworks107 can help both designers and developers during the process of producing specs. Specctr is not free (I think it currently costs $49.00) but there is a completely free Lite Version of it available, too.

Specctr panel (Adobe Fireworks extension)
The Specctr extension for Adobe Fireworks. (Source108)

Open In Fireworks Firefox Add-on

Open In Fireworks109 is a nice little add-on for all Mozilla Firefox110 and Adobe Fireworks users out there. As its name suggests, it allows you to simply right-click on any image inside a web page, choose Open In Fireworks option from context menu and the selected image will then instantly open in Fireworks. “Open In Fireworks” is simple and yet it can save you a few extra minutes every day. Personally, I find it quite useful.

Open In Fireworks, a Mozilla Firefox add-on111
Open in Fireworks, a simple Firefox add-on.

Project Phoenix For Adobe Fireworks

Project Phoenix

And last, but not least, I should mention Project Phoenix115112, which is a personal project by Linus Lim113. Linus gathered there many extensions that he’s trying to “re-boot” (update) and the list if growing every week! So far, there were released: Font List panel, Super Nudge panel, Auto Save panel, Transform panel, Alignment Guides panel, Perspective Mockups panel, Retina Scaler panel, Used Fonts panel, and many more!

Keep an eye on Project Phoenix because now that Adobe is not planning to add new features to Fireworks, having new features added to this app with the help of commands and panels is even more important.

Project Phoenix (free extensions for Fireworks, all updated)114
Project Phoenix115112 website.

Project Phoenix is a must-visit place for extensions, if you rely on Fireworks every day!

Conclusion

This was an attempt to provide an overview and list some of the best extensions for Fireworks. (Did I miss any indispensable ones? Let me know in the comments!)

In my next article, I will include some of the best tutorials and articles, but also many freebies (styles, templates, resource libraries, etc.) available for Fireworks. All of these can teach you how to save time and use Fireworks for UI design in a more optimal way. Stay tuned!

(mb, il)

Footnotes

  1. 1 http://blogs.adobe.com/fireworks/2013/05/the-future-of-adobe-fireworks.html
  2. 2 http://medium.com/amazing-article/what-is-new-in-sketch-3-4b92d8b25f3
  3. 3 http://www.smashingmagazine.com/2013/12/19/present-future-adobe-fireworks/
  4. 4 #ext-johndunning
  5. 5 #ext-aaronbeall
  6. 6 #ext-mattstow
  7. 7 #ext-various
  8. 8 #ext-phoenix
  9. 9 #conclusion
  10. 10 http://www.smashingmagazine.com/2012/06/11/developing-a-design-workflow-in-adobe-fireworks/
  11. 11 http://www.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
  12. 12 http://www.smashingmagazine.com/2013/01/11/ios-prototyping-adobe-fireworks-tap-part1/
  13. 13 http://johndunning.com/fireworks/about/LoremIpsum
  14. 14 http://twitter.com/fwextensions
  15. 15 http://www.smashingmagazine.com/2013/11/06/even-more-fireworks-extensions-optimized-design-workflow/
  16. 16 http://www.smashingmagazine.com/2013/11/06/even-more-fireworks-extensions-optimized-design-workflow/#loremipsum
  17. 17 http://johndunning.com/fireworks/about/SmartResize
  18. 18 http://twitter.com/fwextensions
  19. 19 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/
  20. 20 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/#smartresize
  21. 21 http://johndunning.com/fireworks/about/MultiBorderRect
  22. 22 http://twitter.com/fwextensions
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/07/multi-border-rectangle-controls-explained-large-opt.png
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/07/multi-border-rectangle-controls-explained-large-opt.png
  25. 25 http://johndunning.com/fireworks/about/Tables
  26. 26 http://twitter.com/fwextensions
  27. 27 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/
  28. 28 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/#tables
  29. 29 http://johndunning.com/fireworks/about/KeyboardResize
  30. 30 http://twitter.com/fwextensions
  31. 31 http://www.smashingmagazine.com/2013/11/06/even-more-fireworks-extensions-optimized-design-workflow/#keyboardresize
  32. 32 http://johndunning.com/fireworks/about/LinkedImages
  33. 33 http://twitter.com/fwextensions
  34. 34 http://www.smashingmagazine.com/2013/09/20/optimizing-the-design-workflow-with-extensions/
  35. 35 http://www.smashingmagazine.com/2013/09/20/optimizing-the-design-workflow-with-extensions/#linkedimages
  36. 36 http://johndunning.com/fireworks/about/FillWithBackground
  37. 37 http://twitter.com/fwextensions
  38. 38 http://www.adobe.com/devnet/fireworks/articles/enhancing_rich_symbols.html
  39. 39 http://johndunning.com/fireworks/about/StateSymbol
  40. 40 http://twitter.com/fwextensions
  41. 41 http://johndunning.com/fireworks/about/StateSymbol
  42. 42 http://johndunning.com/fireworks/about/Grids
  43. 43 http://twitter.com/fwextensions
  44. 44 http://www.smashingmagazine.com/wp-content/uploads/2014/07/grids-command-large-opt.png
  45. 45 http://www.smashingmagazine.com/wp-content/uploads/2014/07/grids-command-large-opt.png
  46. 46 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/
  47. 47 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/#grids
  48. 48 http://johndunning.com/fireworks/about/GenerateWebAssets
  49. 49 http://twitter.com/fwextensions
  50. 50 http://johndunning.com/fireworks/about/GenerateWebAssets
  51. 51 http://www.smashingmagazine.com/2013/11/06/even-more-fireworks-extensions-optimized-design-workflow/#generatewebassets
  52. 52 http://johndunning.com/fireworks/about/TweetFire
  53. 53 http://twitter.com/fwextensions
  54. 54 http://johndunning.com/fireworks/about/FlickrFire
  55. 55 http://twitter.com/fwextensions
  56. 56 http://www.smashingmagazine.com/wp-content/uploads/2014/07/flickrfire-large-opt.jpg
  57. 57 http://www.smashingmagazine.com/wp-content/uploads/2014/07/flickrfire-large-opt.jpg
  58. 58 http://fireworks.abeall.com/extensions/commands/Export/
  59. 59 http://twitter.com/AaronBeall
  60. 60 http://www.smashingmagazine.com/2013/11/06/even-more-fireworks-extensions-optimized-design-workflow/#exportcommands
  61. 61 http://fireworks.abeall.com/extensions/commands/Paths/
  62. 62 http://twitter.com/AaronBeall
  63. 63 http://www.smashingmagazine.com/2013/09/20/optimizing-the-design-workflow-with-extensions/
  64. 64 http://www.smashingmagazine.com/2013/09/20/optimizing-the-design-workflow-with-extensions/
  65. 65 http://www.smashingmagazine.com/2013/09/20/optimizing-the-design-workflow-with-extensions/#pathcommands
  66. 66 http://en.wikipedia.org/wiki/List_of_color_spaces_and_their_uses
  67. 67 http://mattstow.com/#ccc15
  68. 68 http://twitter.com/stowball
  69. 69 http://www.smashingmagazine.com/wp-content/uploads/2013/01/copy-hex-rgba-dialog-large-opt.png
  70. 70 http://www.smashingmagazine.com/wp-content/uploads/2013/01/copy-hex-rgba-dialog-large-opt.png
  71. 71 http://www.smashingmagazine.com/wp-content/uploads/2013/01/copy-color-commands-large-opt.png
  72. 72 http://www.smashingmagazine.com/wp-content/uploads/2013/01/copy-color-commands-large-opt.png
  73. 73 http://mattstow.com/css-professionalzr.html
  74. 74 http://twitter.com/stowball
  75. 75 http://helpx.adobe.com/fireworks/learn/tutorials/how-to/extract-css-properties.html
  76. 76 http://orangecommands.com/
  77. 77 http://twitter.com/bomberstudios
  78. 78 http://github.com/bomberstudios/fireworks
  79. 79 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/#orangecommands
  80. 80 http://sourceforge.net/projects/texturepanel/
  81. 81 http://sourceforge.net/projects/texturepanel/
  82. 82 http://www.smashingmagazine.com/2012/11/14/texture-panel-adobe-fireworks/
  83. 83 http://www.smashingmagazine.com/2012/11/14/texture-panel-adobe-fireworks/
  84. 84 http://www.adobe.com/devnet/fireworks/articles/guides_panel.html
  85. 85 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/
  86. 86 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/
  87. 87 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/#guides
  88. 88 http://www.granthinkson.com/2007/01/23/fireworks-gradient-panel/
  89. 89 http://www.granthinkson.com/2008/05/15/new-fireworks-panel-gradient-direction-editor/
  90. 90 http://www.granthinkson.com/
  91. 91 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/
  92. 92 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/
  93. 93 http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/
  94. 94 http://www.cooper.com/
  95. 95 http://www.smashingmagazine.com/2013/01/11/ios-prototyping-with-tap-and-adobe-fireworks-part-1/
  96. 96 http://www.smashingmagazine.com/2013/01/25/ios-prototyping-with-tap-and-adobe-fireworks-part-2/
  97. 97 http://www.smashingmagazine.com/2013/02/15/ios-prototyping-adobe-fireworks-tap-part3/
  98. 98 http://www.smashingmagazine.com/wp-content/uploads/2014/07/tap-fireworks-prototype-screen-large-opt.png
  99. 99 http://www.smashingmagazine.com/wp-content/uploads/2014/07/tap-fireworks-prototype-screen-large-opt.png
  100. 100 http://www.smashingmagazine.com/2013/01/25/ios-prototyping-with-tap-and-adobe-fireworks-part-2/
  101. 101 http://www.smashingmagazine.com/2013/01/11/ios-prototyping-with-tap-and-adobe-fireworks-part-1/
  102. 102 http://tapotype.com/
  103. 103 http://tapotype.com/download-tapotype/
  104. 104 http://tapotype.com/
  105. 105 http://www.3revolutions.com/public/fw_annotations.php
  106. 106 http://www.3revolutions.com/public/bio.php
  107. 107 http://www.smashingmagazine.com/2012/05/25/blueprints-for-the-web-specctr-adobe-fireworks-plugin/
  108. 108 http://www.smashingmagazine.com/2012/05/25/blueprints-for-the-web-specctr-adobe-fireworks-plugin/
  109. 109 https://addons.mozilla.org/en-US/firefox/addon/open-in-fireworks/
  110. 110 https://www.mozilla.org/en-US/firefox/new/
  111. 111 http://addons.mozilla.org/en-US/firefox/addon/open-in-fireworks/
  112. 112 http://projectphoenix.io/
  113. 113 http://twitter.com/chunwui
  114. 114 http://projectphoenix.io/
  115. 115 http://projectphoenix.io/

↑ Back to topShare on Twitter

Michel is a freelance web designer, illustrator and photographer. He also happens to work as editor at Smashing Magazine and is very passionate about Fireworks, HTML/CSS, Web Standards and the smell of good coffee. When not designing websites or editing articles, he can often be found reading about design, riding his bicycle or simply looking at the clouds in the sky. Want to know more? You can check his personal blog or Twitter. :)

Advertising
  1. 1

    Awesome resource list!

    5
  2. 3

    Bookmarked, a great list with some really cool features too, too bad Adobe is ending fireworks development.

    5
    • 4

      Yeah, too bad Fireworks won’t be actively developed anymore…

      The good news is that there will be more and more UI design tools developed by other companies and teams! Adobe really needs some serious competition in this field — they are so stuck with Photoshop that to believe they can make a new tool, targeted specifically for UI designers, is nonsense. :-)

      5
      • 5

        Hope some folks are reaching out to the Inkscape community, or even better, creating a fork of it and developing it into a different kind of Fireworks replacement.

        Back in the days of my complete switch to Unixoid OSes (including BSD and the likes), this turned out to be a very good Fireworks alternative. Sadly, the very best part, ie. the full use of the PNG format, has found no real replacement – yet. In my case it usually boils down to semi-automated command line usage using pngquant, ImageMagick and the likes.

        cu, w0lf.

        2
    • 6

      I am still mourning the discontinuation of Fireworks development by Adobe. I am not sure I will recover. The other day I was going over Axure and all I kept thinking about were the similarities with Fireworks.

      1
  3. 7

    Hi Guys,

    I read about Firework excellent UI design tool in your article really very useful content you wriiten.

    3
  4. 8

    Joe Wojciechowski

    July 19, 2014 1:44 pm

    I was never an Adobe Fireworks user. For some reason I thought it easier to slice images I needed in Photoshop and do all the HTML CSS ‘coding’ by hand. I don’t know why… now that I am older I am thinking I missed out on using this tool.

    1
  5. 10

    Thank you for the article.
    I’ve been an avid user since Macromedia Fireworks 4.
    In my 12 years of web design, I’ve yet to find anything as easy and fast for web graphics creation.
    Now that SVG and vector graphics are in wide use on the web, Fireworks is even more relevant today.

    Thanks again for the great article and showing Fireworks some love.

    2
    • 11

      Yes, and what’s more, Fireworks supports SVG file format (for both import and export). :-)

      Regarding “easy and fast” creation of screen graphics, as long as you work mostly with graphics in vector format, you could also try Sketch which seems to be a very good UI design tool, too.

      1
      • 12

        I’ve tried Sketch but it’s not there yet. Fireworks vector shape tools are amazing and I have yet to seem duplicated as well somewhere else.
        For me, Fireworks is still the best choice. Thank you for your reply.

        1
        • 13

          I know that Sketch is not quite there yet, but it’s close —- much closer than Photoshop or Illustrator. :-)

          Btw, in part 2 of “Useful Adobe Fireworks Extensions” (which should be published soon), I’ll talk in more detail about possible Fireworks alternatives, so stay tuned!

          1
  6. 14

    Hi ,

    This is article love the ideas shared here. The list really huge and it will cover almost everything for any niche. keep it up work . Thanks for the such a lovely post!

    0
  7. 15

    Thanks a lot, Michel. It’s a pity that Adobe abandoned Fireworks. For me it’s still the best software for UI design on Mac OS 16.8 (since Sketch 3.0 needs 16.7…).

    Really useful article.

    All the best!

    2
  8. 16

    Thanks for writing about my most used tool to date. I appreciate those that can still see the value of a well made product amongst the hype of the New Kids on The Block. Spent some time downloading some of these I haven’t had yet. Thanks!

    1
  9. 17

    Thanks for writing about my most used tool to date

    1
  10. 18

    Project phoenix looks amazing. If I hadn’t have made the switch to sketch a few weeks ago, i’d be over the moon.

    The thing I love about sketch is how it handles artboards. You can have 20 artboards beside each other and it doesn’t lag. Fireworks can’t do this sort of thing. I’d say it’s due to it treating everything as raster.

    Being able to keep an eye on all your work goes a long way to getting a consistent look throughout your app/site.

    Great work nonetheless. Thanks for the article.

    1
  11. 19

    Thank you for the article.

    1
  12. 20

    Thanks for that great article : there is a petition to Open source Fireworks:
    Sign it ! We never know !
    Please join this campaign: http://www.change.org/en-GB/petitions/adobe-com-release-adobe-fireworks-to-open-source?recruiter=127536955&utm_campaign=mailto_link&utm_medium=email&utm_source=share_petition

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top