10 Best Firefox Addons for Designers

Resources April 7, 2008

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

Follow us on Facebook, Twitter, Google+, and Pinterest to keep yourself updated with the hottest art inspiration, graphic design tips, and resources. Lastly, our RSS feed is open for subscriptions!
Share This Post
 

Cadence is You The Designer's senior blogger, and the most jack-of-all-trades of the staff. She's always trying out something different every day, some of which fuels her posts here on the blog. Let her know if you want us to post more about your favorite topic - she might know more than a thing or two about it!

Powered by Shutterstock
  • http://ubuntulinuxtipstricks.blogspot.com Mackenzie

    Now if only Firebug worked on FF3

  • Andrew

    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.

  • http://www.oastler.ca JamieO

    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

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

  • Brandon

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

  • http://www.metalsoftware.com/ IDX

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

  • http://www.howtoforward Michael

    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.

    ml

  • http://me.dium.com/getmedium/2957d01e1e7 Peter

    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

  • http://www.groovytype.com fattygrub

    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.

  • http://www.smashingapps.com Sarah

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

  • http://www.piikkilanka.com Teppo

    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.

  • http://www.gomedialtd.com Go Media

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

  • http://www.katize.com kat

    Nice! Will have to try some of these out.

  • http://www.r1designs.net mdrisser

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

  • http://eleganckakobieta.pl Elegancka Kobieta

    Nice site!

  • http://www.philfreelance-web.com philfreelanceweb

    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

  • http://www.petnos.com petnos

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

  • http://webdirectory101.freehostia.com/ MoJo

    thanks for the news

  • http://notaniche.com Not A Niche

    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.

  • http://www.crabbyattitude.com Toni

    I’ve previously tried only a couple of add-ons. Thanks for this article. I’m interested in trying a couple of your suggestions.

  • http://www.alfredfox.com Website Design

    I’m a huge fan of Firebug and the Web Dev Tool bar. Great stuff for troubleshooting and refinement.

  • http://www.ree-she.com Rishi Luchun

    Nice list, few new ones I haven’t tried before, Thanks

  • http://umibozu.net marc

    I would suggest also:

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

    Enables multisearch via google, yahoo and msn

  • http://www.facefinance.com Avery

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