The best Google Chrome extensions for designers in 2017

Ashley Gainer's Layout avatar

Chrome extensions…they’re better than a bookmark, better than in-browser apps, ridiculously handy, and a fantastic (usually free!) resource for web designers.

You may already be using some extensions, not to mention Chrome’s own DevTools if that’s your style, but don’t stop there! If you’re missing out on any of these must-have Chrome extensions, your workflow might have room for some improvement.

In alphabetical order (because that’s how this particular writer rolls), these are the best Google Chrome extensions for web designers in 2017:

Attachment Icons for Gmail


If you use Gmail for your web design business and you’re dealing with a lot of attachments, this extension will make your emails infinitely more scannable. Each type of attachment (PDF, JPEG, etc.) has its own icon, and that icon will replace the generic paperclip attachment icon in your email list. Now you just need to look for the PDF icon when you’re scanning for that PDF your client sent you a while back, instead of digging through every single attachment.

Code Cola


Look at your site’s source code with Code Cola…and then edit the CSS right there in the source code and see the changes instantly. If CSS is part of your design workflow, this could be your new best friend.



If you don’t already have a favorite color picker, eyedropper, and gradient generator all in one, check out ColorZilla. It can do all of those things and more. Who doesn’t love a color picker?



If you prefer building things in a photo editor and then taking it live on the web later, you are going to love CSS-Shack. With this extension, you can build a site in an environment that feels a lot like a photo editor (using all the same tools you’ll see in your favorite photo editor, too). When you’re ready, you can export the design to a CSS file to use on the site. It’s like magic…glorious CSS magic.



If you work with DevTools, this will be a complete game-changer. DomFlags lets you create your own keyboard shortcuts to DOM elements, which will dramatically increase how quickly you’re able to style the elements in your design. If time is money, and this tool gives you way more time, well…you do the math.

Instant Wireframe


Turn any page into a wireframe. When you turn it on, you’ll see the page under some transparent wireframes. Pretty cool!

Page Ruler


There are a few different screen ruler extensions, and this one’s my favorite. Turn it on and you’ll be able to measure any element on the page you’re viewing. Draw rulers to get pixel dimensions, positioning, and anything else your inner measuring tape needs to feel satisfied. Plus, you can operate it with the arrow keys on your keyboard. There’s also a special mode that will measure the elements on the page as you hover over them.

Responsive Web Design Tester


This extension lets you view a site the way a whole host of mobile devices would. It’s fantastic for perfecting your responsive design for mobile.

WhatFont and Fontface Ninja


Maybe it’s because I love fonts but am not very good at recognizing specific fonts when I see them, but WhatFont is one of my personal favorites. With this Chrome extension turned on, you can hover over any font on a website and see what it is. Inspiration, meet practicality.


Take your font-icizing a step further with Fontface Ninja, which will not only show you all the fonts on a website but connect you to the source so you can buy them right there.

Window Resizer


When you’re working on a design and trying to perfect its responsiveness, this tool will really come in handy. It resizes your browser window according to all kinds of popular monitor dimensions, and you can plug in custom dimensions or resolutions, too. Easy, peasy, responsive squeezy.



We all know loading speed is crucial (it’s one of the things that sets Flywheel apart, after all!) but we don’t always know what’s gumming up the works on a slow site. Yslow changes all of that. This extension will tell you how quickly your page is loading and also help you identify the slower bits by comparing the page against 23 of the 34 rubrics Yahoo’s performance team uses. Once you know what the problem is, you can work up a pretty fast solution (see what I did there?).



This handy little extension helps you optimize the text portion of your designs for readability across all screen sizes. The ideal range of characters in any line is 45 to 75, hence the name, and when you apply this extension to a page you’re testing, you can see where your text falls with just a right-click.

Which one is your new favorite?

Are you already using these Google Chrome extensions? What’s the absolute best one you’ve found so far? Which ones can you not live without?

Comments ( 4 )

  1. Munzur

    August 31, 2017

    Here another Free Extension, Every Chrome user should use

  2. Ivan Ivanov

    August 26, 2017

    I use 7 Times Faster. It's a ad blocker. It can speed up your internet in 2 times. And it's a much more faster than AdBLock and uBlock

  3. Vishnu Goyal

    July 20, 2017

    Thanks for this list. It's very useful.

    Also include WordPress Theme and Plugins Detector.

  4. Chyno Deluxe

    July 18, 2017

    This is great list of chrome extensions Ashley. I use a few of these myself. I also wanted to share an extension I created with you called Auto Mute.

    It's a chrome extension that prevents multiple tabs from playing audio simultaneously. If you have multiple tabs playing audio, then all non-active, audible, tabs will be automatically muted and only the active audible tab you are viewing will be left un-muted.

    This has boosted my productivity and I'm certain it can boost your and your readers productivity as well. If you do try it, I hope it helps improve your workflow as it's helped mine.

    Auto Mute Inactive Tabs -

Join the discussion