Figma – my new favourite
I remember the days when designers used Photoshop for web design. Layers were turned on and off to export different page types, and the deliverable to developers was often a zipped folder full of images. Fortunately, technology has advanced rapidly, and programs specifically designed for digital design are being released at a steady pace.
My latest favourite tool is Figma. I was a bit hesitant at first since I had used Adobe XD for years and was very comfortable with it. But a new client project required Figma, so I had to dive into the world of Figma.
The tools are quite similar, both tailored for UX/UI design. However, it took me a little time to get used to the new shortcuts and develop a workflow that suited me. But once everything clicked, I realised just how powerful Figma is and how many cool things you can do with it!
My five Figma favourites
Here are a few things I particularly love about Figma:
1. Collaboration
When the pandemic hit, it forced us to take a much-needed leap forward in collaboration, and technology really had to prove its worth. The collaboration feature is actually what I like most about Figma.
Figma is a web-based tool, which means you can use it directly in your browser. This makes it easy to collaborate across different team roles by simply sharing a link. Your copywriter colleague can fill the design mockups with great content, and developers can jump in to grab images, colours, and code snippets. Collaboration in the files happens in real-time, much like Google Docs, so you can see what your team members are working on.
You can, of course, set different permissions for those you invite to the file to ensure that no one accidentally deletes all the components you've built. But if that does happen, there’s a built-in version control system that makes it easy to restore your files.
2. Structure
Another thing I really appreciate about Figma is the ability to organise your files efficiently. Everything your team works on is collected in one place. You never have to figure out who on the team has the project file on their computer or try to find the latest version—Figma handles that for you. Additionally, it's easy to break down each project into smaller parts while still keeping everything in one place. This not only simplifies daily work but also makes it easy for new team members to find the right files to start working on.
3. Prototyping
Creating powerful prototypes is super easy with Figma’s built-in features. With relatively little effort, you can even create impactful animations. This is perfect for conveying your vision when handing over designs to developers. It’s always easier to show an animation example than to try and explain how you want something to feel.
To make the experience even more “real,” you can choose which device your prototype will be displayed on. You can also connect your prototype to a real device, which is helpful when conducting user tests for apps, for example. Actions like “swipe” can then be tested—something that’s harder to test on a computer.
4. Complexity
Figma has the potential to be used throughout the entire design process, from concept sketches and wireframes to detailed UI design where the prototyping function enables easy user testing. With Figma’s built-in comment feature, you can smoothly iterate solutions with direct feedback from the client.
Another powerful feature is the use of components—reusable elements. These components can also be made responsive using the “auto-layout” function. So, when you change the width of your component, all parts will adjust accordingly based on the rules you've set in Figma. This is perfect when working on websites that need to function on mobile, tablet, and desktop.
5. Plugins
To further streamline your work, there are a ton of useful plugins! Here are a few of my most frequently used:
Unsplash
An image library you can use to fill your designs with beautiful pictures. Figma also resizes the image depending on the element you choose to add it to.
Lorem ipsum
If you work in web design, you’re probably familiar with Lorem Ipsum. It’s placeholder text you can use to fill out your design before the real content is ready.
Feather icons/material icons
Two different design libraries that load SVG icons directly into your Figma file.
Contrast checker
I always try to ensure that all projects I work on have sufficient contrast values so that all content is visible. This tool is perfect because it helps check the contrast values of all your design elements.
Drawbacks?
Of course, there are features I miss, but despite that, Figma is still my favourite tool for web and app design. I hope to dive even deeper into all of Figma's features so that one day I can call myself Esatto's Figma ninja!
