Breaking up is hard

How our design team ditched our prior workflow for Figma

Introduction

As a designer, your tools have a huge impact on your team’s workflow and efficiency. Up until recently, my team utilized three apps: Sketch (for designs and components), Abstract (for version control and collaboration), and Zeplin (for collaboration and developer hand-off). While each tool was powerful for its individual use case, using multiple tools made our workflow complex and difficult to manage, and as our team grew, the shortcomings of our process became progressively clear. We were initially hesitant towards committing to switching tools, but the upcoming company rebrand posed the perfect opportunity for our team to explore other options because we would have to update all of our components and screens anyways. In this article, I will walk you through the process of how our team came to the decision to adopt Figma and abandon Sketch, Abstract, and Zeplin.

Process

To kick off the process, I first sent a survey to identify our team’s pain points with our current tools/workflow. I then consolidated the responses and identified the most common themes to be:

• Lack of documentation on specifications
• Difficulty keeping track of who is working on what
• Difficulty keeping track of component and screen versions
• Issues with accidentally deleting files in Abstract when merging a branch
• Sketch and Abstract are slow when opening large files
• Difficulty finding specific screens in Zeplin and understanding the flow from one screen to the next

Using this feedback, I searched for design tools that could potentially solve our problems. The tools I researched included AdobeXD, Figma, Axure, Marvel, Webflow, UXPin, Origami, Principle, Proto.io, Protopie, JustInMind, and Invision Studio (you can read more about brief analysis of each tool here). Overall, our team was most interested in finding a tool that was great for collaboration, version control/documentation, and component management.

After a lot of researching and consideration, I officially narrowed down the new tool options to Figma and AdobeXD (though shortly into testing AdobeXD our team noticed some pretty important limitations with component responsiveness and decided to only continue testing with Figma). Ideally, our team would have tried out out more than just those two tools, but we needed to be efficient with our time and it was important for multiple designers to try a new tool together since collaboration was the most important feature for us to test.

To test out Figma, we collaborated on a Figma project where we each built several screens to experiment with applying the new brand design to our product. We also handed off the finalized brand designs to the front-end developers in order to receive feedback on their experience with using Figma. While my team tried out Figma, I created a survey for each designer to fill out when critiquing the new tool. In order to help everyone prioritize what was most important to our team when rating the new tool, I also created a list of categories (Version Control, UI/UX design, Sharing and Collaborating, Prototyping Ability, Component Management, Ease of Learning) and their features that our team then ranked from most to least important.

We then used this rubric to rate Sketch and Figma from 1–5 in each category in the survey. I decided to include Sketch in the survey to help standardize people’s responses and to directly compare the two design tools to one another.

Conclusion

After this process my team officially switched to Figma. We concluded that Figma had better version control, collaboration, and prototyping ability than Sketch and that both were matched in component management and UI/UX design. The only category Sketch ranked higher in was in ease of learning, but it’s generally expected that learning a new tool is more difficult especially when it has more features. We also unanimously concluded to not only replace Sketch with Figma, but to also remove Zeplin and Abstract from our workflow since Figma already has features for collaboration and hand off.

So far the switch has gone smoothly, and our team has enjoyed how much easier collaboration and version control have been. The biggest pain point so far has been with building components since Sketch’s use of constraints and smart layout to make responsive components is conceptually different from Figma’s use of frames, auto layout and grouping. And although Figma has solved a lot of our problems, some of our issues stemmed from lack of guidelines (such as in file organization and naming conventions) and handoff communication, which our team is working towards improving.