6 Super-Useful Chrome Extensions for Designers

Tweet

If you are a Chrome user, you probably love it for it’s speed and simplicity. However, no matter how much you like simplicity, sooner or later you’ll need will add some extra functionality you desperately need.

In such cases, it’s extensions to the rescue.

If you were a Firefox user before you switched to Chrome (or perhaps you time-share between browsers), you probably already know that most of the Firefox add-ons you love are available for Chrome as well.

Today we’re going to look at some of the most useful Chrome extensions for designers. I am not writing about the Web Developer and Firebug add-ons that are emblematic for Firefox as they’ve been well covered elsewhere.

I’m also going to avoid the add-ons I reviewed in the 6 Great Firefox Extensions for Designers article, too. Not all of them are available for Chrome, but the ones that do include are: ColorZilla, YSlow, Open With (only Firefox and no Mac OS version).

You might want to try them as well.

1. Overlay/Wireframe Extensions

One of the Firefox extensions I wrote about in the other article was Pixel Perfect. It’s great for overlays but unfortunately, it’s not available for Chrome, as it relies on Firebug.

Instead, some good ones that do a similar job are Bootstrap Overlay or PerfectPixel by WellDoneCode. If you are dealing with wireframes, you might also want to try Instant Wireframe.

Bootstrap Overlay

01 - Bootstrap Overlay

Bootstrap Overlay running on the Bootstrap site.

Bootstrap Overlay only works for sites built on the Bootstrap framework and currently it isn’t fully mobile-friendly, but still it’s an option for the many Bootstrap developers out there.

In order to detect grids, the site obviously needs to be using the default Bootstrap container and span classes.

PerfectPixel

PerfectPixel

PerfectPixel

PerfectPixel is another overlay extension to try. It works with layers, so you can have multiple overlays on the same page.

It’s easy to use. Simply load any JPG or PNG site mock-up into PixelPerfect, manually position over your working code, lock it in position, and reduce it’s opacity down to perhaps 20%.

As you work on your HTML — perhaps with LiveReload refreshing your page — you can constantly compare your rendered HTML and CSS to the original design work.

Instant WireFrame

Chrome extension: Instant WireFrame

Instant WireFrame

Instant WireFrame is for (surprise, surprise) wireframe overlays only. Install it and enable it and you will see the skeleton of any site.

With some sites the wireframe isn’t very clear, but this is a problem with the design/coding of the site, not the extension.

2. Stylebot

Stylebot is an extension for working with CSS styles. It allows you to pick an element and change its font, color, margins, etc. manually in the Web browser.

Chrome Extension: Stylebot

Chrome Extension: Stylebot

You can save your styles for later use, or you can install from stylebot.me styles other users of the extension have created and shared.

Although Stylebot is generally used as a GreaseMonkey equivalent, it can actually be used as a quick and dirty method to prototype changes and functionality.

It’s fast and can gives you a functional demo in under 30 minutes. You can even demonstrate working code to a client without touching your codebase.

It may not be right for every situation, but keep it in mind.

3. CSS3 Generator

CSS3 Generator is one more Chrome extension for handling Cascading Style Sheets. It’s an in-browser CSS editor and you can use it to generate:

CSS3 Generator

  • Border Radius
  • Gradient Colors
  • Box Shadow
  • Text Effects
  • Text Columns
  • CSS Transitions
  • RGBA
  • Text Shadow
  • Outline

You see that some significant CSS properties are missing from the list, so it’s not an editor to handle all your CSS needs but still it does quite a lot.

4. Link Checkers

Check My Links

Check My Links is pretty straightforward and very useful. Install it, run it, and in seconds you will have a report of all the links on a page and their status (OK or broken).

Chrome Extension: Check My Links

Of course, you can use other tools to check links sitewise but if you are interested in the links on a particular page only, this extension is much handier. The extension is fast, even on pages with hundreds of links and unlike comprehensive tools that check your whole site, you have to wait just a few seconds, not half an hour to get results.

Screen Measurement Tools

5. Ruul. Screen ruler

Extension: Ruul lets you measure your screen

