Unique workflows and pain points at a company often require bespoke software solutions, while there are tasks that can be carried out without serious compromises using off-the-shelf applications. Nonetheless, careful consideration is always essential when choosing a new off-the-shelf tool for your company.
As potential help and inspiration for decision makers, we would like to showcase our thought process about finding a new application for our organization. We decided to explore new tools for UI and UX design, handoff, prototyping, and collaboration. We asked Brigitte, our UI and UX expert about her research and considerations on picking the most suitable application for our goals and projects.
The primary step of choosing a new application is always determining what your company exactly needs. What were the criteria needed to be considered when choosing the right tool for our projects?
For us, the main focus was to avoid jumping between tools, to be able to design, prototype, share, and collect feedback, all in one. We were looking for a tool that is easy to learn and intuitive to use, for both colleagues and clients.
Ensuring design consistency in my work (using reusable design systems shared across the whole team) was also a must. We needed an application that can bring my ideas to life using prototypes to test concepts. Real-time testing on my phone for mobile applications and responsive interfaces was also an essential feature.
Additionally, I need to be able to share my designs and collaborate with others involved in the projects including real-time co-design and getting feedback. I also have to be able to generate design specs for developers and accurately export assets.
The next step is charting the available solutions and checking if they fit to the predefined needs. Which were the applications you considered; and which are the applications worth mentioning when choosing a handoff/prototyping/collaboration tool?
Like with most tools, it depends very much on your situation, your project and your team, as they all have their advantages and limitations.
We are currently using Sketch for the design stage and InVision as our prototyping and handoff tool. But our mission was to switch to an all-in-one platform that could significantly streamline project workflows.
According to UXTools’ 2019 survey, Zeplin, Figma, InVision and Adobe XD were the most used handoff tools last year. But only two of them are also strong design tools and offer prototyping features: Figma and Adobe XD. These were the two contenders I researched the most.
In addition to the above-mentioned criteria what were you looking for as a designer for example regarding the features offered by the apps and the user experience of the tool?
Transitioning to the right tool (in our case, switching from two tools to one) requires some careful consideration. From a usability point of view, both platforms provide a very robust set of design and collaboration tools. Their features are very similar, and they are both very popular among UI designers, although Figma has twice as many users as Adobe XD.
Making sure our new tool runs on several operating systems was also a must-have. Adobe XD has versions for Mac and Windows, while Figma supports Mac, Windows, Linux, and Chrome OS.
In the end, it came to a matter of compatibility. I had to ensure being able to migrate all our projects from our current design tool Sketch to our new platform. Unfortunately, Sketch files can be exported to Adobe XD but not the other way around. That’s the main reason I chose Figma.
And how do you feel about changing your design tool, not only the handoff tool?
I recently read in an article “the tools we use shape the work we do”, and I couldn’t agree more. Many designers are switching from Sketch to Figma, the main reason being that Figma is built for the entire product design workflow. Jumping between design and handoff tools means that sometimes, by the time screens and assets were exported, designs were already outdated. With Figma, I won’t have to wait until my design is nearly finished before sharing it with the developers.
Arranging multiple developer handoffs will result in a better collaboration and more efficient implementations.
However, changing our primary work tool will cause a bit of inconvenience at first, no matter how much better the new tool is. It’s simply a matter of habit and muscle memory.
What are the features offered for the developers?
Communication between designers and developers is a critical part of the product development process, especially during the developer handoff. In the design process, every choice I make is intentional. But it’s equally as important to clearly communicate these meaningful choices to the development team so that they can implement them correctly. Colors, styles, measurements and behaviors determine how the design looks, works and feels to the user. That’s why it is critical for designers and developers to be on the same page.
Design specs align everyone and are used by developers to implement the design. Being able to visualize and collect them bridges the gap between prototype and development. Handoff tools allow developers to inspect the elements and copy their properties. Some tools offer a wider range of code languages to choose from, others only display the specs in plain code. Figma’s choices include CSS, Android and iOS.
A great Figma tool for developers is “Copy as SVG Code”. This works great for icons and shapes and saves designers a significant amount of time.
How well can Figma be used as a presentation tool for example when introducing screens and workflow to the team and to present the designs to clients?
If a picture is worth a thousand words, a prototype is worth a thousand meetings. It is the best way to showcase a design since it replicates how users might interact with the interface. Figma offers a prototyping tool of its own, but it also offers a ton of integrations with prototyping and user testing tools such as Maze, ProtoPie and Useberry.
For team presentations, a great feature is Figma’s observation mode. If more than one person is looking at a design file, you can click on their avatar and you’ll see each movement they make, from updating text in a frame to clicking their cursor on an object. This feature is amazing for design critiques, getting feedback from colleagues and running user tests in real time.
As for client meetings, I believe driving customer engagement through user experience is important. Allowing them to navigate through a tangible prototype on a real device is game-changing when designing an app or a mobile interface.
How do you feel about the transition to Figma so far? Do you have any advice for professionals who are in the same shoes as you are?
The more I use Figma, the more reasons I find to like it. If you’re in a similar position, my advice is to put in the research, spend time with your new tool beforehand and embrace the journey.
As we begin to dive into a massive project, I was determined to make the switch either before or during the design process. I found that the most effortless stage to do so was the wireframing process. It allowed me to learn through repetition while using basic tools and gradually getting more comfortable with Figma’s interface. Once I overcame the steeper learning curve, I realized Figma has all we need to be efficient, productive and collaborative inside our company.
Note: In the article several product names were referred to, which are trademarks and registered trademarks of their respective owners. All product names used in this article are for identification purposes only.
