Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Figma Vs Sketch: The Showdown

The past year has seen quite a rise in UI design tools. While existing applications, such as Affinity Designer1, Gravit2 and Sketch3, have improved drastically, some new players have entered the field, such as Adobe XD754 (short for Adobe Experience Design) and Figma255.

For me, the latter is the most remarkable. Due to its similarity to Sketch, Figma was easy for me to grasp right from the start, but it also has some unique features to differentiate it from its competitor, such as easy file-sharing6, vector networks7, “constraints468” (for responsive design) and real-time collaboration9.

In this article, I’d like to compare both apps in detail and highlight where each of them shines.

Figma Vs Sketch

Further Reading on SmashingMag: Link

Platform Link

The greatest weakness of Sketch has always been its lock-in to the Apple ecosystem. You need a Mac not only to design with it but also to open and inspect files. If you are on Windows or Linux, you’re out of luck. (Technically, you could get Sketch running on Windows, as Martijn Schoenmaker14 and Oscar Oto Mir15 describe, but it might not be worth the hassle for some.) That’s why, over time, a few paid services16 have emerged that enable you to provide teammates with specifications of Sketch files, but that’s still an unfortunate extra step.

Top: Sketch, bottom: Figma.17
Top: Sketch; Bottom: Figma. (View large version18)

That’s probably one of the reasons why Figma took a different route right from the start: It can be used right in your web browser, on basically any device in the world. No installation whatsoever needed: Just open Chrome (or Firefox), set up an account and start designing. While I’ve been hesitant with browser-based tools before, Figma blew my doubts away in a single stroke. It’s as performant as Sketch (if not more), even with a multitude of elements on the canvas.

Even standalone desktop apps of Figma for Windows and Mac are available, but basically, they are no more than wrappers of the browser version. While they give you better support for keyboard shortcuts, they don’t save you from having to be online all the time.

Winner: Figma
Why: It is platform-independent.

Usability (Features And User Interface) Link

Basically, Figma can be best described as an in-browser version of Sketch. It offers mostly the same features, the interface looks similar, and even the keyboard shortcuts are mostly taken from its competitor. If you knew Sketch already, you could have easily found your way around Figma when it was released at the beginning of 2016.

Figma has improved on many aspects since then, and has even surpassed Sketch in parts, but some features are still missing, such as plugins8319, integration with third-party tools20 and the ability to use real data21 (with the help of the Craft plugin). Nevertheless, at the pace Figma is improving, it may be just a matter of time before it’s on par with Sketch.

Winner: A draw
Why: At the moment, they don’t differentiate enough. But still, Sketch is more mature, offers more odds and ends to make you more productive.

Pricing Link

Sketch initially started with a one-time fee of around $99 USD for each new major version. But having finally realized that this business model is not sustainable, Bohemian Coding has recently changed its pricing to a kind of subscription-based model: For $99 USD, you get one year of free updates. After that, you can keep using the app as is or invest the same amount of money to get another year of updates.

This price increase might seem inappropriate at first, but what’s $99 for your main tool as a designer? Right, not much, and still cheaper than Adobe’s Creative Cloud22 subscription price. (Also, note that when you stop paying for your Creative Cloud subscription, you cannot keep using any of the Adobe CC apps, whereas your existing version of Sketch will continue running with no problems at all.)

For the time being, Figma is still free to use for everybody, but that might change later this year. I’d bet that it will also be subscription-based, with a monthly fee of around $10 to $15 USD (don’t hold me to that, though). One thing’s for sure: Figma will always be free for students23 (similar to how Sketch offers a reasonable discount24 to students and teachers).

Winner: A draw
Why: No word yet on the pricing of Figma.

Collaboration Features Link

The main differentiator of Figma is probably the real-time collaboration feature, called “multiplayer.” It allows a user not only to edit a file at the same time as others but also to watch somebody else fiddle around in a design and communicate changes with the built-in commenting system. For one, this simultaneous editing is great for presentations and remote teams, but it also ensures that everyone involved sees the same state, and it prevents unintended overwrites.


Figma’s real-time collaboration lets multiple people work on the same file simultaneously. (Video by Figma255)>

Sketch doesn’t offer anything like that (not even with the help of plugins), and it’s probably the better for it. Designers are skeptical of this feature, and rightly so, because it can lead to the dreaded “design by committee” and to a mentality of “Make this button bigger. No, wait! I’ll just do it by myself!” Of course, I’m exaggerating a bit here. This feature can be somewhat valuable, but it has risks if you don’t set certain rules up front.

Winner: Figma
Why: Allows multiple people to work on the same file at the same time.

File Sharing and Spec’ing Link