Ruul: One extension to ruul them all?

This is another simple but great Chrome extension. As the name itself implies, ruul. Screen ruler measures distances on screen.

It’s the Chrome equivalent of the famous MeasureIt Firefox addon but it comes with many more options (not all of which you might need, though).

the developers features list includes:

  • horizontal and vertical draggable rulers
  • pixel and picas measurements
  • drop down overlay
  • type measurements
  • line height guides
  • stroke widths
  • move ruul with arrow keys, one pixel at a time
  • use multiple ruul together
  • 4 different coloured ruul included
  • steel and wooden ruul included
  • turn on and off with position memory
  • long rule included
  • works on local files*

Warning: This extension is highly addictive. Once you get used to it, you will be measuring absolutely everything that can be measured on screen.

I’m joking here but really this extension is something you will soon not be able to live without and yes, it really does a great job.

6. Font Extensions

Font Playground

Google’s Font Playground allows you to test webfont before coding them.

Firefox has many font add-ons for designers. Chrome doesn’t offer quite as many, but still there are some really nice ones, such as the Font Playground and Font Inspector extensions, or the Web Fonts enhanced by TypeDNA application.

Font Playground

If you frequently work with Google Web fonts, then Font Playground is a must.

Font Playground allows to choose a font, add various effects to it (if you want to), preview the results and get the code.

The list of fonts is current because it’s updated every day.

TypeDNA

TypeDNA

TypeDNA previews Google web fonts.

TypeDNA is a Chrome application that also allows previewing Google Web fonts from a list.

Double-click the font and the application auto-generates code you can copy and use in your projects.

Font Inspector.

The third extension for work with Fonts is Font Inspector. It’s really simple – install it, click it and move the mouse over the parts of the page you want to examine.

The font name, line-height and size for this page element will be displayed in a tooltip format. Nice.

FontInspector

FontInspector: A property inspector for page fonts.

However, from personal experience, there are lots of pages where Font Inspector doesn’t work.

This is likely for code structure reasons, rather than the extension itself but anyway, this means you can’t use it everywhere.

Another extension that I particularly like is Image Properties Context Menu. This shows lots of important image data at a glance.

You might also like to check out Web Developer Checklist. This is not exactly for designers but still it is very useful for everybody who works on Web sites.

As you might guess by its name, the extension is a checklist of everything important you need to double check before you launch a site.

  • So, have I missed any killer Chrome extension?
  • And are there any Firefox extensions you miss since moving to Chrome?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • adaivanoff

    Definitely not! :) How could somebody not love such a great extension? Web Developer is not included here because it’s covered well in almost any other article about addons. Firebug is not available for Chrome (it has only a light version that is not as functional as the original) but even if it were, it wouldn’t be included either because it’s so popular and everybody already knows about it.

  • adaivanoff

    Hi Alex, thanks for the input, it’s so exciting to hear from somebody who actually writes these goodies. Your extensions are cool. Thank you for sharing them with the community and my apologies for not including them in the list.

  • http://www.KeithJamesDesigns.com Keith James

    Hi Ada, nice list. I’m familiar with most of them but will have to give Font Playground a try. I also want to give Alex’s link checker a try. Looks pretty nice.

  • Irene Hartfield

    I can’t do without Session Manager, especially if working in an online CMS, like WordPress. I always close my browser window with several windows open and it’s not my personal browser with open tabs like gmail. So, I save the project in Session Manager where I can easily come back to where I left off.

    • vikrantsingh47

      i use session buddy

  • http://twitter.com/Nigh7mar3 Nightmare

    Bootstrap Overlay does not works with Bootstrap 3, stop posting it.

  • http://hasi-journal.blogspot.com/ hasi_wk

    awesome post, thanks love

  • lozandier

    The bootstrap overlay w/ its current flaws mentioned already in this comment section—as well as its overall low relevancy to most web designers or web developers—makes it sort of eccentric to be mentioned at all.

    Font face Ninja, Dom Flags, WhatFont?, Pagespeed Insights (Design for Performance), and daresay the Chrome accessibility dev tools plugin seem much better plugins to mention instead of it.