Typically, to create a symbol from an object in Adobe Fireworks, you would select the object, and choose Symbol…/Convert to Symbol from the Modify menu. Or you could right click on the object and choose the Convert to Symbol action from the contextual menu. Following this process, you would be presented with a dialogue like this one:
From here, you can name your symbol, specify the type, and select options like 9-slice scaling and saving it to your Common Library. I did it this way for a while, but I noticed that more often than not I wanted to modify the components that I was saving as symbols. Unless I wanted to changed all of the instances of a given symbol in my file, I had to break apart the symbol, and then ungroup it before I could really get it to bend to my will. So I figured out a simple way of creating what I call “pseudo-symbols.”
I realized that the graphic symbols I was saving to the Common Library were being appended with .graphic.png. So, if I named a symbol something like “scrollbar” in the dialogue, Fireworks saved it as “scrollbar.graphic.png” when it turned it into a symbol. I discovered that any png file with that naming structure, including Fireworks PNGs, showed up in my Common Library.
My method of pseudo-symbol creation is to have a master file where I keep all of the source files together. For example, I’m currently working on the visuals and interaction design for an iPad app, and I use lots of common iOS components in my designs. In my master file for my iOS component library, each item is on its own page, and the pages are named accordingly:
- popover.graphic
- searchBar.graphic
- toolbarButton.graphic
- etc., etc., etc.
From there, Fireworks makes it super easy to export these pages using the Export option of Pages to Files.
Then, choosing to save those Pages as Fireworks PNGs allows you to create the pseudo-symbols that you can edit and modify when each item is pulled from your Common Library into your current Fireworks file. But to get them to show up in your Common Library, you need to save them to your Fireworks user folder:
Mac: /Users/<UserName>/Library/Application Support/Adobe/Fireworks CS 5.1/Common Library
Windows: C: \Users\<UserName>\AppData\Roaming\adobe\Fireworks CS5.1\Common Library
For the type of work I do, this is a great way to take advantage of symbols without the extra steps of breaking them apart and ungrouping them, even if it isn’t the normal way of working with symbols.
Here’s a little sample of the type of symbols that are created with this method, using the three iOS items mentioned above:
Download Sample iOS Fireworks Pseudo-Symbols