Somewhat related to real-time collaboration is the sharing of design files. Because everything in Figma happens in the browser, every file naturally has a URL that you can send to your peers and bosses (in view-only mode, too). Another huge advantage of this browser-based approach is that everybody, developers foremost, can open a design and inspect it right away, with no third-party tool needed.

Figma lets you easily share a design with others.26
Figma lets you easily share a design with others. (View large version27)

That’s exactly what you need in Sketch in order to offer teammates all of the necessary information on a file, such as font sizes, colors, dimensions, assets and so on. However, as mentioned, to help you here, you’ll need paid tools such as Zeplin28, Sympli29, InVision’s Inspect30, Avocode31 or Markly32. To be fair, the first three are free for a single project, but that might not be enough when you’re working on more complex stuff.

If you need more or don’t want to invest money in such (admittedly basic) functionality, there are also the free plugins Marketch33 and Sketch Measure34. Many paid apps also allow you to add comments and create style guides automatically.

Alternatively, you could even import your Sketch files into Figma and inspect them there, because Figma supports the Sketch file format.

Top left to bottom right: Avocode, Zeplin, Sympli, Markly App. They all let you inspect and share your Sketch designs in one or another way. Screenshot from The Sketch Handbook.35
Top left to bottom right: Avocode, Zeplin, Sympli and Markly all let you inspect and share a Sketch design in one or another way. (Image: The Sketch Handbook36) (View large version37)

If you just need to let your teammates have a look at a design, then the built-in Sketch Cloud38 does exactly that. To view a design on your iOS device, you have Sketch Mirror39 and Figma Mirror40; for an Android device, you can use Mira41 and Crystal42. Figma doesn’t offer an Android-based app, but opening www.figma.com/mobile-app43 on the device after selecting a frame or component (on your desktop computer) will give you a kind of preview.

Winner: Figma
Why: Files are easily shareable, right in the browser, without the need for a third-party tool.

Organizing Files Link

Thanks to the organizational capabilities that Sketch gives with its pages, you can design an entire app or website in a single file, and switch between its pages quickly. Figma is left behind here: It doesn’t provide pages, but you can at least combine files into a project.

Left: Sketch lets you organize a file into pages and easily switch between them. Right: Figma just has rudimentary projects.44
Left: Sketch lets you organize a file into pages and easily switch between them. Right: Figma’s projects are rudimentary. (View large version45)

Another important concept of Sketch — artboards — has been taken on as well, but in an enhanced form. In Figma, you can apply fills, borders and effects to artboards, and they can also be nested and be easily created from groups. For one, this allows for containers of elements that are bigger than their combined bounds, which can be helpful for the “constraints468” functionality. Furthermore, each artboard can have its own nested layout grid, which helps with responsive design.

It’s worth mentioning that Sketch also allows you to nest artboards, but the implementation is not nearly as powerful as Figma’s.

Winner: A draw
Why: Sketch has pages, but Figma’s artboards (frames) are more powerful.

Responsive Design Link

A feature that Figma introduced (and that Sketch followed with months later) is responsive design, or the ability to set how elements respond to different artboard or device sizes. There have been plugins that offer such functionality in Sketch, but they’ve always felt a bit clunky. Only the native “group resizing47” feature has been easy to use, competing with Figma’s “constraints” feature.

Left: Sketch's group-resizing feature is set in a single dropdown menu and takes some time to get used to. Right: Figma's constraints are much more visual.48
Left: Sketch’s group-resizing feature is set in a single dropdown menu and takes some time to get used to. Right: Figma’s “constraints” are much more visual. (View large version49)

They do basically the same thing but are very different in execution. In Sketch, you just have a dropdown menu with four options, and it can be a bit hard to imagine what they do. Figma offers a more visual way to define these properties; for example, to pin an element to the edge of an artboard or to let it resize proportionally.


Responsive design in action: first Figma (design by Figma50), then Sketch (design from “Designing a Responsive Music Player in Sketch51“).>

A huge advantage of Figma is that these constraints work in combination with layout grids. Elements can be pinned to certain columns (or rows), for example, or take on their relative width. Furthermore, you are able to change these settings independently for each axis, and they work not only for groups but also for artboards. None of that is possible in Sketch.

Winner: Figma
Why: Its constraints functionality is far more advanced and offers more options.

Vector Manipulation Link

One major feature of Figma when it was released was “vector networks.” No longer is a vector just a sequence of connected points (nodes). Now, you can easily branch off from any node with a new line. Creating an arrow, for example, is as easy as pie.

Vector networks in Figma let you add segments to every point of a vector.52
Vector networks in Figma let you add segments to every point of a vector.

But there’s much more to it. Parts of a vector can be easily filled (or removed) with the Paint Bucket tool. You can move entire segments (or bend them) with the help of the Bend tool. And copying lines (as well as points) from one vector to another is a snap.

