As UX/UI Designer
Well, you’re here again. I think I should start by saying that my previous articles about how I manage my workload and the tools I use every day seemed to be helpful for my fellow designers. So, I’ve decided to share the extensions I use daily to ensure I don’t spend more than necessary on unproductive tasks.
What browser are you
using?
using?
I've been using Chrome my whole life. Yes, I think so, but last year, I decided to switch to a newly launched browser called Arc and have been using it ever since. Since this is not an Arc-praising article, I won't say much about it. I'll just mention that this switch has drastically changed my working routine and how I perceive browsers in general. I'll simply say it runs on Chromium, and you can actually transfer all your Google Chrome-based extensions and accounts if you ever decide to try and switch to it.
I'm not going to blatantly lie and say that I use tons of extensions. When it comes to extensions, my main concern is privacy and data collection. Extensions often require access to user data and browsing activity. Some might collect and use this data in ways that are not transparent, posing privacy risks. So, unless I am sure it's safe to use, I won't use it. Extensions are more than just having adblock on your browser. They can definitely make your daily work easier if you come across important ones.
What extensions can be helpful for UX/UI designers?
We spend a lot of time browsing, so it’s crucial that we find what we’re looking for in a very short time. This could be a font, a color palette, code, or a certain logo in SVG format… If you recognize yourself in this description, then you may find these extensions particularly helpful for you.
Okay, I know everyone knows how to use the inspect element in their browser, but what if there was a tool that gives you direct access to all SVG, PNG, or image files without manually rummaging through website code?
Amazing, right? Here’s SVG Export, a Chrome extension that you can add from the Chrome Web Store.
Amazing, right? Here’s SVG Export, a Chrome extension that you can add from the Chrome Web Store.
SVG Export simplifies the process of extracting SVGs from websites, offering an efficient solution for designers and developers. This tool not only locates SVGs on web pages but also allows you to export them quickly as PNGs, JPEGs, or SVGs. Its key features include bulk export capabilities, image resizing, and the option to copy SVGs directly for use in Sketch, Figma, or Framer.
SVG Export ensures that important styles and colors applied via CSS are preserved and embeds linked nodes from other parts of the site. This makes it an invaluable tool for those who need to obtain SVGs from websites without delving into the source code.
It comes from a provider with a good track record and no history of violations, so I would say you can trust it without any issue. The most helpful feature for me is the exporting option, which allows me to directly copy in the preferred size and paste it directly onto my Figma board. No download needed.
Html to Figma by builder.io (needs Figma plugin)
I am a huge fan of html.to.design, which I use as a Figma plugin, but it never hurts to have another option. If you’re using the free plan for html.to.design and need an alternative, I would recommend Html to Figma. This extension is another excellent tool for UX/UI designers, enabling the import of web pages as JSON files directly into Figma as editable layers. It streamlines the design process, making it a practical asset for creating prototypes and mockups in Figma. It comes from a verified publisher, and I can safely assure you that it will be worth trying. The export and import process is pretty easy: all you need is their plugin installed in Figma.
We rely on references, and it’s not like we’re stealing each other’s work or anything. I do believe that you learn from what you actually see existing and operating without trouble. So, having references as a designer is a must. As someone who is a huge fan of Mobbin and similar apps, I sometimes find even their extensive library limited. Therefore, it’s always good to have an alternative. This browser extension allows for easy full-page screenshots without needing extra permissions. Simply click the extension icon or use a keyboard shortcut to capture the entire page, including complex elements and iframes. Images can be downloaded as PNG, JPEG, or PDF, and a new premium feature allows cropping, annotating, and adding emojis. The process may require patience for long pages and might split very large pages into multiple images. It’s developed by an independent developer with no history of violations, so it’s pretty much safe to use.
This browser extension simplifies the process of identifying fonts on web pages. Users can easily find out which fonts are used on a webpage by simply hovering over the text, making it user-friendly and efficient. The extension also identifies the font services used, such as Typekit and Google Fonts API, streamlining font identification without the need for developer tools like Firebug or Webkit Inspector. Using it is pretty straightforward: just open it on the page you want to get font information from, and when you’re done, simply close it by clicking the button in the top right corner.
For aspiring designers, I recommend trying this at least for some time. Sometimes we are so wrapped up in our daily tasks that we forget why we are here and what our main goal is as UX/UI designers. This little extension is a good reminder of everything we stand here for — the users.
This browser extension offers a unique learning experience for UX enthusiasts. Each time a new tab is opened, it presents a UX principle, drawing from the expertise of renowned UX experts like Jakob Nielsen, Bruce Tognazzini, and Don Norman. It serves as both a reminder for experienced professionals and a learning tool for beginners, encapsulating key principles essential for effective UX design. This feature makes it a practical reference for anyone looking to enhance their understanding of UX design principles.
I hope you find these five extensions helpful, and if you have any others that you find useful for designers, please share them in the comments below. For the next topic, I am considering evaluating the Arc browser for UX/UI designers. Have you used Arc before?