6 super-useful Chrome extensions for designers

Guest Blogger

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

Screen Shot 2014-05-22 at 5.56.29 PM

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

Screen Shot 2014-05-22 at 5.57.52 PM

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

Screen Shot 2014-05-22 at 5.58.42 PM

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

Screen Shot 2014-05-22 at 6.00.24 PM

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

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

139650481304-Check-My-Links-2

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.

5. Screen measurement tools

Ruul. Screen ruler

139650483305-ruul-2

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

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

Screen Shot 2014-05-22 at 6.00.43 PM

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

Screen Shot 2014-05-22 at 6.01.06 PM

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

Screen Shot 2014-05-22 at 6.01.27 PM

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.

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?

This article was originally written by Ada Ivanoff and published on SitePoint. SitePoint provides cutting-edge content for web professionals — developers, designers, programmers, freelancers and site owners.

The author

Guest Blogger
Guest Blogger

99designs loves to share design how-to's directly from design professionals themselves. Reach out to share your thoughts, ask questions, or thank these experts for their awe-inspiring tips!

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

The new Google Fonts is a win for designers

The new Google Fonts is a win for designers

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability. The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it…

Current Design Contests

Designers, check out these contests so you can start building your career.