8 Best Free Google Chrome Extensions for Designers

hey and welcome unliving with pixels in this video i'm going to show you the eight best chrome extensions that i think are the best for designers so let's just get started so as designers we run into a lot of first world problems when we of course wants to have a color if we want to know a fount of a website that's not really easy to do because then you have to go into the inspect element and all of that it takes a lot of time so I will show you a few extensions that will make your life as a designer a lot easier alright so the first extension that I want to show you is the color picker and very easy to use extension and it's called color pick eyedropper if you're on a website this is for example my own portfolio website and you want to know what the color is of this button so what you're gonna do is you're gonna click on it and I will just create a little color pick with a very big zoom which is really nice because sometimes you want to see the color of a little icon for example and you can really zoom in on a specific point and then if you click somewhere you're gonna get the hex code and you could just copy this or the RGB code and then just go to your Adobe XD and paste that color wherever you want so yeah that's it and by the way all of the links for these extensions I will put them down in the description so all of the links are there alright so let's go to number two and number two is called what font it's kind of similar but then you can see what kind of font there is on the website so if you if you hover over the phones you can already see the main font and then if you click on a specific phones you would get a lot of information about those phones so for example the weight which is something you can use they're not in a lot of page builders or in your code or the size in pixels the line height for example and this is this is nice the color because number one the color picker is nice for buttons and backgrounds and all of that but for texts um sometimes it's hard to pick a color because the text is so light or it's very small so you will also solve that color problem for text with this plugin over here but I mainly uses to check what kind of fonts a website is using on this website as you can see it's only monsterettes and then if you want to get out you just press escape and then it's gone so it's super nice super quick okay so the next extension is also pretty nice it's called stell bot and it has this little CSS I can over here sometimes you are on a website and you just want to see how it looks when you make the text a little bit bigger or you change the line height and this is a nice plugin for that because if you click on the CSS icon over here it needs to load a few seconds and then if you click on open style bot you can click on any item on the website so for example on this title text and then for example just just press these font size and press the up or down arrow to see how it looks if the font size is bigger over example when it's from bolts to normal or when it's italic or italic and bold or maybe in caps for example because otherwise you would have to go into an inspect element and find the actual piece and then change it and you have to know CSS and for this plug-in you don't have to know that you can even change things like the background color over here you can change the borders and also the margins and the parents of a specific item so it's just much more convenient than going into inspect elements okay so the next extension is also super nice every designer uses lorem ipsum text back in the day I used to go to a website like this lorem ipsum and then I would copy a bit of text and copy it like that and then go to my Adobe XD for example and then paste that text but there's a faster way to do this and that is free at this plugin it is his Big L lip lorem ipsum generator it's called and if you click it it will just create a big lorem ipsum text within the tab that you're working you can even select words for example so if you only want 20 words for example that's really easy to do you just select it you copy it and you can even click HTML over here and it will create a BTEC and it also has a nice icon over here a little detail of but it's nice okay so the next one is also super nice and I use this almost every day and it's called full-page screen capture it's this icon it's a camera icon so if you are on a website you can click on this icon and it will give you this nice pac-man animation and it will create a big screen shot of the whole website and this works most of the times for some websites where there's a lot of animation it doesn't work that well but for most websites it works really well and you can create full-page screenshots of a website and then what I always do I just copy the image and I just go to my design fill and I paste a bunch of websites that I like as for inspiration so that's what I also did for example for my portfolio website just went to the plug-in it generated a picture like this you can save it or you can copy it you can go to your favorite design tool and you could just base it over here and then it generates a very big screenshots you can resize and in this way you can just create a very nice art board with a lot of different pages for your inspiration if you're designing a website but it's also a good tool to just download your whole website after it's made because for some projects of course you don't create the whole website in a tool like Adobe XD you just start for example in WordPress maybe the client has that much budget right but after all you just want to see if the whole website is in one style it's NSF very messy so what you can do is download all of your pages like this with this plugin and then paste them into Adobe XD then you can clearly see like oh is this it's the design still consistent so there's also one of the plugins it's also in the description the next one is image downloader and it has this little icon over here and if you click on image downloader it will generate links download links for all of the individual images of a website you can also select all of them and then click on download and it will generate a zip file that you can save on your computer also a pretty nice one and for number seven this is also a super nice one and it's called loom so this is a recording software so if you click on loom it will open your camera you need to sign in with Google one time and then you can make a recording of your screen including your your facecam witty camera so that is really nice because a lot of times you created something on the computer and you want to share your process you want to show how it works or you want to explain to them how WordPress works something like that you could just make a quick little record over here it's absolutely free to use you can even only record your screen if you want your microphone audio and then it will generate a link and you can even download it and then send it to your client or upload it on YouTube and send a an unlisted link for example so we're pretty nice extension so yeah I use loom all the time I love it and let's continue with the last extension and that is called momentum I get a lot of questions about this how do you get this super nice starting screen when you open a new tab in Google Chrome a lot of people see this inside of my videos and then I get questions about it it's called momentum it doesn't help you with design but it just looks nice and it's also good for when you are in a meeting for example and you open a new tab that you don't see the previous websites that you've opened it's just a very clean thing to do you can even type in something like a task in here and it will give you a reminder that you can check off it has a new quote every day and sometimes it's pretty cool to see you have some settings over here but I've set it up like this it doesn't make you a better designer but it looks nice and designers like things that look nice don't we alright guys I hope you find this video valuable if you want more videos on Web Design how to build a website how to sell a website then little pixels might be something for you so check out my other videos if you're interested and if you like this video please give it a thumbs up because it helps the channel a lot with the algorithm and then I hope to see you in the next video

Channel: LivingWithPixels

Views: 107,902

Keywords: livingwithpixels, living with pixels, chrome extension tutorial, chrome extensions, best chrome extensions, chrome extensions development, chrome extensions for graphic designers, chrome extensions for designers, best chrome extensions 2019, best chrome extensions 2020, best chrome theme, chrome extensions color picker, google chrome background, chrome screen capture, chrome screen recording, chrome plugins, best chrome plugins, google chrome extensions, google chrome plugins

Id: owNoxIFQk2Y

Length: 9min 1sec (541 seconds)

Published: Sun Feb 09 2020