Sketch vs Figma
From Sabrina Martins (UI Designer @leboncoin)
Once upon a (very distant) time, design was carried out on Photoshop. Since then, many tools that are more suited to the web have been created to make our lives easier.
However, there are two stand-out software packages for optimising our designs for the web: Sketch and Figma. Since we migrated to Figma, we decided to take stock of the situation and compare the two packages.
What’s our verdict?
What is Sketch?
Sketch is perhaps the most widespread and well-known vector graphics editor in the industry.
The package was launched in 2010 and was designed to provide specific interface design features that were missing from Photoshop or Illustrator. It is only available on MAC and files are saved in its proprietary .sketch format.
What is Figma?
Figma was founded shortly after the Sketch app came out, in 2014.
It differs from Sketch because of its real-time collaborative approach and the ability to share symbol libraries across all platforms. It is the first comprehensive browser-based interface design tool. This allows teams to design, prototype and gather feedback in one place.
🖼️ The interfaces
Figma and Sketch’s interfaces are almost identical.
By deduction, I think Figma was ‘somewhat inspired’ by its forebearer Sketch in terms of interface design.
Both have the same features:
• Artboards
• “Components” in Figma vs. “Symbols” in Sketch
• Vector design tools
• Grids and pages (named “Frames” in Figma vs “Canvas” in Sketch)
• Keyboard shortcuts (e.g.: O = Oval / R = Rectangle / T= text /…)
💻 Platforms
Figma is accessible on both Windows and Mac and there is a web version, while Sketch is a Mac-only application.
You can access Figma via the browser, unlike Sketch, which is installed locally. Files can also be shared and accessed more easily, as long as you have a good connection.
In fact, there is no offline mode in Figma. This means we cannot easily access our files if the connection is poor or down. It is therefore impossible to work properly.
One point in Figma’s favour it that it is more convenient for our developers, who often work in a Windows environment. Each user can access the source files without having to install anything on their machine.
🚀 Performance and accessibility
In terms of performance, Figma is hyped as the best choice since it runs smoothly even on less efficient computers.
In addition, Figma is a cross-platform application that can be used anywhere in the world, even during lockdown. Another interesting point is that we can import our Sketch files to Figma, whereas the reverse is not possible.
Sketch has its share of malfunctions. Throughout the projects, we noticed that it was quick to start up but appears slower once launched, especially under Abstract.
🔥 Features and functionalities
Sketch and Figma have practically identical features.
As a designer, we need to be efficient, with tools that were designed by designers, for designers.
Figma solved this issue with their “auto-layout” feature, for managing variants within the components (called “symbols” on the Sketch side).
It is worth mentioning that there is a substantial Figma community, which provides us with a wide range of available plug-ins whereas Sketch does not have an effective plug-in range as yet.
Among examples of plugins we really like at Leboncoin : I would mention Document clean and Content Reel.
🎨 Vector Tools
Neither of these applications has such advanced vector tools as Adobe Illustrator.
The basic elements are there: rectangle, ellipse, polygon and freeform vector drawing. They are perfectly adequate for most UX and UI design requirements. This does not mean that you cannot create complex vector illustrations in either of these applications.
Mentie Omotejowho — Figma | Nikola Lazarevic — Sketch
Figma has been our main tool for creating occasional icons and illustrations for some time. You get the usual shapes, but for very complex shapes, we stick with Adobe Illustrator as it is easier and saves time.
🏄♂️ Components or Symbols?
They are called Symbols on Sketch and Components on Figma. These are powerful graphics that can be reused dynamically on multiple mock-ups.
Symbols or Components? We’re close to a tie, but the components on Figma open up many possibilities.
The strength of Figma’s Components lies in the power of its variants and the new “component properties” that were introduced in 2022.
They provide more flexibility and easier library organisation. In short, for the construction of a Design System, Figma is the strongest.
We do find the organisation of the components on Figma more complicated than on Sketch, however.
In fact, UX and UI had to put a solid organisation in place because we don’t have a dedicated page for the components, and they can be saved anywhere. If you are not at least a bit organised, it can soon turn into a hot mess!
⚡Bugs
We have found that the more a team grows, the harder it becomes to work together on a Design System. It creates constraints and sometimes errors.
On Sketch, the files are large and time is wasted waiting for them to load if we have to make changes to mock-ups. Figma on the other hand, is smooth and accessible.
The only issue we have noticed is that when we update an item, it may happen that the label (wording) of the item is erased. This can result in time wasted checking over the templates or repeatedly doing Ctrl+ Z (or versioning). To make up for its shortcomings, we found the Figma Branch system to be effective.
If you are looking for help, feel free to get in touch with the Figma community for news and updates: https://spectrum.chat/figma/general?tab=posts
🤝 Collaboration
At Leboncoin, we are in a digital era, a sharing era, a collaborative era.
Collaboration is one of the most important aspects when comparing two similar tools.
Figma has been very helpful in this area with its incredible real-time collaboration. This is one of the key selling points as a browser-based application.
It also has another feature called multiplayer that allows co-workers not only to edit files, but also to watch someone else work.
What about communication? The built-in comments system is highly effective in simplifying feedback. Sketch, on the other hand, only allows users to collaborate on projects via InVision or Zeplin.
If collaboration matters most to you when it comes to choosing a design tool, Figma is your best bet.
🧑💻 What do the developers and integrators think?
Sources : https://stackshare.io/stackups/figma-vs-sketch
According to popularity ratings, Figma has broader approval thanks in particular to the real-time collaboration and development plug-ins, even though Sketch remains in the lead with Zeplin & InVision. Figma and its inspector allow designers to explicitly provide guidelines (styles, colour palette, etc.), assets, and even CSS, for example.
🎥 Prototyping
Figma added prototyping functionality in mid-2017, with Sketch following suit in early 2018. To date, both applications allow you to create prototypes and share them with others..
How does it work? The two have the basic functionality: links between the artboards, basic transitions such as “move to”, “swipe to”, “navigate to”, tap to”.
Figma got ahead of Sketch with the introduction of overlay. Figma frames are more flexible than Sketch’s rigid structure.
On the sharing side, Figma allows us to share prototypes via a simple link (the benefits of the cloud) whereas with Sketch, we had to import our mock-ups into Zeplin (or InVision) before we could share them with others.
Sketch and Figma are good basic tools for prototyping, but Figma continues to improve and impress us with its interactive components.
If we had to pick one, it would be Figma, because the rendering is more polished and smoother than Sketch.
❤️ Conclusion
We’ve seen that Figma and Sketch provide incredible design features.
We have compared a few factors to help you decide which one is best for you. With a little curiosity, you’ll be able to find more documentation to help you explore all the tools’ features and make your choice.
We have a big crush for Figma. It has many functional plus points, and it is constantly improving thanks to a broad community.
As the crossover is ongoing, we are still using Sketch X Abstract as an option for retrieving the remaining screens we need to migrate to Figma.
References
- Sketch :
https://www.sketch.com/
https://www.sketch.com/community/
https://www.sketch.com/extensions/plugins/
https://www.sketch.com/docs/
- Figma :
https://www.figma.com/
https://www.figma.com/community
https://help.figma.com/hc/en-us/categories/360002042553-Using-Figma
https://www.figma.com/blog/introducing-figma-plugins/
Tutorial: https://www.youtube.com/watch?v=e68PKFYWfoQ
