10 best Chrome extensions for designers

As designers, we’re almost always searching for new tips, tricks, and tools to help speed-up and improve our workflow. After a few months of testing out Chrome extensions, I’ve compiled a list of the 10 best extensions and plugins for designers.

Window Resizer

If you’re a designer— you’re most likely staring at a 27" iMac as you read this. Yet, most of our users don’t have monitors that are baby-elephant-size.

Thus meet Window Resizer. This is a real life-saver when it comes to seeing how your site looks on different viewports. Simply open the extension and either click the preset viewports or enter in something custom.

Loom

They say a picture is worth a thousand words and so a video is worth 10,000? 1M? Who knows — a lot though. Loom is a truly amazing free piece of software, which will help you record animations, user-flows, or bugs and share them with your team.

I’ve used this tool a lot over the past few months. It’s great for when you’re trying to communicate things that can’t be captured with just screenshots. Simply install the extension and press record. Once you’re finished, you can share your video and get stats on who has viewed it and more. 10/10 would recommend to a friend — and you of course :)

Toybox

Are you spending a ton of time inspecting elements, grabbing screenshots, and logging bugs on your site? Well, look no further than the Toybox chrome extension. This is truly the fastest way to leave feedback and inspect CSS directly on your site.

You can think of it like InVision commenting and Zeplin Inspecting — but on your site instead of a design file. Not only that, when you leave a comment, it automatically takes screenshots, records browser data, OS info, viewport size and more — making reproducing issues a breeze. It’s a serious must-have for any product team or agency.

Muzli

Need some inspiration with your morning coffee (or tea)? The Muzli chrome extension has got you covered. Every time you open a new browser window, you’ll see an up-to-date feed of all things awesome design. They pull from tons of design sources to give you what’s new and hip and cool.

I’ve been using this extension for years and it’s just great.

SVG Grabber

Sometimes you just need to grab the logo or icons on a page. If that sounds like something you do — then welcome SVG Grabber into your life. Click a single button and it will automatically pull all the SVGs that are on the page. Get a complete view of what it was able to capture and quickly download the ones you need.

Not necessarily an extension I use all the time but it’s been great to have on the back-burner for those tricky moments.

Page Ruler

Measuring the size of objects on your page can be a serious pain. If you’re someone who frequently opens the screenshot tool to do so — I’d definitely recommend getting yourself the Page Ruler extension.

Open the extension, drag the box to measure, and you’re all set! Not much else to it.

Dark Mode Dev Tools

Dark mode — a true necessity for any designer. So this is actually built right into Chrome Dev Tools and is not an extension — but thought I’d still mention it ;)

Simply open Dev Tools > Click the 3 dot Ellipses in the top right corner > Click settings > Under Appearance, switch it to Dark. That’s it! Now you can dodge your way through the DOM in complete darkness.

ColorZilla

Sometimes you just need a quick way to see what color is being used — and ColorZilla is a great solution for just that. Simply hover over elements on your page to see the hex and rgb color values being used. Click to quickly copy it to your clipboard. It’s fast, simple, and efficient.

They have a few other features but haven’t used those too much tbh.

Fontface Ninja

Another easy, breezy, beautiful extension for your downloads is Fontface Ninja. This lets you hover over elements to see what fonts they’re using. You can also go straight from the fonts on the page to purchase using their extension toolbar.

A simple and handy extension to have on your dock.

Custom Cursor

This pup isn’t really designer specific but I found it the other day and thought it was a real hoot-and-a-holler. Custom Cursor lets you change the default cursor to any of their flavor-town selections, as well as allowing you to upload a custom cursor.

Very fun, very funky, very fresh — give it a whirl.

— — — — — — —

Thanks for reading and I hope you enjoy some of these extensions as much as I do :) Please drop a comment if you’ve got any other extensions that you use in your workflow!