Thanks to vector networks in Figma, segments can be easily moved or bent.53
Thanks to vector networks in Figma, segments can be easily moved or bent.

This feature alone sets Figma apart from Sketch in a very special way and makes it so much more suitable for icon design. Compared to it, the tools available in Sketch feel almost archaic. While Sketch might have everything you’ll ever need to create and manipulate vector objects, as soon as more complex vector operations are involved, it can get a bit too tricky.

Figma Vs Sketch54
First: In Figma, you can use the Paint Bucket tool to remove the fill of two overlapping circles to create a ring. Second: Sketch uses the traditional approach with Boolean operations (which are available in Figma, too, by the way).

While most of the time you’ll need to use Boolean operations55 to create certain types of shapes in Sketch, much of that can be achieved more easily with vector networks in Figma. The fact that in Sketch it’s often hard to join two vector objects or even flatten a shape after a Boolean operation has been applied makes things even worse — the app certainly has a lot of ground to cover in this regard.

Winner: Figma
Why: Vector networks give a whole new dimension to vector manipulation, something still unmatched in Sketch.

Supported File Types Link

Whenever a new application appears, you often face the problem of having to redo everything if you want to migrate a project. Not so in Figma: It can open Sketch files in an impressively accurate way, which gives it an immediate advantage.

Unfortunately, it doesn’t work in the other direction. Once you start designing in Figma, you are bound to it. It can’t export back to Sketch, nor is it capable of creating PDF files (or importing them). There is an option to export to SVG, but that’s not the ideal format in which to exchange complex files between design applications.

The export options are similar in appearance, but Sketch offers more options. Left: Sketch, right: Figma.56
The export options are similar in appearance, but Sketch offers more options. Left: Sketch, right: Figma. (View large version57)

Another limiting factor is that you can’t set the quality level when exporting JPG images in Figma, so you might need a separate application to optimize images. The latest version of Sketch improves the exporting options even further. It allows you to set both a prefix and a suffix for file names now, as well as provides exporting presets, which makes exporting for Android much easier.

Let’s look at the export file formats that each application supports.

Sketch:

  • PNG
  • JPG
  • TIFF
  • WebP
  • PDF
  • EPS
  • SVG

Figma:

  • PNG
  • JPG
  • SVG

Winner: Sketch
Why: More file formats, and better saving and exporting options.

Accessibility Link

Though Figma shares many keyboard shortcuts with Sketch, it doesn’t have the same level of accessibility. In Sketch, almost everything can be achieved with a key press. And if you are not satisfied with a certain shortcut combination, you can set your own in the system’s preferences (which largely goes for shortcut commands not assigned by default).

Note: You can learn how to change shortcuts in Sketch in the article “Set Custom Keyboard Shortcuts58,” published on SketchTips.

You can set your own keyboard shortcuts for Sketch in the system preferences of macOS.59
You can set your own keyboard shortcuts for Sketch in the system preferences of macOS. (View large version60)

Because Figma lives in the browser, none of that is possible. While the desktop app makes up for it, certain functions simply can’t be assigned to the keyboard due to a lack of certain menu bar commands.

Winner: Sketch
Why: Almost all features in the application are accessible with keyboard shortcuts, and they can be customized.

Symbols (Components) Link

An important feature has only just been introduced to Figma: symbols, or, as they are called there, components. Components allow you to combine several elements into a single compound object that can be easily reused in the form of “instances.” As soon as the master component is changed, all instances inherit the change. (However, certain properties can still be modified individually, allowing for variations of the same component.)

Lately, it’s even possible to create a library of components in Figma, that can be shared across files and with multiple users — a huge step towards a robust design system.

In Sketch, the modifications of individual instances are handled in the form of overrides in the Inspector panel, allowing you to change text values, image fills and nested symbols separately for each instance. Figma lets you update the properties of an element directly on the canvas, including the fill, border and effects (shadows, blurs).

61
Top: Sketch uses overrides in the Inspector panel to change the contents of symbol instances. Bottom: Figma lets you customize instances of components directly on the canvas, including the text color. (View large version62)

The true strength of symbols (and components) becomes evident with responsive design. In both apps, you can define how elements within a symbol react when their parent is resized, making it possible to use symbols in different places or screen sizes.

An area where Figma is still behind is layer63 and text styles64. You can’t save the styling of shapes or text layers and sync it with other elements. What you can do, however, is copy and paste the styling from one element to another.

Winner: A draw
Why: The implementations are quite comparable, but Figma has a slight advantage with its shareable components.

Plugins Link

