Resources - Written by Gino on Monday, April 7, 2008 1:14 - 19 Comments

10 Best Firefox Addons for Designers

These 10 essential Firefox addons will make your life as a graphic and web designer much easier! The Firefox addons are extremely easy to install and you will be notified when new versions of the addons are available. I have hand picked all of these add ons and without further ado here are the 12 best Firefox addons for graphic designers!

ColorZilla 1.0

ColorZilla is an advanced eyedropper, color picker and measuring tool.

Download ColorZilla

Window Resizer

The Window Resizer addon allows you to resize your browser to common resolution sizes allowing you to view website designs in a variety of popular browsing dimensions.

Download Window Resizer

Web Developer

The Firefox Web Developer addons is one of the most popular addons for web designers. It has a variety off essential tools that allow you to code quality websites and troubleshoot problems easily.

Download Web Developer

Palette Grabber

Palette Grabber is a nifty little addon that creates a color palette for Photoshop, Paint Shop Pro, GIMP, Flash, Fireworks, or OS X based on the current page you are viewing in your browser.

Download Grabber

GridFox

GridFox is a great Firefox extension that allows you to overlay a customizable grid on any website allowing you to make sure the grid you designer in your layout translate correctly to the web.

Download GridFox

FireShot

FireShot is a cool extension that allows you to take screenshots of your web pages and also has a set of built in annotation tools that allow you to add graphics and notes.

Download FireShot

FoxyTunes

FoxyTunes is a kick butt addon for anyone who listens to music while they design. It allows you to control almost any media player from your browser. You can also find lyrics, covers and so on.

Download FoxyTunes

MeasureIt

MeasureIt allows you to overlay a ruler on a browser page so you can verify width, height and alignment of page elements.

Download MeasureIt

IE Tab

IE Tab is a useful tool for designers who need to check to see if their website looks good in Internet Explorer. A simple click will switch you back to Firefox.

Download IE Tab

FireFTP

FireFTP is a free, secure, browser based FTP client that allows you to easily access your server via Firefox instead of having to launch a separate program.

Download FireFTP

Useful Firefox Tips

Five Firefox Tips You May Not Know About

15 Coolest Firefox Tricks Ever

15 Must-Have Firefox tricks

Share and Enjoy this Post

These icons link to social bookmarking sites where readers can share and discover new web pages.

19 Comments

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Mackenzie
Apr 7, 2008 2:54

Now if only Firebug worked on FF3

Andrew
Apr 7, 2008 3:03

As a note, IE Tab will not work in OSX. You will still need parallels or bootcamp to test in IE (ugh…).

Also I’m shocked firebug isn’t on the list. https://addons.mozilla.org/en-US/firefox/addon/1843 This would be my number one. There’s nothing more valuable when looking for a specific CSS bug in your site, or getting a quick idea of how a site you didn’t design (but still have to change) is set up. You can also proof changes live and in-browser.

Another useful object, although not a firefox add-on, for those with OSX is PhotoDrop. http://www.dropping.at/ it will allow you to make quick screenshots (with measurements) and copy them right to the clipboard.

JamieO
Apr 7, 2008 8:02

How can a 10 best list NOT have Firebug on it? It provides targeted inspection of particular elements on any page, live alterations of css / xhtml, a better console / debug for javascript and basic bandwidth profiling. At a minimum it could replace measureIt on your list, but it is so much more. I am always finding new features it has.

MediaMisfit
Apr 7, 2008 9:45

Great post! I didn’t even know these where available. I love FireFox!

Brandon
Apr 7, 2008 12:08

Thanks for this list! IE Tab looks great but not available for Mac OSX! Crap….

IDX
Apr 7, 2008 16:06

Yes, FireBug is definitely a must-have also, although I guess that crosses into web-developer more than just web designer. Great list.

Michael
Apr 8, 2008 10:06

Thanks for the list.

Like others, I already have initiated the use of many of these add-ons.

And like a few others, was as disappointed to find out about a couple that aren’t available for mac-prime-time.

However, there was one, that although not available for the mac, has an equal that IS available for the mac.

https://addons.mozilla.org/en-US/firefox/addon/1146

If you’re on a mac, and want the benefits of FireShot, give a look at ScreenGrab. This nifty add on will allow for both ‘what is visible’, ‘complete page/frame’, and last but certainly not least, a user-selectable option. In conjunction with all three options above, it can do so either as a save-to, or copy-to-clipboard manner.

Hope this helps some of my mac siblings on this blog.
Michael

P.S. Fellow mac-ians, if you’ve not seen it, you must also check-out this new beta-ware: Skitch It’s not a firefox add-on, but a very sweet screen capture utility.

Peter
Apr 8, 2008 12:50

Great list, got a couple that I’ll need to make room for now, thanks! The Me.dium Crowd Surfer, a social browsing add-on, is also a great tool for developers. With Me.dium you can check out who is on your site and chat with them in real-time. An easy way to get instant feedback or gauge your sites popularity. We also recently announced compatibility for FF3 as well. We’d love for you to check it out and give us your thoughts.

http://www.me.dium.com/promo/firefox/

me.dium username: pjn

fattygrub
Apr 9, 2008 18:44

great selections gino. here i am running normally with three machines all with firefox browsers and still I forget to go there first when looking for tools. the palette making tool is great.

Sarah
Apr 10, 2008 6:44

List is amazing. You did a great job to make this great list. Thanks for sharing.

Teppo
Apr 10, 2008 6:46

I must agree with those missing firebug. Possibly THE most important plugin for ‘fox.

@IDX: Firebug is unbelievably handy when testing and fine-tuning layouts, so I wouldn’t really categorize it as a “web developer tool”.. more like “something for everyone”, which is not a proper reason to skip it
On the other hand, Window Resizer, GridFox and MeasureIt seem kind of unnecessary, since Web Developer already has tools for resizing windows (and adding custom sizes), displaying custom grids and measuring things.

Go Media
Apr 10, 2008 10:09

Had some of these already but some nice new ones to use there.

kat
Apr 16, 2008 5:04

Nice! Will have to try some of these out.

mdrisser
Apr 16, 2008 15:36

I agree 100%, Firebug is definately the #1 plugin. Drop Measure It!, Web Developer has a ruler, and put Firebug in there.

Elegancka Kobieta
Apr 27, 2008 4:45

Nice site!

philfreelanceweb
Apr 29, 2008 9:53

I used most of the web tools, they very much useful install most of them on my browser now.. very useful for my web design projects

petnos
Apr 29, 2008 11:33

good list. know some but now i will use all i think.

MoJo
May 4, 2008 14:11

thanks for the news

Not A Niche
Jun 20, 2008 8:39

Great Post Gino,

I use most of them and some more, although you can skip MeasureIt, GridFox and Windows Resizer since these functions are already included in Web Developer. Just click on your Web Developer Toolbar on ‘Miscellaneous’ and select ‘Display Line Guides’ or ‘Display Ruler’ and you have the functionality of MeasureIt and GridFox.

If you select in your Web Developer Toolbar ‘Resize’ you can easily resize the window and also add different dimensions if you want.

Web Developer is a great tool with lot’s of hidden functionalities.