UX Design - Mentor & Author.
10 Sep, 2022
Introduction to Chrome Extension for Designers
Being a designer, we all love discovering new design tools and tricks. It makes our design workflow faster and more efficient. If you use Chrome as your default browser then utilize Chrome extensions. Chrome extensions are a really smart way to boost your design productivity. Let’s discuss about a few basic design tools that every beginner should know
Colorpick Eye-dropper
• This extension helps to pick a color from any website.
• You can get as many colors as you want in one go.
How to Use this tool?
• It’s very easy to use.
• If you click any element on the website, it shows the color code.
• Available Color codes are RGB and HEX
• You can choose your type of color code format.
• Just click to Copy and paste the color code as HEX in your design.
As I mentioned HEX.
What is Hex?
• HEX – 6 Digit alphanumeric format of color code
• Which is used in modern web development in CSS
• We will discuss later about CSS
Question Time.
• What is RGB? Share your answer in the Comments section.
• I know it’s a basic question.
Where to find this tool?
• This tool can be found in the Chrome Store.
A lot of similar tools are available in the chrome store. One more popular tool is Colorzilla. You can try and choose the best one for yourself.
Pro Advice: Don’t stick with the tools.
WhatFont
• A very popular and useful Chrome extension for designers and developers.
• You visit a website and you like the font. Now you want to know the font name and use it in your design.
• Don’t worry – whatfont will identify the fonts for you.
How to Use this Tool?
• It’s an easy-to-use tool.
• Just click your mouse on the text.
• It shows the font family, size, line height and weight
Where to find this tool?
This tool can be found in the Chrome Store.
SVG-Grabber
It’s an open-source tool. .You can quickly copy or download all the SVG files from a website.. This tool allows you to download any SVG from a website
How to Use:
• Go to any website
• Click SVG Grabber extension
• A new window will open
• It shows all the SVG files.
• In a single click you can Download all svgs
• If you want a specific file then scrolldown to go to file and you can either copy or download the file.
• If you copy, you can paste it directly into your design software.
• If you download, you have to import or open the file in your design software and use it.
What is SVG?
Scalable vector graphic. Currently using in web design and mobile app design instead of using PNG.
Question Time
Why should we use SVG in our design?. You can download this tool from the chrome webstore. I share the link in the description.
Ruler
This tool is used by both designers and developers. You can measure the spacing and dimensions. You can check whether the developer deploy exactly your design . So, the designer can ensure the exact design. This tool helps to deliver the pixel perfect conversion.
Use: Click and drag over an element on a website.
Where to find this tool? This tool can be found in the Chrome Store.
Benefits: Measurements in pixels are accurate. Can even identify colors
Scrnli
Description: A tool to capture a screenshot of the website.
Use:
• Select and drag a portion of the screen or complete screen.
• Save as PNG or PDF.
Where do I find this tool?
• This tool can be found in the Chrome Store.
Benefits:
• Save the selected portion as PNG, PDF or copy to clipboard.
• Edit the screenshot before saving.
Show me the styles (CSS Peeper)
Description: A tool to extract CSS and styleguides from a website.
Use: Select the extension and a display screen on the right side shows the fonts, colors, and assets.
Where do I find this tool?
• This tool can be found in the Chrome Store.
Mobile Browser Emulator
Description:
• A tool to view a webpage in a mobile layout/UI.
How to Use this Tool?:
• Select the tool from the extensions menu and a drop down menu shows different resolutions.
• Select the desired screen size and a new window opens in the mobile layout of the present website.
Where do I find this tool?
• This tool can be found in the Chrome Store.
Google Art and Culture:
Description:
• This extension portrays an art masterpiece on every new Chrome tab.
How to Use this Tool?
• A very simple tool.
• Just add it from the extensions in the Chrome store
• Now every new tab will show an art work painted by famous artists.
Where do I find this tool?
• This tool can be found in the Chrome Store.
Nimbus Screen Capture
Description:
• This is another tool to capture a screen.
How to Use this Tool?
• Another simple screenshot tool.
• Just add it from the extensions in Chrome store
• Now every new tab will show an artwork painted by famous artists.
Where do I find this tool?
• This tool can be found in the Chrome Store.
