Google Chrome is the world's most-used web browser. In fact, 55% of all people who surf the internet use it. That's more than 300 million people each day! There's a big chance that you, as a designer, are also using Chrome. For that reason, we created this list of our favorite Chrome extensions for designers to inspire you and help your design process.
1. Designer Daily Report
Get inspired and stay up-to-date with the latest design trends and stories pulled from all corners of the internet, like Reddit, instagram, Dribbble and Behance. This daily report will help fulfill your endless need for inspiration. You’ll have an enormous feed of design inspiration at your fingertips every time you open a new tab.
There are a lot of Chrome extensions for designers aimed at inspiring you when opening a new tab (Muzli 2 for example), but we think this is the best one. Users describe it as the best way to start their day as creatives.
2. ColorZilla
With ColorZilla you can quickly identify the color of any pixel on any webpage. The extension will show you the color code in HEX or RGB of any element.
If you have found a color you really like and want to use it yourself, simply copy the color code from the plugin into your design application, and off you go. Although it was released quite some time ago, it still works like a charm and has more than 3 million users.
3. expoze.io
If you would like to know how visitors view a webpage in Chrome, this extension has all the answers. expoze.io generates attention heatmaps that allow you to identify whether or not that CTA, button, or USP gets attention. It even works with Chrome Inspect, so you can test designs for different devices and screen resolutions.
Pro tip: if you are handy with Chrome Inspect you can even make adjustments (like color or textual changes) and validate how these changes impact the attention distribution on your page!
To generate these heatmaps it uses AI and a huge pool of data to quickly analyze a page so you don’t need people or special hardware. The platform predicts with an accuracy of around 94% (MIT saliency benchmark) compared to real traditional eye tracking which is also slower and more expensive.
Creating an account is free and doesn’t require a credit card. With your account you can also access the expoze.io web application that offers you even more features, such as ‘Areas Of Interest’ or the ‘Reveal heatmap’ which will give extra insights.
4. WhatFont
Described as: “The easiest way to identify fonts on web pages.”
If you’re looking for inspiration for text fonts, this extension is a must have. It will tell you every detail about a text font on any web page in a quick and easy way, no more scrolling through properties to find the active font family.
When activating the extension, you simply need to hover your mouse over the text and you’ll see all the font information like: style, weight, size, line height and color code.
5. Dribbble Inspiration Tab by ZODE
Similar to our previous recommendation, Daily Design Report, but this one is purely Dribbble and color-focused. Every time you open a new tab, it will display a Dribbble feed based on color. It features:
- Infinite scrolling
- Switch colors
- Links to Dribbble page
6. Stylebot
An amazing extension for web designers, change the appearance of any webpage through CSS customizations. Change elements like the font, color, margins and visibility, etc. It’s super useful for trying to visualize how changes to a page would look like, to take those ideas over to your own project. Or maybe you just don’t like how a certain website looks and you can adjust it to make the consumption of the content easier.
7. Window Resizer
Designers usually use a large and quality display to create the best version of their work, however the majority of people who will view it will be doing this through a different display and therefore resolution. If you don’t know how to use Chrome inspect to resize pages you can use this window resizer Chrome extension. It can adjust your browsers resolution accordingly to test a design's look on these different resolutions.
Avoid design mistakes by testing your pages on different monitor resolutions and of course different smartphone resolutions.
8. svg-grabber
The svg grabber extension is super handy for instantly importing any svg elements you feel inspired by and want to use yourself. No more instances of seeing some interesting icon and not being able to save it. Or perhaps you need some logos of your partners for a presentation of marketing content, the svg-grabber extension will do it efficiently at a click of a button.
9. HTML to figma
In our blog about the best Figma plugins, we mentioned HTML to Figma, it also uses a Chrome extension so we don’t want to exclude it from this list. With this extension you can capture your current page (if coded properly) and import it into figma as editable layers. Use it for:
- A starting point for your own design
- Learning from the pros
- Turning site components into design elements
Takeaways
These were our 9 favorite chrome extensions for designers, but they’re only a few of the many useful Chrome extensions that can really compliment your workflow and improve the quality of your work. We hope you will find them helpful! These extensions are great tools that will help you save time and money, so trying them is definitely worth it. Make sure you also check out our list for the 9 best figma plugins for designers to find more useful, toolkit-enhancing extensions/plugins that can benefit you and your business.