Figma vs Sketch - How choosing one tool saved us 6.8K USD a year
Both tools are top of line so why are people switching from Sketch to Figma? And why did we decide to do so in MasterBorn?
Jun 3, 2021 | 13 min read
Figma is a collaborative design tool that brings together teams and helps them design complex digital products. It was created in 2016 as a tool without borders and silos - its unique feature is that anyone can contribute to the design process at any given time thanks to the convenience of a cloud-based environment.
While it’s relatively new, it has taken the design world by storm after quickly overcoming the ‘childhood diseases’ that often hinder the growth of new, groundbreaking solutions. In a sense, Figma did for design what Google Docs did for word processing.
In the very beginning, Figma was a purely web-based application, which made it extremely easy to use in a browser, without the need to download and install desktop applications. This made it lighter and more hassle-free for designers who like simplicity and flexibility. However, in 2019 the company recognized the need of some of its users and launched a native application that competes directly with some of its biggest rivals, including Sketch.
One of the major advantages of the browser-based design tool is that it works on any platform: Macs, Windows PCs, Linux machines, and even Chromebooks. By keeping the user experience simple and intuitive, Figma allows even inexperienced designers to start using it without a lot of training. In that sense, it is a big step forward for the UX community in the area of the tools they use themselves every day.
The company also offers designers a platform allowing them to publish their work, find files and plugins made just for Figma.
Figma case study: Virta Health, a San Francisco-based start-up, has used Figma to help scale its team and get new designers up to speed fast. Some of the newcomers were able to learn the tool without training and get up to speed easily. This is one of the advantages of the application. Read more.
Sketch is a design tool that defined the 2010-20 decade. It became the absolute market leader and elevated the work of UX and UI teams to the next level. Created by Bohemian Coding in 2010, the application did not have an easy start. It competed in a rough market with established solutions that now look outdated and clumsy, yet 11 years ago were a gold standard.
The biggest change that Sketch offered was getting rid of unnecessary features that other design solutions were packed with. At the same time, it perfected the really useful one, which made it very appealing to creative millennials who rejected clutter and cognitive overload.
An interesting feature of Sketch was nondestructive editing. This means that images can be freely modified without permanently damaging them - any visual asset can be reverted back to its previous state whenever this is required.
Exporting capabilities were another great advantage of the application. It allowed sharing designs with developers in a form of CSS attributes. This significantly impacted the dynamics of software development teams who could communicate more directly by bridging the gap of often antagonized groups of ‘creatives’ and ‘engineers’.
Even though Sketch is available on Mac only, it is now used by over one million people globally, and - according to the official website - there are no plans to roll it out to other platforms. It is a drawback especially for designers who are not able to use Apple devices due to corporate policies or financial reasons.
In my opinion, Sketch has revolutionized the design world and made pixel-perfect work easier than ever. I admit that I wouldn’t be the designer I am now without it.
The differences in interfaces between Figma and Sketch are not dramatic. This is most probably due to Figma’s strategy that assumes bringing innovation without eliminating their successful core competencies. It seems that the creators of the newer solution understood that tweaks and improvements will make its interface appealing to existing Sketch users and allow them to switch easily. A revolution would make it much less likely.
Now let’s take a look into a detailed comparison of Figma and Sketch. I will compare the tools in 6 different categories and add my subjective final verdict at the end.
In essence, both applications have really great interfaces and in terms of basic functionalities, they are close to optimum. Switching between the interfaces was not a shock for me. They are both quite intuitive and self-explanatory.
What makes Figma stand out here are the additions.
The inspect panel in Figma is easier to operate and improves the overall quality of the development process. When we used Sketch in the past we had to use a separate tool and from the designer’s perspective, there was a lot of manual work. In Figma, it’s fully automated and the handover to developers is seamless, which saves time and reduces the number of errors.
The collaboration with clients is also much easier in Figma. While it was possible in the past, designers using Sketch had to export their work to web applications such as InVision to demonstrate and gather feedback from others. This was an additional step and made work more complicated. Fewer tools especially help non-technical team members and users get on board more quickly.
A tie. Both tools perfectly do what they were created to do. The difference is in the details - or as we call it the ‘nice-to-haves’. These small things are not game changers, so you will likely be equally happy with either of the two interfaces as a designer.
Plugins are one of the defining features of the modern software industry. Remember the old-school, monolithic, and closed applications that only changed when the company behind it decided to add something new to their program? It often took ages and slowed down the evolution of solutions.
Opening applications to add-ons and additional components energized the whole software development industry. What I find great is the community-driven plugin ecosystem where anybody can contribute. A 3D illustration library? It’s there. A customizable UX chart - just click and install.
Both Figma and Sketch offer a plethora of add-ons, plugins, design collections, and kits. It is quite probable that you will find the same or similar additional content for both tools. The one big difference is that it's much easier to find and install them in Figma from the level of the application (no need to look for them on your own). The updates to all plugins also automatically install themselves.
Figma rules. It is as simple as it gets in terms of plugins and add-ons. There’s no doubt about it and while technically both applications can be expanded with similar add-ons, Sketch makes your life way more complicated.
Modern software design and development is complex. Both the time-to-market and quality of a product depend on the effective collaboration of teams. This has become even more complex in the time of lockdown and remote work. With minimum face-to-face contact, team members are fully dependent on effective tools.
Figma is light years ahead of all its competitors as far as collaboration is concerned. It’s brilliant for larger teams and allows multiple UX/UI specialists, but also product owners, developers, or managers, to join the design process.
What is even more appealing is that all the work is automatically saved in the cloud without the necessity of sending files, downloading them, and merging multiple versions into one (which can be problematic if two or more users make changes to the project independently). This “single version of the truth” is a great feature.
Sketch still offers a more traditional, native-based approach, but is trying to keep up. It is currently developing an online collaboration functionality and beta testing it. Being a popular and well-financed piece of software, it will probably soon catch up with Figma, at least in some respects.
Get informed about the most interesting MasterBorn news.
It all depends on the specificity of your work. For designers who have to switch between projects, collaborate and share their work on a day-to-day basis, Figma is a natural choice. However, if you are working on one project only, predominantly independently, Sketch will do the job quite well.
Also… let’s face it. The pandemic changed everything. It disrupted the way we work, and teams are now more remote and distributed, almost over night. It seems there is no coming back and Figma fits this zeitgeist perfectly.
The community has always been very important for software developers and designers. While originality matters, many solutions are already in place and there is no need to reinvent the wheel, so sharing comes naturally. With thousands of contributors around the world, both Figma and Sketch offer strong group support.
An interesting approach to community building is offered by Sketch, as it strongly promotes physical meetings. For those interested in talking face to face and collaborating, the Sketch community website offers a search engine to help you find local groups and events. You can also become a Sketch Ambassador and Sketch Advocate for additional perks and benefits.
Being a cloud-based and online tool by definition, Figma puts more emphasis on building a remote community. For instance, Figma’s blog, that describes every feature, is much more detailed and clear than Sketch’s. Of course, it also offers offline activities for those who value personal interaction.
All in all, both communities are similar. There is a lot of pro-bono work being done and leaders can be found around the world.
Switching from Sketch to Figma community.
Josh Dunsterville first built one of Sketch’s largest communities and then switched to a Figma tribe. One of the reasons was that Figma is more inclusive and open - you don’t need a Mac to participate. A simple Chromebook is enough. Read more.
Sketch, available only for macOS, is a product of an Apple-oriented mindset and this exclusivity may have been one of the pillars of its success. Bearing in mind that Steve Jobs and his successors have put a strong emphasis on design, its devices became a natural choice for designers. And so, by extension, Sketch became one too.
This one-platform approach assured its powerful capabilities and close integration with Mac’s operating system and relieved Sketch’s creators from distractions in the form of a Windows version. But it also has drawbacks. In a line of work that requires us to constantly share the results of our work with our clients or other team members, the OS restrictions mean that we have to use external tools to export our designs and show them to others.
Figma’s platform independence is truly refreshing. Because it’s primarily web-based, it allows the users of Windows machines to access it easily. Even Linux is supported and this makes some front-end developers very happy! Also, in a start-up environment where things are lean, flexible, and fast-paced, access from any computer is simply life-changing.
There are two drawbacks of designs being accessible only through the web. First, is that cloud storage means that in some cases your projects can’t be accessed due to a lack of internet. Provider downtimes, lack of coverage, router problems - you name it. It can all prevent you from working with Figma. Secondly, some more nosy people with access to your project may tend to comment on your work every fifteen minutes, even when you’re experimenting. I’ve been there, believe me ;-)
If your product team works on many platforms, and your team does not only consist of designers but also Project Managers, Marketers, HR Managers - you should go with Figma. It will make your life easier. For more independence, Mac-oriented designers, Sketch is absolutely fine.
Money matters for most of us, so let’s take a look.
Unfortunately, the pricing models of Figma and Sketch are a bit different, so a direct comparison is not straightforward.
In any price list, we always look for a price per seat (or user). On the face of it, Sketch is cheaper with a $9/seat/month fee ($99 per year). Figma is significantly more expensive at $15/seat/month ($144 per year). But things are more complicated if we look at the details.
Figma’s free version allows for unlimited files in drafts, unlimited viewers and commenters, and unlimited editors on 3 team files. This is great because our clients at MasterBorn have free access to the designs and can comment without restrictions.
When we used Sketch in the past, we had to invest in other tools too. We used Invision for our presentations and commenting ($22/seat/month) and Zeplin for handoffs ($12/seat/month). This generated huge costs in our case and was a burden on the overall budget of the projects. Switching from a combo of Sketch, Zeplin, and Invision to a 4-seat Figma + free unlimited viewers reduced our annual invoices from $7,784 to $900! This means we saved $6.8k annually. Whoop- whoop Figma!
In my opinion, budget-wise, Figma is a no-brainer. It helped us reduce our annual expenses significantly, which has had an impact on the overall cost of development at MasterBorn. The start-ups we work with also love it because it reduces their initial costs.
After reading our long-ish analysis you probably are not surprised that the winner is… Figma. Let’s sum up why:
It’s platform-independent, which means anybody can use it on Macs, Windows computers, and even Linux OS.
It’s cloud-based, which means all files are available anytime, anywhere.
Figma’s interface is as good as Sketch’s.
Even though Figma is much younger, it already has a thriving community.
Handoffs to developers are easier with Figma.
At MasterBorn, using Figma reduced our toolbox costs by 90%.
We wouldn’t be promoting Figma over Sketch if we hadn’t tried it ourselves. It’s so much easier to collaborate, and share and access the designs once we made the switch. No uploads and no downloads mean that all we need to do is to send a link. An additional bonus of a common cloud-based file is that we work on only one version of the truth.
At MasterBorn, Figma improved project management and made my work much more effective and pleasant.
Figma can be used in both small and large-scale projects. It is especially useful in an MVP phase, where flexibility, agility, and constant collaboration with the client are essential. It’s easy to learn Figma on your own, so your team members can be up and running in no time.
I personally love this tool and highly recommend you give it a try!
Table of Content
- What is Figma?
- What is Sketch?
- Figma vs Sketch: what's the difference?
- Figma vs Sketch - Interface
- Inspect mode
- Comments and read-only mode
- The verdict
- Figma vs Sketch - Plugins and components
- The verdict
- Figma vs Sketch - Teamwork
- The verdict
- Figma vs Sketch - Community
- The verdict:
- Figma vs Sketch - Operating system
- The verdict
- Figma vs Sketch - Money
- Figma vs Sketch - the verdict
- Who is Figma for?
World-class React & Node.js experts
Case Study: How We Created a Self-Hosted Solution Able to Handle Billions of Events
Find out how to receive, process, and save thousands of events continuously based on our client's product.
Design systems: the benefits for start-ups and product teams
Design systems are gaining traction in the product development world, but they’re still a novelty for many CEOs. Read on and stay on top of industry trends!
Ksana Health Case Study: How I created designs that got featured in TechCrunch
Here’s an in-depth, detailed, step-by-step study of how Asia created web designs for Ksana - a mental health startup from Oregon.