Figma Vs Sketch: a comparison between flexibility and solidity

The similarity between Figma and Sketch’s interface is immediately evident, and it is not accidental: the model created by Sketch still represents the state of the art in many ways, so its competitors did not need to create a totally new system. , but only to add their own sensitivity where needed and enhance the aspects they felt lacked depth or functionality. Although Figma is a browser-based app and does not require any installation, its interface is evidently reminiscent of that of Sketch, so much so that it is easy to import files from it into Figma and work with a minimal learning curve; in fact, if you know one of the two systems, learning to use the other is a piece of cake.

In essence, the Figma app is a browser-based version of Sketch that optimizes many aspects of it. They’re incredibly similar: both Figma and Sketch have the canvas in the centre, the Properties panel on the right (called Inspector on Sketch), the layer block on the left, the tools at the top, and even the keyboard shortcuts themselves. One of the few differences lies in the terminology: in Figma, artboards are called frames, and Sketch’s symbols are called components.

To begin, let’s break down the two winning features of Figma, which for many designers are the main reason to migrate from Sketch. While the latter is an app created for Mac, Figma is a web app, consequently, it does not depend on the operating system to be used. Considering the average costs of a Mac, and how despite they are popular, but still they do not represent the majority of devices in use, this represents an incredible penalty for the spread of Sketch. On the contrary, Figma is not only transversal to any operating system but also allows collaborative work on the same file (according to the same principle of Google Docs for example) which is much more functional than the same function of Sketch, where the latter also has problems downloading suitable plug-ins, as it is not compatible with other operating systems except through a rather laborious method. From this point of view, Figma wins hands down the comparison, which is why it has gained so much popularity since its release. A penalty that unfortunately derives from being a web-based app, however, is the need for Figma to always work online, which can sometimes be complicated in less than optimal network conditions.

Things get different when we analyze the availability of plugins. In this case, Sketch’s greater seniority is the winning point, although Figma is also working hard to fill the gap. Sketch can in fact boast thousands of plugins and features created by third parties (first of all Zeplin) that cover practically any aspect of design imaginable, which makes the program able to facilitate the work of the designer, offering solutions adapted to their needs. As we said, Figma is adapting to overcome the gap, always taking inspiration from the Sketch guidelines, but despite the excellent work and the continuous creation of new plugins and features, it is still suffering from the fact it arrived later on the market.

The price of the two apps is another point to analyze. Figma certainly wins when it comes to entry-level, as it offers a free limited version, very useful for those who want to start getting familiar with the program. Sketch offers a $ 99 annual plan that includes the right to use all plugins and updates without limits, as well as being able to save your projects to the cloud. At the end of the license, it will still be possible to use the program, but the most recent updates will be released only when the instalment is paid again. For Figma, on the other hand, you pay according to the number of designers who use it, with prices ranging from 12 to 45 $ per month. Especially for very large workgroups, this represents a very high cost that not all companies could or would like to face.

Another point in favour of Figma, you can create independent styles depending on the Text, Colour, Stroke and Effects. These styles can be applied at any level you prefer. A text style and a colour style, just a shadow or all together can be applied.

In Sketch, this is not possible. There are only two types of usable styles: Text and Layer Styles. Each property becomes part of that style. In Figma, all changes can be made with a few simple commands, while in Sketch a less immediate process is required and divided into various functions (for example, to change colour it is necessary to combine styles, nested symbols and more). Figma’s approach is much more intuitive and faster.

The prototyping capabilities built into both design toolkits allow you to see how users will interact with the software product. In a few hours, it is possible to make static design clickable and interactive in a single workspace. Figma implemented prototyping earlier than its competitor, gaining an undoubted advantage over Sketch, although the latter also ran for cover by partially bridging the gap between the two programs, improving the platform with an integrated prototyping function in 2018. In the past, designers could use the InVision plug-in to create prototypes on Sketch.

A final notable advantage of Figma over Sketch is that it allows designers to add advanced transitions and animations to the design. Prototypes made through Figma allow you to get a clearer and more vivid vision of how their product will work.

Our UI / UX team also wanted to give their opinion regarding the comparison between the two programs. There is still a certain propensity towards Figma, considered more versatile than the counterpart. Sketch is appreciated above all because the management of Sketch symbols is still the most convenient and immediate as the software automatically creates a page used for the “parent assets”, favouring the production of an ordered file and a quick update of the components. On the other hand, it is pointed out that Sketch does not allow navigation between different files via tabs but in different windows and this is definitely a minus.

A more articulated point is made regarding Figma. Among the pluses that our designers appreciate, we find, the passage between different projects favoured by tab navigation, the Select a group of objects that allows you to view the colour palette, the management of the alignment of the elements in a group even without an artboard, the “Send to back” and “bring to front” function of the elements, the Figjam (more functions, a single software), the Preview prototype on the fly, the most powerful and complete Prototyping, the most powerful Variant System for the design management system.

On the other hand, they don’t like some aspects. It would be convenient to implement the same management of the sketched components, in order not to have to actively arrange them on another page, to use components from a library to speed up the design process of a project, a process that will not necessarily facilitate the production of the prototype, as library components cannot be linked to job file components. Finally, the Sketch file import system is not optimized.

In general, we see how Figma has the numbers to impose itself, even if Sketch will not be easily undermined by its position of domination. It will also be worth keeping an eye on other programs such as Adobe XD which are making continuous improvements, and could represent valid alternatives to the two programs described in the article. From what we see, however, the competition at the moment is mainly between the flexibility of Figma and the solidity of Sketch.

And you, what do you think? Do you have a preference for one of the two programs?