How We Switched from Sketch to Figma

Our decision-making process to a better design tool

When I was 7 years old, my dad brought home our first family computer. Not knowing what to do with this fancy new toy, I played around with different programs on the computer and discovered Microsoft Paint. I was amazed I could create anything I imagined. I would come home from school, turn on the computer, and create my next masterpiece (none of it was ever really good but I did paint a cool manatee once). This was an early introduction to my career working with design software.

Design software is constantly evolving with the needs and demands of the industry. Designers might have never imagined what innovations would lie ahead before the evolution of the Web in the ’90s. As the digital landscape evolves to meet the needs and demands of the industry, we are able to push the limits of how we create, thus propelling us to constantly learn, grow, and adapt.

Photoshop was my go-to tool for Product Design until Sketch came along. Sketch changed the way we worked because it was lightweight and efficient, which made a world of a difference in my workflow. However, our team at Bleacher Report was quickly growing, so we needed to find ways to increase our performance, transparency, and collaboration across the product team.

In total, we used 8 separate tools to design, prototype, deliver specs and get feedback. Although each tool by itself was purposeful, key problems began to surface when we switched between multiple tools to complete a single project.

Key Problems

1. While each tool would generate a ton of feedback, communication would get lost between tools, making it difficult to keep track.
2. Designers would have to export and upload files to get feedback in Basecamp or Wake, which meant designers couldn’t get feedback as quickly or efficiently as possible.
3. We didn’t have an efficient way to do real-time collaboration and brainstorming with our remote team.
4. Depending on the design phase, multiple artifacts were generated for a single project, so it was difficult to know where the single source of truth was.
5. Design iterations meant the uploaded files and links became lost or obsolete, so stakeholders didn’t know if they were looking at the most up to date version.

Needless to say, we needed a tool that was more agile so we could streamline communication between the team and stakeholders, tighten our feedback loops, and reduce the number of overall tools the team used.

Once we began to explore Figma as a possible tool replacement, we quickly realized that Figma was like the Emerald City of design tools.

What caught our attention

• Real-time collaboration
• Instant feedback loops
• Smarter design system libraries
• One tool to rule them all (you can design, prototype, and spec in Figma)

We knew Figma had a lot to offer, but switching design tools is a serious thing to consider because it disrupts your teams’ workflow and can be costly. We wanted to make sure that we were replacing our design tools for the right reasons. Thus we began our journey into exploring whether Figma was the right tool for our design team at Bleacher Report.

Here’s how we decided if Figma was right for us:

Start with Why

Understanding why your team needs new tooling is crucial. Is there something in your process that is lacking or creating obstacles that this tool will fix? Is your current tool working, but you just need to improve your process?

For our team at Bleacher Report, we needed to close those feedback loops quicker, consolidate our tools so we didn’t have to figure out where to go to review work and be able to produce work with greater velocity. Consider what your team needs, how the tool might fit, and what you are looking to gain from a new design tool that you don’t already have.

Know Your Players

Changing a tool for your design team affects more than just designers since PMs, Engineers, and Key Stakeholders are integral to your process. How is a Product Manager going to give quicker feedback in Figma versus the tools we already use? Would switching to Figma impede an Engineer’s ability to code based on our specs?

Design is a team sport and knowing who your players are will help your evaluation stay on track.

By involving others in the evaluation process, you develop an environment for co-creation. This will increase the likelihood of buy-in and acceptance once the tool change is officially made. Get the design team involved, but involve other stakeholders and contributors who may be interacting with the tool as well.

Find our Design Tool Evaluation Template here

Evaluating Different Features

I set up an initial evaluation to dig into Figma’s features with the Product, Design, and Engineering teams. We compared Figma to the tool counterpart that we were already using. For example, comparing Figma to Sketch when evaluating it as a design tool and comparing Figma to InVision when evaluating it as a prototyping tool. Each member of the team was assigned a different aspect of Figma’s features.