Sketch is undeniably great and capable out of the box, but what makes it really awesome are the third-party plugins, which either enhance Sketch or make up for missing features. You can use them to rename multiple layers65 at once, create dynamic buttons66, save and load color palettes67, easily insert images68 from Unsplash, enable Git functionality69 and create animations70 right in Sketch, just to name a few. A full list of plugins can be found in the official directory71 and on GitHub72.

There's a huge selection of plugins available for Sketch, both on the official site and GitHub.73
A huge selection of plugins are available for Sketch, on both the official website and GitHub. (View large version74)

Then there’s Figma, which has none of that up until now. To be fair, Sketch probably didn’t offer many of these helpers early on in its development, and I’d bet that a plugin ecosystem will be introduced to Figma in the future.

A word of caution: While plugins give Sketch a huge advantage, they can be somewhat of a pitfall, too. They tend to break with each new release, and the Sketch team needs to be very cautious to avoid alienating developers in the future.

Winner: Sketch
Why: It’s simple: Figma doesn’t have plugins at all.

Prototyping Link

Unlike Adobe XD754, neither Sketch nor Figma has any native prototyping capabilities. There are no plans for the latter so far, but Sketch has the Craft plugin8476, which brings at least basic prototyping functionality. Furthermore, Sketch’s popularity has led to broad integration with other prototyping tools: InVision77, Marvel78, Proto.io79, Flinto80, and Framer81, to name a few. The idea with these is that you can easily import a design and sync up the apps.

The only application that works with Figma so far is Framer82. It’s hard to say what support for similar tools will look like in the future, but it may well be that such interfaces are already in the works.

Winner: Sketch
Why: Though the Craft plugin doesn’t provide persuasive prototyping capabilities, Sketch is well integrated with many prototyping services.

Working With Real Data Link

Among the countless plugins8319 that Sketch offers, you will also find some so-called “content generators.” For one, they let you fill a design with dummy content. But what’s even more interesting is that these little helpers enable you to pull in real data from various sources, or even insert content in the form of JSON files. This allows you to make more informed decisions and account for edge cases early in the design process.

By far, the best in this category is the Craft plugin8476 from InVision. As soon as you use it to populate an element with content, you can easily duplicate and vary it in a single step. Craft also allows you to save design assets and share them with your team, or to create a style guide automatically. For an in-depth look at the Craft plugin, have a look at my recent article “Designing With Real Data In Sketch Using The Craft Plugin85.”

Among other features and options, the Craft plugin for Sketch allows you to duplicate elements and populate them with different content at the same time.86
Among other features and options, the Craft plugin for Sketch allows you to duplicate elements and populate them with different content at the same time.

Though not as sophisticated as Craft, a few more plugins with similar functionality exist: Sketch Data Populator87, Content Generator88 and Day Player89.

Figma doesn’t offer such functionality yet, but I think it’s just a matter of time. It will be interesting to see which approach it takes: integrating it in the app, as Adobe XD teased some time ago90, or relying on a plugin system.

Winner: Sketch
Why: Compensating for a lack of native functionality, various plugins allow you to use real data in Sketch easily.

Versioning Link

One thing I constantly do is undo my changes one by one with Command + Z to see what an earlier version of a design looks like — either to have a point of reference or to duplicate as a base for a new iteration. You might suppose that Figma is at a dead end here because of the browser’s limited resources, but in reality it is in no way inferior to Sketch.

Both apps save automatically, with the ability to browse and restore old versions. Sketch’s implementation, however, is far from ideal, and I don’t even know where to start. It’s laggy; you need to restore a version before you can actually inspect it; and it can lead to wasted space on the hard drive. (If you encounter this problem, Thomas Degry’s article “How Sketch Took Over 200GB of Our MacBooks91” might help.) To cap it off, things can get screwed up pretty quickly when multiple people are working on the same file in the cloud (via Dropbox, etc.).

Figma lets you restore previous versions instantaneously, which is especially useful if multiple people are editing the same file, helping you to isolate the changes of each person. You can then jump back to a previous state or duplicate the version as the starting point for a new idea.

Winner: Figma
Why: Sketch’s versioning is so imperfect that the winner is obvious.

Text Features Link

As in other regards, the handling of text is quite similar in both applications, but some differences are worth mentioning. By default, Figma just gives you Google Fonts to choose from, but with a simple installer, you can access system fonts, too.

Something I constantly miss in Sketch is the ability to change the border position of text layers; “center” is the only option here. Figma also offers “inside” and “outside,” like it does for the shape layers.

Left: Figma allows you to set the vertical position of text inside the frame (top) and has more options for the border position (bottom). Right: Sketch lets you apply OpenType features.92
Left: Figma allows you to set the vertical position of text inside the frame (top) and has more options for the border position (bottom). Right: Sketch lets you apply OpenType features. (View large version93)

