Boosting Productivity: Essential Tools For Every UX/UI Designer
This article was previously published at https://www.cobeisfresh.com.
Working with the right tools makes a difference, no matter your profession. Since one of our specialties at COBE is UX/UI design, in this blog post I’ll talk about the most frequently used tools in our design workflow. Whether you’re more into user experience (UX), or user interface (UI) design — or just trying to balance the two — having the right toolstack is the first requirement for a start. Of course, it’s all about working with tools that suit you (and your team) best and help you in your daily work. Some you probably already know of, and some might sound familiar — nevertheless, sit back and relax while I guide you through our COBE design toolstack!
Figma
Figma is our go-to everyday tool for UX/UI design (and basically everything else). We work in Figma in all phases of the design process — from concept and creating wireframes to production design and delivering pixel-perfect, development ready screens. Figma has a prototype functionality, which is great when you need to simulate a flow or create a simple animation. My team loves to use it to create presentations as well. What’s special about Figma is also the real-time collaboration between designers, developers and stakeholders involved in the project. And let’s not forget Fig Jam, which comes in handy for anything (literally).
Last but not least, it’s important to give credit to the Figma Community and plugins. Plugins offer a lot of flexibility in your design workflow, help you design more efficiently, and are real life savers.
At the moment, it counts over 1000 different plugins. Don’t worry, we won’t list all of them. Below are our three personal favourites. Yes, only three. Otherwise we could be writing a book about it.
- Content Reel
We all know how challenging it can get sometimes to find realistic placeholders that will complement the design well enough, right? Content Reel to the rescue! This plugin is like a big content library where you can find photos, texts and icons — basically whatever you need. In case you need custom content for your design, you can even create your own folders and fill them with your own content. Later on, while designing, you can easily add texts and images by selecting a specific frame and applying the plugin. Besides saving time, Content Reel helps you keep consistency and is a good alternative to avoid dummy texts like Lorem Ipsum.
2. Instance Finder
Instance Finder is a popular Figma plugin that helps you locate component instances in designs. With the help of it, you’re able to quickly search for an instance that needs to be updated or replaced, without doing everything manually. Time-wise, this proved especially useful for large files where one instance appears many times, across multiple design screens and pages. Additionally, you can specify where to search for instances — it’s up to you whether that will be a whole file, one page, or perhaps a single frame.
3. Frontitude
Frontitude helps you improve the process of UX writing. It allows you to create copy libraries and one single place for product copy. This way you ensure language consistency, streamline collaboration and increase transparency for everyone involved in the project. Although product copy may not always be your job on the project (depending on the project’s nature and a general agreement with the client), it’s good to know that something like this exists, just in case you need it. It’s available for other design tools as well, not just Figma. So if you’re working with Sketch, for example, you know what to do next.
Other honourable mentions: Contrast, Design Lint, Easing Gradient, Measure, Protopie, Stark, Status Annotations, Style Lens.
Around
Aside from Google Meet, Around is another tool we really love to use for our online meetups. It’s a perfect tool for calls where you have to do active design work in the background. It allows you to simultaneously work in other tools, such as Figma, without taking up a lot of space on your screen. Instead, your meeting buddies float around in bubbles and are always on display — which makes online interaction a bit more real. It’s also a good choice for those of you who don’t have an external monitor. Last but not least, Around has recently joined forces with another tool we love to use — Miro. Let’s see what this duo has in store for us.
Another bonus point: Around comes with a set of camera filters, so in case of a bad-hair or no-make-up day, you’re good to go.
Miro
Miro is an online whiteboard tool which offers a smooth collaboration to remote teams. At COBE, we usually use it for ideation sessions, research and workshops with the clients. What is great about Miro is that it’s not a design tool, but rather a blank canvas that offers many possibilities. It comes with a set of built-in templates you can work with.
After Effects
After Effects is a digital visual effects and video editing tool that comes with the Adobe Creative Cloud licence. We use it mostly to animate icons, illustrations and other vector graphics. Apart from that, this tool is also great for creating videos and other animated content that can bring your marketing activities to another level. All animations you create in After Effects, you can easily use in other apps or transfer to Lottie.
Lottie
We all know that animations contribute to making your content more engaging and interesting. However, they might slow down the application’s performance. To avoid this, I suggest you use Lottie to optimise SVG based animations made in After Effects. That way, the animation becomes a small, compact .json file that takes up way less memory than the original. It works on any platform and can easily be implemented by developers. With the help of Lottie, animations remain scalable without losing quality and getting pixelated.
Protopie
Even though prototyping can be done in Figma, if you’re in a need of a more advanced prototype, Protopie is your go-to tool. It’s easy to use and it can help you turn your ideas into realistic, high-fidelity prototypes. With Protopie, you can prototype for different devices and screen sizes — whether it’s a mobile device or a car dashboard screen. In addition, it’s compatible with Figma. With the help of this plugin, designs can be easily exported from Figma to Protopie.
Linear
Linear is a project management tool that’s specifically designed to help teams track their work and manage any open issues. It provides a simple and intuitive interface which can help your team collaborate, share information and stay on top of each other’s work. It also comes with a lot of different customization options and keyboard shortcuts. When it comes to product development, the main tool we use at COBE is JIRA. However, Linear is the first choice for design-only projects or internal management in general.
Slack
Speaking of communication tools, Slack is probably the one you’re most familiar with. Almost all of our communication at COBE goes through Slack, plus it has some neat features that we can’t go without in our day-to-day work. Slack status, huddles, and integrations with apps like Giphy and Google Calendar are just some of them.
Other Tools
On top of all the tools that I’ve mentioned at this point, there are some less frequently used, but still worth mentioning. Google Docs and Confluence are great for documenting whatever you need to have documented. Google Sheets as well, for any number-related tasks, such as project estimations. Loom for example, is a handy tool you can use to record testing sessions with users. These tools are not required in our everyday tasks, but can be incredibly useful in certain situations. By the way, there are many more, but I will stop myself here.
That’s all folks! I hope you enjoyed this blog post and maybe learned something new about the tools you usually work with. I’ll be a happy designer if I’ve motivated you to step out of your comfort zone and try a completely new tool. 🙂
And if you’re curious about what else we do in our design team or if you simply want to get to know us better, tap here and meet our designers.
