Browser Extensions Every Designer Must Have

#design #productivity #react #browser

Overview

I've always been a minimalist. I avoid cluttering my workspaces at any chance I get. This is why I am writing this small article about the few browser extensions I often rely on as a designer. I rarely feel the need for any extensions other than these. So let's check them out.

WhatFont

Have you ever visited a website and seen a font that looks immaculate? Don't you wish there was a way for you to find the name of every font you see on the internet (without having to open inspect element every time)?

WhatFont does exactly that. Once you install it in your browser, there's almost no font on any website whose name you cannot find out. Although many extensions do this, I find WhatFont to be the most easy to use.

Chrome Web Store

Firefox Add-ons

Colorpick Eyedropper

This cool extension gives you the exact hex code of any color you see on a website. It's especially useful for clone projects when you want the exact brand colors of an existing web page. I find myself using it often even when I'm building my apps.

It also has many alternatives but this is the one I find to be the easiest to use.

Chrome Web Store

Firefox Add-ons

Block YouTube Feed

This was a game-changer for me. If you are self-taught then you already know how valuable youtube is in terms of free education. Every time I need to learn something new, youtube is probably the first platform I visit to find courses on that topic.

But this is a big problem because youtube is one of those platforms that loves your attention and shows you things that are hard to ignore. Next thing you know, you wasted half the day watching cats, memes, or other things that you don't even remember.

This extension completely blocks off all videos that youtube recommends. You can even customize which feed you want to allow or block. Now if you want to open youtube for searching a topic, a playlist, or a question, you don't have to worry about getting distracted and procrastinating your life away.

Chrome Web Store

Firefox Add-ons

Tabliss

This adds a lot of personality to my browser. I can customize how I want my new tabs to look and the customization is endless. It is a great way of making your workspace truly your own and livening it up.

You can have it display random high-quality pictures from Unsplash, random gifs from GIPHY, color gradients or even static images. There are several useful widgets you can add to improve the appearance and the fonts are fully customizable based on your system fonts. It even increases my productivity with the to-do lists and notes.

Chrome Web Store

Firefox Add-ons

Dark Mode

Everyone understands the struggle of reading in light mode. I always keep a dark mode extension on my browsers. But they aren't the same for Firefox and Chrome.

Chrome Web Store

Firefox Add-ons

React Developer Tools

This is more for front-end developers than for designers. I'm sure you have heard about it, but if you code with React and never heard of React developer tools, you're missing out.

It provides a plethora of tools specifically designed to debug and optimize React applications. It also allows you to identify if a website has been coded with React or not. Watch this video to learn about optimizing a React app using React developer tools.