Furthermore, Figma lets you set the vertical alignment of text, allowing for easy vertical centering inside the frame. In contrast, Sketch has more typography options and enables you to apply OpenType features such as small caps, old-style figures, stylistic alternatives and ligatures (if a font supports them).

Winner: A draw
Why: Both applications have their distinct advantages. Sketch might be ahead a bit, due to its advanced typography options, but not enough to win outright.

Useful Resources And Further Reading Link

Sketch has been on the market now for over six years, which has allowed the community to accumulate a huge number of useful resources (articles, tutorials, blog posts, etc.). And due to the similarities between the two apps, some Sketch concepts can be applied to Figma, which makes some resources suitable for both applications. I’ll mention only a few here:

Conclusion Link

Let’s quickly recap each app’s strengths.

Where Sketch Shines Link

  • Keyboard accessibility is better supported.
  • Plugins and a plugin ecosystem exist.
  • Third-party tools and services can be integrated.
  • File types and exporting options are richer.
  • A complex project can be contained in a single file (with pages).
  • Real data can be easily used in Sketch.
  • The app is more mature.

Where Figma Shines Link

  • Being browser-based, it’s usable from anywhere in the world, on any platform.
  • Collaboration in real time.
  • File sharing is easy.
  • Vector manipulation is excellent (via vector networks).
  • Responsive design options are better (via constraints).
  • A library of components can be created and shared with your team members.
  • Artboards are more powerful.

The Future Link

The discontinuation of Adobe Fireworks in 2013 left a huge gap106 in the world of UI design tools — a gap that Sketch gladly filled almost immediately107. Sketch became so successful that it closed in on its main competitor, Photoshop, over time and even topped it last year as the tool of choice108 among user interface designers.

Sketch would probably be even more successful if there was a Windows version, though, a problem with other tools, too. So, Affinity Designer and Adobe XD (two new competitors that started as Mac-only apps) quickly stretched out to support Windows as well. There is also Gravit Designer, which works in the browser109 and which now also exists as a desktop app110 (for Windows, Mac and Linux); but like Affinity Designer and Adobe XD, it’s hard for it to compete with Sketch, which is probably the most mature tool of them all at the moment.

And now we have Figma111: Not only is its feature set similar to Sketch’s, but it supports multiple platforms because the only thing you needed to run it is a modern browser. Moreover, Figma allows you to open Sketch files, which means you can basically continue in Figma where you’ve left off in Sketch, without much effort. (Figma requires you to be signed in and online to use it, though, a serious limitation112 in some cases.)

But as different as all of these tools are, they all have one thing in common: They want a slice of the pie, and so they are challenging Sketch in every possible way. But the Sketch team isn’t resting on its laurels. It is constantly improving the application and pushing new updates often, with the goal of making it the best possible UI design tool out there. So far, they are succeeding, but the pressure is growing.

(mb, al, il)

