
{"id":4378,"date":"2021-01-11T12:30:00","date_gmt":"2021-01-11T11:30:00","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/uncategorized\/figma-vs-sketch-the-new-ui-design-tool-that-everyones-talking-about\/"},"modified":"2023-05-17T14:25:54","modified_gmt":"2023-05-17T12:25:54","slug":"figma-vs-sketch-the-new-ui-design-tool-that-everyones-talking-about","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/figma-vs-sketch-the-new-ui-design-tool-that-everyones-talking-about\/","title":{"rendered":"Figma vs. Sketch: Which Is the Better Tool for UI Design?"},"content":{"rendered":"<p>Sketch has long been the tool of choice for designers, but now there\u2019s a new kid in town. Figma is the first browser-based interface design tool to grace the market, and it\u2019s a name we\u2019re hearing more and more within the industry.<\/p>\n<p>So where did Figma suddenly appear from?<\/p>\n<p>Figma was co-founded back in 2013 by Dylan Field, who wanted to \u201cdo for interface design what Google Docs did for text editing.\u201d<\/p>\n<p>Speaking to <a href=\"https:\/\/techcrunch.com\/2015\/12\/03\/figma-vs-goliath\/\" rel=\"noopener\">Techcrunch<\/a> back in 2015, Field explained: \u201cDesign is undergoing a monumental shift &#8211; going from when design was at the very end of the product cycle where people would just make things prettier, to now where it runs through the entire process.\u201d<\/p>\n<p>He set out to revolutionize the way that design teams collaborate\u2014but is this newcomer any competition for <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/common-mistakes-in-sketch\/\">long-time favourite Sketch<\/a>?<\/p>\n<p>We decided to investigate. We\u2019ve not only delved into the software and their performance, pricing, and how simple it is to get started\u2014we\u2019ve also developed online workshops for beginners taking their first steps into designing in Figma and Sketch. If you want to watch those, simply select them from the menu below. Let\u2019s get started!<\/p>\n<ol>\n<li><a href=\"#figma-vs-sketch-platform-and-performance\">Platform and performance<\/a><\/li>\n<li><a href=\"#figma-vs-sketch-pricing\">Pricing<\/a><\/li>\n<li><a href=\"#figma-vs-sketch-getting-started\">Getting started<\/a><\/li>\n<li><a href=\"#figma-vs-sketch-features-and-functionality\">Features and functionality<\/a><\/li>\n<li><a href=\"#figma-vs-sketch-the-verdict\">The verdict<\/a><\/li>\n<li><a href=\"#online-tool-workshops\">Online tool workshops<\/a><\/li>\n<\/ol>\n<h2 id=\"figma-vs-sketch-platform-and-performance\">1. Figma vs. Sketch: Platform and performance<\/h2>\n<p>One of the biggest differences between the two tools is that Figma works in-browser, whereas Sketch is a desktop app only available for Apple computers. In terms of collaboration, this gives Figma a major advantage: unlike Sketch, it\u2019s universally accessible\u2014but more on that later.<\/p>\n<p>This is one of the reasons that Figma has become of one UX designer Maureen&#8217;s top three design apps, as she explains briefly in this video:<\/p>\n<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<\/style>\n<div class=\"embed-container\"><iframe src=\"https:\/\/www.youtube.com\/embed\/HSb1Ue7LU0c\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Figma is also available as a desktop app for both Mac and Windows\u2014however, it\u2019s important to note that, if you aren\u2019t connected to the internet, you won\u2019t be able to open a new file in the desktop client. For designers who need to work offline, this could prove problematic.<\/p>\n<p>When comparing Figma and Sketch, one can\u2019t help but wonder if a web-based tool can really measure up in terms of power and performance, but based on our experience so far, this doesn\u2019t seem to be an issue.<\/p>\n<h2 id=\"figma-vs-sketch-pricing\">2. Figma vs. Sketch: Pricing<\/h2>\n<p>Before we get down to specific functions and features, let\u2019s compare prices.<\/p>\n<p>Sketch works as follows: you pay $99 for a license which lasts for one year. Throughout that year, you\u2019ll receive all updates to the Sketch app. Once the license expires, you can carry on using Sketch forever\u2014however, you must have a current license in order to receive updates. You can also now pay $9 per editor monthly for <a href=\"https:\/\/www.sketch.com\/pricing\/\" target=\"_blank\" rel=\"noopener\">Sketch Standard access,<\/a> with other deals for businesses.<\/p>\n<p>Figma\u2019s pricing plan is divided into three sections:<\/p>\n<ul>\n<li><strong>Starter\u2014<\/strong>free to use for individuals.<\/li>\n<li><strong>Figma Professional\u2014<\/strong>$12 per editor per month if billed annually\u2014or $15 per editor per month if billed monthly.<\/li>\n<li><strong>Figma Organization\u2014<\/strong>$45 per editor per month, billed monthly. This offers the features of Professional, with added features such as Single Sign-On, private plugins, and centralized file management.<\/li>\n<\/ul>\n<p>Both Figma and Sketch offer a free trial, so you can see which tool you prefer before making a financial commitment! <a href=\"https:\/\/www.figma.com\/education\/\" target=\"_blank\" rel=\"noopener\">Figma Professional is free for students and educators<\/a> to use, once they register themselves.<\/p>\n<h2 id=\"figma-vs-sketch-getting-started\">3. Figma vs. Sketch: getting started<\/h2>\n<p>When using Figma for the first time, it\u2019s impossible to ignore how similar the interface is to that of Sketch. If you\u2019re swapping from Sketch to Figma, the transition shouldn\u2019t be too difficult from a usability point of view.<\/p>\n<p>When you open up the Figma app, you\u2019re taken straight to the \u201crecent\u201d section of the file browser. Here you\u2019ll find some preloaded, fully-editable files\u2014you can copy elements from these files into any new designs you create.<\/p>\n<p>One difference is the terminology used. In Sketch, you work with Artboards, whereas in Figma, you work with Frames. Symbols in Sketch are called Components in Figma. However, this really is just a matter of wording, and if you\u2019re familiar with Sketch, you\u2019ll soon find your way around Figma.<\/p>\n<h2 id=\"figma-vs-sketch-features-and-functionality\">4. Figma vs. Sketch: Features and functionality<\/h2>\n<p>Now let\u2019s delve into some specific functions and features.<\/p>\n<p>One area in which Figma really shines is teamwork. If you&#8217;re a <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/work-as-a-remote-ui-designer\/\" target=\"_blank\" rel=\"noopener\">remote UI designer<\/a>, Figma might be the better option. Its most noteworthy feature is real-time collaboration and, just as the name suggests, multiple team members can work on the same design project simultaneously. No need to communicate edits back and forth; each participant can view them directly in the tool, as and when they happen.<\/p>\n<p>Not only is this a game-changer for remote teams; it also significantly streamlines in-house processes. Another advantage here is that Figma is browser-based, so a developer wanting to view a certain project, for example, doesn\u2019t need to install a design tool that they won\u2019t otherwise use. Each project has its own URL, so file-sharing is hassle-free.<\/p>\n<p>In terms of design tools, Figma also offers a couple of features that could be considered superior to their Sketch counterparts. Grids and constraints allow for total flexibility when it comes to creating resizable, <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/responsive-vs-adaptive-design\/\" target=\"_blank\" rel=\"noopener\">responsive layouts<\/a>. This is also possible in Sketch using the group resizing feature, but you are limited to four options only.<\/p>\n<p>Figma has also taken the traditional drawing tool and improved it by using vector networks instead of paths. As Figma co-founder <a href=\"https:\/\/blog.figma.com\/introducing-vector-networks-3b877d2b864f\" target=\"_blank\" rel=\"noopener\">Evan Wallace explains<\/a>:<\/p>\n<blockquote><p>\u201cA vector network improves on the path model by allowing lines and curves between any two points instead of requiring that they all join up to form a single chain.\u201d<\/p><\/blockquote>\n<p>In practice, this essentially means more flexibility when drawing.<\/p>\n<p>However, any points that Sketch may have lost to Figma here are quickly recovered when you consider the vast range of third-party plugins. In fact, there\u2019s pretty much nothing you can\u2019t do in Sketch if you\u2019ve got the right plugin.<\/p>\n<p>Whilst it\u2019s true that Figma comes with <a href=\"\/en\/blog\/ui-design\/the-value-of-prototyping-in-ui-design\/\" target=\"_blank\" rel=\"noopener\">native prototyping<\/a> and developer handoff capabilities, there are plenty of plugins which integrate Sketch with the most popular tools in the industry, such as <a href=\"https:\/\/zeplin.io\/\" target=\"_blank\" rel=\"noopener\">Zeplin<\/a> for developer handoff. For many designers, having to install a plugin is not enough of a hassle to swing them from Sketch to a new, less well-known tool.<\/p>\n<h2 id=\"figma-vs-sketch-the-verdict\">5. Figma vs. Sketch: The verdict<\/h2>\n<p>So, has Sketch met its match in the form of Figma?<\/p>\n<p>In terms of collaboration, Figma is definitely onto something. The fact that it runs in-browser is an immediate advantage for anyone who doesn\u2019t own a Mac, or who needs access to certain files but doesn\u2019t want to download and install design tools (i.e. developers).<\/p>\n<p>Figma has been built with teamwork in mind, and the real-time collaboration and detailed version control features are definitely where its strengths lie.<\/p>\n<p>However, in comparison to Sketch\u2019s $99 a year, Figma may prove to be an expensive option\u2014especially for larger teams. In terms of native design capabilities, the two tools are pretty much on the same page, but Sketch trumps Figma with its sheer variety of available plugins.<\/p>\n<p>At the moment, Sketch has age on its side. For the foreseeable future at least, we think that Sketch will continue to hold its position as the industry favourite\u2014but that could change very quickly with the collaborative, remote work that Figma is built for. When the 2020 numbers come in, we wouldn\u2019t be surprised to see a significant shift to Figma because of these key qualities.<\/p>\n<h2 id=\"online-tool-workshops\">6. Online tool workshops<\/h2>\n<p>Now it\u2019s time to make your own mind up. In the online workshops following this, Jakub and Olga, experts in Sketch and Figma respectively, introduce you to the two tools.<\/p>\n<h3 id=\"sketch-workshop\">Sketch workshop<\/h3>\n<p>In this workshop, Jakub (the creative lead at CareerFoundry) walks you through Sketch and its fundamental features and functions, covering everything from how to work with artboards to creating and using different text styles.<\/p>\n<style type=\"text\/css\">.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<\/style>\n<div class=\"embed-container\"><iframe src=\"https:\/\/www.youtube.com\/embed\/p1exqGDnOrg\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<h3 id=\"figma-workshop\">Figma workshop<\/h3>\n<p>During this workshop by lead product designer and UI design mentor Olga, we go through the Figma interface from the most basic functionality all the way to the most powerful features.<\/p>\n<style type=\"text\/css\">.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<\/style>\n<div class=\"embed-container\"><iframe src=\"https:\/\/www.youtube.com\/embed\/Saz6S1svYns\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<h2>Further reading<\/h2>\n<div>If you&#8217;d like to explore more of the world of design, then these articles might interest you:<\/div>\n<div>\n<ul>\n<li class=\"entry-title ds-typography__h1\"><strong><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/ui-animation-beginners-guide\/\">UI Animation: A Complete Guide For Beginners<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/what-is-flat-design\/\">What is Flat Design?<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/color-palette-trends\/\">5 Color Palette Trends that Will Brighten Your World<\/a><\/strong><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Figma, the first browser-based UI design tool, is causing quite a stir in the industry. How does it measure up to Sketch? Find out here.<\/p>\n","protected":false},"author":5,"featured_media":370,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"yes","_lmt_disable":"","footnotes":""},"categories":[4],"tags":[],"class_list":["post-4378","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-design"],"acf":{"homepage_category_featured":false},"modified_by":"Matthew Deery","_links":{"self":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/4378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/comments?post=4378"}],"version-history":[{"count":2,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/4378\/revisions"}],"predecessor-version":[{"id":29992,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/4378\/revisions\/29992"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media\/370"}],"wp:attachment":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media?parent=4378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/categories?post=4378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/tags?post=4378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}