6 Super-Useful Chrome Extensions for Designers

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.

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.

Bootstrap Overlay

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 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

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

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:

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).

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

Ruul: One extension to ruul them all?

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

It’s the Chrome equivalent of the famousMeasureItFirefox 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.