Footnotes Link

  1. 1 https://affinity.serif.com/designer/
  2. 2 https://gravit.io/
  3. 3 https://www.sketchapp.com/
  4. 4 http://www.adobe.com/products/experience-design.html
  5. 5 https://www.figma.com/
  6. 6 #file-sharing-and-specing
  7. 7 #vector-manipulation
  8. 8 #responsive-design
  9. 9 #collaboration-features
  10. 10 https://www.smashingmagazine.com/2015/04/using-sketch-for-responsive-web-design-case-study/
  11. 11 https://www.smashingmagazine.com/2017/01/designing-responsive-music-player-sketch-part-1/
  12. 12 https://www.smashingmagazine.com/2016/11/exploring-repeat-grid-in-adobe-xd/
  13. 13 https://www.smashingmagazine.com/2017/02/design-with-real-data-sketch-using-craft-plugin/
  14. 14 https://medium.com/sketch-app-sources/how-i-started-using-sketch-app-in-windows-756e7091b0bc
  15. 15 https://blog.prototypr.io/three-reasons-why-my-windows-adobe-team-moved-from-adobe-to-sketch-2ecf5fdd45d6
  16. 16 #file-sharing-and-specing
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot1-large-opt.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot1-large-opt.png
  19. 19 #plugins
  20. 20 #prototyping
  21. 21 #working-with-real-data
  22. 22 https://creative.adobe.com/plans
  23. 23 https://www.figma.com/education
  24. 24 https://www.sketchapp.com/store/edu/
  25. 25 https://www.figma.com/
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot3-large-opt.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot3-large-opt.png
  28. 28 https://zeplin.io
  29. 29 https://sympli.io/
  30. 30 http://blog.invisionapp.com/inspect-design-development-workflow/
  31. 31 https://avocode.com/
  32. 32 http://marklyapp.com/
  33. 33 https://github.com/tudou527/marketch
  34. 34 https://github.com/utom/sketch-measure
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot4-large-opt.png
  36. 36 https://www.smashingmagazine.com/sketch-handbook/
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot4-large-opt.png
  38. 38 https://www.sketchapp.com/learn/documentation/sketch-cloud/
  39. 39 https://itunes.apple.com/us/app/sketch-mirror/id677296955?mt=8
  40. 40 https://itunes.apple.com/us/app/figma-mirror/id1152747299?mt=8
  41. 41 http://mirapp.io/
  42. 42 https://play.google.com/store/apps/details?id=com.smithyproductions.crystal
  43. 43 https://www.figma.com/mobile-app
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot5-large-opt.png
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot5-large-opt.png
  46. 46 #responsive-design
  47. 47 https://www.smashingmagazine.com/2017/01/designing-responsive-music-player-sketch-part-2/#from-fixed-to-fluid
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot6-large-opt.png
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot6-large-opt.png
  50. 50
  51. 51 https://www.smashingmagazine.com/2017/01/designing-responsive-music-player-sketch-part-1/
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2017/03/vector-networks-figma.gif
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/03/segments-easily-moved-and-bent.gif
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2017/03/figma-removing-fill.gif
  55. 55 https://www.sketchapp.com/learn/documentation/shapes/boolean-operations/
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot11-large-opt.png
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot11-large-opt.png
  58. 58 http://www.sketchtips.info/articles/custom-shortcuts
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot12-large-opt.png
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot12-large-opt.png
  61. 61 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot13-large-opt.png
  62. 62 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot13-large-opt.png
  63. 63 https://www.sketchapp.com/learn/documentation/styling/shared-styles/
  64. 64 https://www.sketchapp.com/learn/documentation/text/text-styles/
  65. 65 https://github.com/rodi01/RenameIt
  66. 66 https://github.com/ddwht/sketch-dynamic-button
  67. 67 https://github.com/andrewfiorillo/sketch-palettes
  68. 68 https://github.com/fhuel/unsplash-it-sketch
  69. 69 https://github.com/mathieudutour/git-sketch-plugin
  70. 70 http://animatemate.com/
  71. 71 https://sketchapp.com/extensions/plugins/
  72. 72 https://github.com/sketchplugins/plugin-directory
  73. 73 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot14-large-opt.png
  74. 74 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot14-large-opt.png
  75. 75 http://www.adobe.com/products/experience-design.html
  76. 76 https://www.invisionapp.com/craft
  77. 77 https://www.invisionapp.com/craft
  78. 78 https://marvelapp.com/prototype-with-sketch
  79. 79 https://proto.io/en/new-features/photoshop-and-sketch-plugins/
  80. 80 https://www.flinto.com/mac_sketch_plugin
  81. 81 https://framer.com/getstarted/import/
  82. 82 https://blog.framerjs.com/posts/import-with-figma.html
  83. 83 #plugins
  84. 84 https://www.invisionapp.com/craft
  85. 85 https://www.smashingmagazine.com/2017/02/design-with-real-data-sketch-using-craft-plugin/
  86. 86 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch-duplicating-elements.gif
  87. 87 https://github.com/preciousforever/sketch-data-populator
  88. 88 https://github.com/timuric/content-generator-sketch-plugin
  89. 89 https://github.com/tylergaw/day-player
  90. 90 https://medium.com/@anirudhs/project-comet-designing-with-real-data-959beccb5c1a#.3iz4x4e5h
  91. 91 https://medium.com/@thomasdegry/how-sketch-took-over-200gb-of-our-macbooks-cb7dd10c8163#.uoufoz23m
  92. 92 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Screenshot16-large-opt.png
  93. 93 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Screenshot16-large-opt.png
  94. 94 http://sketchtips.info
  95. 95 https://sketchapp.com/learn/documentation/
  96. 96 https://www.facebook.com/groups/sketchformac
  97. 97 https://www.sketchappsources.com/
  98. 98 https://medium.com/sketch-app-sources
  99. 99 http://sketchtricks.com
  100. 100 http://sketchtalk.io
  101. 101 http://sketchhunt.com
  102. 102 http://sketchapp.rocks
  103. 103 https://help.figma.com/
  104. 104 https://www.facebook.com/groups/figma/
  105. 105 http://heydesigner.com/figma/
  106. 106 https://www.smashingmagazine.com/2013/12/present-future-adobe-fireworks/
  107. 107 https://medium.com/habit-of-introspection/the-past-present-and-future-of-sketch-d5237879b7af#.lqrnygtug
  108. 108 http://tools.subtraction.com/interface-design.html
  109. 109 https://www.smashingmagazine.com/2016/04/exploring-a-new-illustration-ui-design-app-gravit/
  110. 110 http://designer.io/
  111. 111 https://medium.com/@mengto/figma-vs-sketch-c01e5e74eddd
  112. 112 https://www.quora.com/How-does-Figma-compare-to-Sketch

