Last Updated on September 8, 2019 by Mr.Pugo
9 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.
9 best Chrome extensions for designers
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.
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. you can check out 50+ Best Free Fonts For Minimal Design to
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.
