DEV Community

loading...
Cover image for Chrome Extensions every designer must use🎨

Chrome Extensions every designer must use🎨

exwhyzed profile image ExWhyZed ・2 min read

If you’re looking to add some extra handy tools to your everyday workflow, you’re in the right place.

I've compiled a list of few Google Chrome extensions I use daily and will help with all kinds of things as you’re browsing the web like identifying fonts and color hex codes, designing for accessibility, and even testing responsive designs.

Here we go:

💠 WhatFont

Do you ever stumble upon a nice looking font while browsing the web and then spend way too much time searching for the name and details?

WhatFont
 is a huge time-saver letting you hover over a web font with your mouse and instantly providing the font details–from font name, font family, weight, size, line-height, to the hex code for the text’s color. The best part is, WhatFont also provides a link to the downloadable font via Typekit so you can instantly add it to your font library.

💠 Spectrum

Spectrum is a tool with which you can instantly test your web pages for different kinds of color vision deficiencies.

Simply click on the chrome extension in your browser window and use the drop-down menu to select a specific color deficiency. The web page you are on will then change in appearance so you are viewing it through the eyes of someone with the selected deficiency.

💠 ColorPick Eyedropper

ColorPick Eyedropper
 is extremely useful if you were previously saving images and importing them into your software to pick out color codes.

Now, you can save time by hovering your mouse over any part of your browser to get the hex code for the desired color straight away. This is a great color picker that will save you loads of time.

💠Sizzy

Gone are the days where you’re forced to go through the tedious process of testing out your web designs for each and every screen they will be viewed on (iOS, Android, tablets, etc.)

With Sizzy
, a responsive web design tester, you can preview your design on multiple screens at once as you work. All you have to do is input the website URL and filter what devices you’d like to preview the design on.
_

PS: If you are a Designer/ Developer or simply someone who loves technology, come Join our Discord Server
Get in touch with people of similar interests. Also, We host exclusive daily giveaways for everyone.
_

That's it for now.

Discussion

pic
Editor guide