↑ Back to top Tweet itShare on Facebook

Christian used to be very active in the Sketch community once, and even wrote a book about the design app. Nowadays he works as an Evangelist for Gravit Designer, where he takes care about their users and helps to improve the application.

Christian is a proper nature-boy from Austria, where he lives with his wife and 10-years old son. When he’s not staring at his laptop for once, he loves to spend time with his family, go outside and do some sports or watch a good movie. His all-time favorite is Fight Club, but he’s more into a good series lately, because, you know, winter is coming.

  1. 1

    Dennis van Leeuwen

    March 9, 2017 4:05 pm

    Let us see how Sketch responds to Figma’s features. Updates will come.

    0
  2. 2

    Sketch doesn’t require an internet connection.
    I never bothered with iconography in Sketch, due to the limitations mentioned here, but for UI design, why waste time recreating the wheel when there are plenty of icon packages with web font companions.

    When I need to make icons, which is almost never, I use Illustrator.

    As a designer, I can’t abandon Adobe completely. I still get AI, PSD, and INDD files all the time. I use InDesign regularly, and on the occasional chance I get an Adobe XD file, I can work with it.

    Adobe XD is… Crappy. That is the best word I Can come up with. It lacks design controls like Sketch, Figma, Affinity, Illustrator, and requires you to have already made mocks, and if I’m working almost exclusively in Sketch, why in a million years would I want to jump into XD?

    Sketch and Figma are neck and neck, and the biggest drawback for me is the internet connection and browser lag seen in pretty much every web based design tool (UXPin, Avocode, NinjaMocks, et al). I don’t want to have to hunt down a web app in the tab-hell I sometimes find myself in. This only begins to address some of the browser based issues we’ve all come to enjoy.

    7
    • 3

      Sketch and Figma are neck and neck, and the biggest drawback for me is the internet connection and browser lag seen in pretty much every web based design tool […]

      — What do you think of Gravit Designer? It is a tool similar to Sketch and Figma, but, unlike Figma, its latest version exists as a separate download+setup for Win, Mac, and Linux. No Internet connection required is a big advantage, IMHO. I am fine when google docs (or another web service) works only when I am online, but I hate that in graphic design tools. Designers and illustrators often may need to work offline too — and I think Figma creators don’t realize that… :-(

      2
    • 4

      There’s absolutely no delay in Figma; I also couldn’t believe it first. It’s totally like working on your local machine.

      1
  3. 5

    Jeremy Cook

    March 9, 2017 9:26 pm

    I signed up for Figma today and am trying it out on a small project. I just tried out and found that, indeed, you can do math in the position and dimension fields. Being able to take the current value and tweak it like that is very helpful. So instead of doing the math in my head I can just enter `980-220` and Figma calculates `760` for me.

    Everything about it is feeling so tight and well done, like the Constraints feature, that I was inspired to try something new.

    I’m one of those Photoshop on Windows laggards that hasn’t jumped ship yet. Figma has piqued my interest.

    2
    • 6

      I was just about to say that calculations in input fields were in Sketch for ages, but then I realized that you are on Windows, so, yes, Figma is the closest thing you can get compared to Sketch on Mac.

      0
  4. 7

    Figma is amazing! It has appeared at a perfect time to own the market I think.
    I would have gladly switched to Sketch from Photoshop if it was available on Windows. I really think they are missing out on a large market by supporting Mac only.
    Even though it’s still early days, its a very polished product. I’ve pretty much migrated to using Figma exclusively, with very little use for Adobe products now.
    As an added bonus, the guys at Figma are really responsive when it comes to bug reports and support; the in-app messaging is really helpful.
    The other promising app I’m watching closely is Subform, but last time i checked it had some way to go in terms of usability.

    4
  5. 8

    I wonder, why Figma gets all the attention, while there’s one more amazing UI/Design tool – Gravit Designer. It’s more mature and now goes through rebirth as a cross-platform vector suite. It looks very promising, and it’s free. I would recommend every designer give it a try.
    Old browser-only version is still avaliable on https://gravit.io, but there’s new preview version on http://designer.io

    1
    • 9

      Patricio Alvaro Bustos Madrid

      March 12, 2017 2:46 am

      I use Gravit designer for a little project and is not totally reliable, for example, I created an SVG file and then I edit it on Inkscape without problem, but when I try to edit again the same file with Gravit, it isn’t work.

      I think its very good alternative, but working with SVG, is not fantastic.

      0
  6. 10

    I am looking at these programs and think to myself that Fireworks could have done all this and more if only Adobe decided to continue it’s development, or maybe rewrite it from scratch since that was one of the main reasons they ditched it afaik

    5
  7. 11

    This article fails to give enough attention to Figma’s “Team Libraries” features for sharing common ‘components’ (aka symbols) across files/team. There’s a vague reference to it in File in the organizing files section.

    For me this is a high-level feature area that should be compared on its own, because even with plugins like Craft there’s nothing that ‘just works’ in Sketch like Figma’s Team Library feature.

    https://medium.com/figma-design/team-libraries-in-figma-409fa5e20f7#.z0k2pt79i

    2
    • 12

      Thanks for the suggestion, James. I’ll make sure to add a bit more about Figma’s Team Libraries to my article soon. Unfortunately, there was some overlap, as this feature was announced when the article was about to be published already.

      3
  8. 13

    Interesting way of online tools taking over. Great read!

    0
  9. 14

    Looks like Figma sponsored article.
    This is not good SmashingMagazine.

    -8
    • 15

      In Smashing Magazine, “Sponsored articles” are clearly marked as such.

      On the other hand, the “Sketch vs Figma” article is a very detailed (and quite objective) overview of these tools, written by someone who is proficient in both — and it’s not sponsored by Figma (or Sketch). :-)

      2
  10. 16

    Patricio Alvaro Bustos Madrid

    March 12, 2017 2:55 am

    Fantastic article, I’m a huge fan of figma, but for my daily work I prefeer Sketch because Figma its slow for the zoom in/out. Also, as depends of Chrome, is not totally stable.

    In my experience, Figma works better in Linux than MacOS. I don’t know why.
    Also, I created a linux version using Electron: https://goo.gl/9ObaID

    Thanks, for the resourse pages. Saludos

    0
  11. 17

    Andrew Acree

    March 12, 2017 5:22 pm

    The biggest downfall to Figma is that you need an active internet connection to run it. Even if you have the desktop app you can’t work at a park, you can’t on an airplane and this was enough for me to stay with Sketch.

    Also you can import or paste into Figma but once you have something in Figma good luck getting it out. I can’t paste from Figma to any of my prototyping tools.

    3
  12. 18

    BevansDesign

    March 12, 2017 5:35 pm

    Nice, I’ll have to try it out.

    I don’t do Apple products, so Sketch is automatically out until they deign to support Windows (which they will if they want to stay in business).

    I tried Adobe XD, but it seems extremely lacking in features that would help it rise above prototyping in PS or AI. And no responsive design features? Why does this thing even exist? Why would they kill off Fireworks and Reflow for XD?

    0
    • 19

      It’s Adobe, they have no clue about their users. Rather than have an awesome UX tool they killed fireworks in favor of nothing….. mo___ns!

      1
  13. 20

    “you’ll need paid tools such as Zeplin, Sympli, InVision’s Inspect, Avocode or Markly. To be fair, the first three are free for a single project, but that might not be enough when you’re working on more complex stuff.”

    If you like to use Sketch, but need to offer teammate/client who uses Windows all of the necessary information on a file, you can also use a Sketch viewer that Icons8 just released – Lunacy https://icons8.com/lunacy It is free.

    0
  14. 21

    I’ve been using both Sketch and Figma, although Figma mostly as a platform to do whiteboarding with a distributed, remote team. Can Figma handle creating anything like the following? Sketch’s symbol system seems much more robust to me: https://medium.com/ux-power-tools/a-better-way-to-make-buttons-in-sketch-6c23470f27c

    0
    • 22

      Andrew Richardson

      March 13, 2017 5:13 pm

      Figma can be comparable in this area although there could be some improvements by the dev team to help it out. Check out this tutorial: https://www.youtube.com/watch?v=RLRVv7JXvco&t=2s

      You can get the same effect by basically layering components together and creating a “mega” component. Whenever you use that mega component you can show or hide the option you need.

      0
  15. 23

    shahbaz khan

    March 15, 2017 8:19 am

    Figma is amazing! It has appeared at a perfect time to own the market I think.
    https://www.webprojectbuilder.com/?loc=app

    -1
  16. 24

    I’m new to UX design and design in general. While working on my class project, redesigning Foursquare, I started using adobe XD, which was frustrating to use. It really didn’t flow well for me and was hard to figure out. Then I found Figma and I love it. I’m not even using it to capacity I don’t think. We will see what happens when I switch to IOS, but Figma is been great. You mentioned it didn’t work with some prototype tools. I was able to load it into Invision. So far so good! Thanks for the sharing!!

    1

↑ Back to top