Features we wanted to learn about:

• Styles, including Design System Management, and Component Libraries
• Design Tools
• Prototyping
• Streamlining Communication
• Developer Tools
• API, Plugins, and Integrations

What we considered when evaluating:

• Reliability — How reliable is this tool?
• Ease of Use — How intuitive is the tool or is there a learning curve?
• Velocity — How quickly can I get the typical tasks done?
• Features — Does it have the minimum features compared to the current tool? What can’t we live without?
• Utility — What are the features we can utilize to improve our process?

Putting it to the Test

Once we got a bird’s eye view of how Figma compared to our other tools, it seemed promising. As Product Designers, it made sense for us to set up a usability test for Figma. Our goal was to design a new module while using existing elements of design from Sketch to understand how easy Figma would be for designing, prototyping, collaboration, and development. Designers were given a scenario and 12 tasks to complete in addition to some follow-up questions on whether or not we should move forward with Figma.

Find our Figma Test Plan Template here

Some of the tasks performed:

• Importing fonts and Sketch files
• Using the design and prototyping tools
• Completing tasks offline
• Using the component library
• Getting feedback
• Delivering to engineers

And finally we wanted to know:

• Overall thoughts on the tool?
• What would you change, add, or improve about Figma?
• Did you find any workarounds for problems that came up?
• Final thoughts on moving forward with Figma?

Synthesize Results

I synthesized all the tests from 6 designers and 5 product managers and added insights into a key findings report. I thought after both the tool evaluation and test plan we would have a clear answer as to whether we should adopt Figma. However, that was not the case. When it came to whether or not we should move forward with Figma, results were not100% conclusive, but I felt like we were getting closer.

Weigh your Pros and Cons

Go back to “why.” Why are you considering adopting a new tool and what’s really important to you and your team? Take a look at the trade-offs of what you will be gaining or losing by transitioning to a new tool.

The bottom line is:

• If you care about maturity, stick with Sketch.
• If you care about collaboration, velocity, and an all-in-one tool, use Figma.

That being said, Figma has made great strides improving their product by adding new features constantly and launching Figma plugins! Game changer!

Ask Around

Figma has been adopted by various companies such as Twitter, Dropbox, Zoom, GitHub, and Square, to name a few. Reach out to folks who have experience using Figma and ask why they decided to make the switch and how they use it on their team.

We met with the Design Manager at Asana who recently transitioned her team from Sketch to Figma. We wanted to find out how her team used Figma and what pain points they encountered. It was so helpful to hear Asana’s experience with Figma because after knowing how much it improved their team and workflow, it really cemented our decision to move forward.

Moving Forward

We’ve done our homework and now it was time to make a decision. Did our pros outweigh the cons? The answer was an enthusiastic yes! We loved Figma and how much more efficient it was at getting the job done. It seemed like a no-brainer. Once we knew we wanted to move forward with Figma, we began drafting a plan on how to transition from Sketch to Figma.

Some things you might consider are whether to rebuild your component library in Figma before transitioning. This will help expedite design because not every Sketch component, icon, or vector will import correctly. Think about what the bare minimum is needed to get your team to start taking on projects in Figma. You can always build more on top of that while designers are adjusting and learning the tool.

While the process we set up has worked for our team at Bleacher Report so far, we are still learning and evolving. Going through each step of our tool adoption evaluation was very helpful in ensuring we did our due diligence and incorporated key stakeholders. However, each design team will have different needs for their own team. Perhaps you are working as a consultant or at a start-up. You might not need to review with as many stakeholders and therefore can make a decision in fewer steps. Pick and choose elements of this process that make the most sense for your team.

As our team continues to grow and evolve, we know now that Figma is the tool that is built to help us scale. If you’re in the process of switching your team’s design tools or are considering adopting Figma, we’d love to hear how you’re doing it.

Want to be part of our squad? We’re hiring! Reach out to marie.shatara@bleacherreport.com to learn more.