10 must-have browser extensions for UX/UI designers
Our design team is always looking for new tools and technologies to make our work easier and our designs better. We’ve already written about our top design tool choices, and how we use Figma plugins to supercharge our workflow.
In this post, the ArcTouch design team members share their top 10 must-have Chrome browser extensions for UX/UI designers. While useful for product designers, they’re also super helpful for engineering and QA.
Muzli 2 for design inspiration
Every designer needs to be up-to-date on the latest digital trends. Most of us browse platforms such as Dribbble and Behance for inspiration, but sometimes navigating all the content can be overwhelming. But what if we could discover these inspirations whenever you open a new browser tab?
With the Muzli browser extension for Chrome, every time you open the browser you see, as Muzli describes it, “the freshest design, UI, UX and interactive news and shots from around the web.” The way it integrates organically with the browsing experience is awesome. ArcTouch designer Mariana Machado says she uses it every day as part of her work routine.
Fonts Ninja (or WhatTheFont) to identify fonts
Here are two great solutions for the same issue. Both of these Chrome browser extensions let you easily hover over any text to see what font it is, and also the size, weight, line height, letter spacing, and color. ArcTouch designer Marcelo Brasileiro always uses this extension to gather information about typography specs and for inspiration.
SVG Grabber for downloading vector assets
We always prefer to use vector icons and logos in our design deliverables, since they translate better to every device screen and resolution. And sometimes we need a quick way to grab them from existing pages. ArcTouch designer Deiver Brito loves how, with a single click, the SVG Grabber Chrome browser extension compiles and shows all the scalable vector graphics (SVGs) from the selected browser tab, in a user-friendly way. It’s a time-saver!
Window Resizer to analyze breakpoints
This one is really self-explanatory, right? Designers usually like to use bigger screens and multiple displays during the creative process. So, it’s easy to forget people experience apps and websites on a wide range of different-sized screens.
The Window Resizer Chrome browser extension makes it easy to test and preview how our designs (and also our benchmarked inspirations, of course) look on different viewports and sizes. With a few clicks or preset shortcuts, you can emulate various resolutions in real-time.
ColorZilla to identify color specs
Colors are a huge part of any user interface. They bring significance to content and “delight” to any screen — and they can also affect a digital product’s accessibility. The ColorZilla browser extension for Chrome lets you discover the color elements of a web page by simply hovering over them with your cursor. It shows RGB and HEX codes, letting you copy them to the clipboard easily.
ArcTouch designer Bianca Marotta is a fan of this one and mentioned that she regularly uses its color picker, “eye dropper,” CSS gradient generation, and some other advanced color tools.
Wappalyzer to profile underlying technology
Since we work closely with the developers it’s helpful to stay current on the technology used to build the products. ArcTouch designer Loise Lobo uses the Wappalyzer Chrome browser extension to easily see the frameworks, libraries, CMS, and more that were used to create a specific web page.
aXe DevTools to test web accessibility
Here at ArcTouch, accessible app development is a business priority. As ArcTouch designer Barbara Fontenelle wrote in her 7 best practices for accessible app design, “Accessibility is a mindset to guide you through every phase of the app development process,” from discovery to development.
The aXe DevTools is a lightweight and practical browser extension for Chrome that quickly tests any webpage and is backed by Deque’s axe-core, one of the world’s most trusted accessibility testing engines.
GoFullPage for full-page screenshots
When researching and benchmarking references for our design solutions, we take screenshots of the examples. The GoFullPage Chrome browser extension helps us capture a screenshot of the whole page, without the need to manually bind every viewport together.
It screenshots the page and lets you save it in different formats. ArcTouch designer André Yassui loves how it allows you to download the entire page in JPG or PDF easily, or copy and paste it directly into any presentation.
Baseliner for grid alignment
The Baseliner Chrome browser extension is a unique tool to help designers and developers align elements on a page and keep the baseline consistent. It adds a fully customizable CSS grid layer on top of a website while keeping the background content usable.
It’s not as well-known as some others on this list, but ArcTouch designer Paulo Germano strongly recommends this hidden gem.
Bonus Chrome extension: Grammarly
This isn’t directly related to the design practice, but it’s one of the most popular extensions used by our team. Grammarly is more than just a proofreader. As the company states, “It’s a tool that helps you write with confidence, find the best words to express yourself, and communicate your ideas with ease.”
As we’ve said previously, communication is one of the most important skills for a designer. Our team includes designers from all around the world, and not all of us are native English speakers. This tool helps us be our best when communicating internally and with our clients.
Need advice or help designing digital products?
The design community is constantly innovating, creating new tools to improve the quality of our work and how we do our jobs. One of our company’s core values is Excellence, meaning that we constantly search for improvement, striving to be even better today than we were yesterday.
We hope some of these browser extensions we recommended are helpful for you. And if your company needs any additional help with UX or UI design work, please contact us!