Widely used in web design, Sketch is a software tool used to create UI and UX components. It was released in 2010 and soon became extremely popular among product designers, having received an Apple Design Award in 2012. One of the most significant advantages is how user-friendly and intuitive this tool is, thus being broadly used by beginners or experienced product designers.
It did not take long until other web design apps, like Figma and Adobe XD, started making their way as strong Sketch competitors. Introduced in 2016, Figma is a cloud-based interface design tool in which users can easily collaborate and contribute to a project.
Throughout the last years, there has been a notorious growth of UI design tools. Not only are there more apps available, but they are also getting more competitive by introducing new features and adapting to designers' complex (and diverse) needs.
In order to provide an outstanding and valuable product, it is essential to be familiar with the various steps of the product design process. In that sense, most product designers are not exclusively dependent on only one app to fulfil different purposes, but rather on several tools that complement each other. Therefore, it is not uncommon for designers to use both Figma and Sketch: their choice often depends on how each app performs a specific task.
According to a study developed in 2020, 1975 respondents out of 4100 use Figma as a primary tool, making it the number one tool for interface design. In the second place, the mainly used interface design tool is Sketch (with 1152 participants using it as a primary tool).
Keep reading to find out the main differences between Figma and Sketch concerning compatibility, pricing, and features both apps deliver.
Regarding compatibility, Sketch is only compatible with macOS operating system. There is a Windows app through which it is possible to interpret Sketch files; however, a Mac device is inherently required to work and edit design files.
On the other hand, it is possible to work with Figma on any operating system (macOS, Windows and Linux) that runs a web browser. Despite having greater availability than Sketch, Figma might be a problematic solution for designers that also need to work offline. Even though it is possible to work with Figma without an internet connection, not all the functionalities are available. Plus, designers have to be careful and remember to keep saving the file since it will not do it automatically (as it happens when the user is online).
For those starting or working in small teams, Figma offers a free version. This version allows two people to edit a document at once and has an unlimited number of viewers. Moreover, it can handle up to three projects and provides unlimited cloud storage. However, for larger teams with several projects at hands, the professional version costs 12$/month per editor. In addition to the free version's perks, the professional one handles unlimited projects, provides custom file/user permissions and shareable team libraries. Last but not least, there is also an organization version available. This version further includes SSO + advanced security, design system analytics, plugin administration, among other advantages.
Unlike Figma, Sketch does not offer a free version. Nonetheless, they provide a one-time payment of 99$ (optional renewal is 79$ per year) that includes all the features plus a year's worth of updates. For Sketch Teams, the pricing requires a monthly subscription of 9$ per editor. This subscription covers the Mac app and a shared Cloud workspace for collaboration. Furthermore, both Figma and Sketch have discounts for students and educators.
Sketch and Figma share similar features with different variants. Even though both tools might be able to do the same, they may surpass each other in the way they do it.
Styles
Styles are crucial elements of a design system. Designers can save styles that correspond to a set of design elements and apply them across the boards. This feature can save precious time, especially when developing more extensive projects.
Figma's styles follow a cascade approach. In other words, the user can create and save styles for various elements (text, colours, and effects) and afterwards mix and match them with other sets of elements. This means that elements are independent of the style, and the same style can easily have, for instance, a different text block or colour. This ability makes Figma more flexible than Sketch.
In Sketch, the elements are established for each style. The app has two types of styles: text or layer. Text styles include text elements such as colours, effects and fonts. On the other hand, layer styles integrate layer elements such as borders, effects, and fills. However, Sketch's latest versions already allow the user to edit symbols for elements within styles.
Symbols and Components
Sketch and Figma include symbol elements that can be replicated across pages and simultaneously edited, sparing the trouble to change one by one when needed. Nonetheless, the way those symbols' operations are executed varies.
Whenever a new symbol (e.g. icon, button) is created in Sketch, its original version goes to the "Symbols Page". Any modifications made in the Symbols Page automatically applies to every occurrence of that element throughout the project.
In Figma, a symbol corresponds to a component. Unlike Sketch, this tool does not include a separate page for components. Instead, the original master component stays in place and, to create a new one, the user simply needs to copy it. Since the components are streamlined, when the master one is edited, then every instance also updates.
Vector Tools
Even though both Sketch and Figma have great tools for designing elements, they do not compete with other software options made explicitly for vector drawing, such as Adobe Illustrator. Hence, as previously mentioned, it is common for product designers to use several software tools.
Both interface apps provide users with a free form vector tool, as well as shape tools (rectangle, polygon, and ellipse) and boolean operations. These capabilities allow designers to handle design challenges and be creative regarding interface designs.
When using Sketch's vector tool, designers need to combine and string points together. Both apps allow for different types of points, which in Sketch can be straight, mirrored, disconnected, or asymmetric. Similarly, in Figma, the lines can either be straight or curved (using the Bend tool). Figma and Sketch's vector features are almost at the same level, although Sketch might have a slight advantage since it can draw vectors with more rigour and detail.
Contrarily, Figma is not as precise when it comes to editing vectors and respective points.
However, Figma's vector networks allow designers to connect several lines at a single point. Plus, to plot and shape additional points, we can also use the Pen Tool. All in all, the most significant benefit is that when using Figma's Vector Networks, the designer can work in different directions without having to split a path object. Consequently, design objects can be created within the same object, making the drawing process faster than traditional vector path tools.
Plugins
While for some designers plugins are a "must-have", it's not necessarily a vital feature for others. Plugins are a great way to include animations, prototyping, providing data, and so on. Their usage depends on each user. For those who are keen to customize the design program, Sketch is the most suitable choice since it offers more 3rd-party plugins than Figma.
In fact, it was not until 2019 that Figma started introducing its first plugins. Even though it does not have has many plugins as Sketch, Figma's approach to plugins include incentivizing developers to create more. It does so by featuring content on the app's release page and organizing the "Figma Plugins Show & Tell", which consist of a live stream where developers can share what they are working on and provide live demos of the latest plugins.
Prototyping
Neither Figma nor Sketch had prototyping features when they were initially launched, but as the market becomes more competitive, the apps also need constant upgrades not to be left behind. Thus, Figma introduced a prototyping functionality in 2017, and in the next year, Sketch did the same.
In this aspect, Figma can be more flexible than Sketch since it supports overlays when linking objects to other artboards. Moreover, Figma stands out for its intuitive building since designers can easily connect UI elements and choose the respective interactions (e.g. pressing a button) and animations. Additionally, Figma is mobile-optimized, which is very beneficial for device frames and momentum scrolling. This quality allows designers to understand how the user will experience the prototypes.
Since Figma is cloud-based, sharing prototypes is a single link away. In Sketch, the process is also quite simple, but it requires designers to upload the files into Sketch Cloud before sharing.
The ease of collaboration when using Figma sets it apart from other UI design tools. While Sketch allows designers to work individually and only share the designs once they are ready, Figma, on the other hand, was created with collaboration in mind from day one.
Another great advantage of Figma’s collaboration feature is that it is also facilitates sharing within the community. In other words, Figma users can easily exchange and share design systems, icons, or other design elements either with coworkers or with anyone from the community. Additionally, this collaboration contributes to the free resources Figma provides, meaning that (when shared with permission rights) any designer can use them.
Not long ago, Sketch started realizing how valuable the collaboration feature is for designers. Thus, in July 2020, Sketch for Teams public beta was launched. It provides a better way for users to collaborate on the same files. In addition to adding participants to view or edit the file, Sketch for Teams also has a comment section in which designers can chat.
Simply put, the answer to this question is no; there is no right or wrong choice. Figma and Sketch are both outstanding apps regarding usability, performance and the provided features. However, they do have distinct ways to operate, and in that sense, designers' preferences for one app over the other can vary. For instance, while some favour plugins, others might be more concerned about collaboration.
Ultimately, the software a designer chooses to use also depends on external factors. Is the designer working as a freelancer or within a company? What computers do designers use to work? How big is the team? What other tools will the designer use? These are some of the most decisive questions one should keep in mind when deciding which design software to go for.
Both software tools have been competing for designers' attention over the last years. Since their launch, Figma and Sketch keep innovating, introducing new features and updates to surpass each other. Consequently, these apps are becoming so complete that designers might eventually be less dependent on other complementary design tools, but we are not there yet!
Figma and Sketch are design tools with incredible potential. Since their introduction to the market, both keep delivering new features and improving the existing ones, making it really hard for designers to decide which one to use.
One of the greatest difference between these apps is that while Figma is cloud-based and can be used in any operating system (as long as it has an internet connection), contrarily, Sketch is only compatible with macOS operating system.
Moreover, despite having similar features, for some designers, Figma and Sketch may surpass each other on different traits. In the end, it comes down to the designer's preference. While some might prefer Sketch's "Symbols Page", others favour Figma's components. Plus, Figma's vector networks may be faster for drawing but also less rigorous and precise than Sketch’s vector tools. Furthermore, when it comes to prototyping, Sketch has more 3rd-party plugins, and Figma is more limited to Principle's built-in integration. Yet Figma’s prototyping provides more advanced integrated features than Sketch.
As one can see, the choice between both tools depends on the balance between performance, functionality and features that each designer seeks. In addition to the individual's preferences, external factors such as the number of team members, operation systems availability within a company, and collaboration abilities should also be considered.
Marketing intern with a particular interest in technology and research. In my free time, I play volleyball and spoil my dog as much as possible.
I'm a product and service designer, passionate about Scandinavian design and all its forms of collaboration, participation and innovation!
People who read this post, also found these interesting:
.png)
