What's New
New website, course and product updates - April 2024
A lot happened this month. Take a look at what's coming.
Michael Wong
Apr 17, 2024
·
7 min read
It’s one of the most frequent questions I get asked: Figma vs Adobe XD vs Sketch, which is better in 2021?
The statistics behind these three UX/UI design platforms prove that this industry is only getting bigger.
- Figma has a whopping 4M+ users with more joining every day.
- Adobe XD is backed by juggernaut Adobe with a market cap of $312.90B
- Sketch raised over $20M+ in venture capital to expand its product offering globally
Sure, the numbers are impressive. However, they still don’t answer the big question: which UX/UI design tool is the best to use?
When it comes to UX and UI design, it’s tricky to know which tool is best without trying them all. Some people (including myself) would argue that Figma is the best design tool on the market. Others say it’s a close battle of Figma vs. Sketch or Figma vs. Adobe XD.
It’s no secret that I am a big fan of Figma, and I’m not alone! After teaching over 500k enthusiasts on my YouTube channel, I decided to launch the Figma & UI Design Masterclass Course where you can learn how to become a Figma Pro in one of the world’s leading UI design tools. That being said, in this article I want to help you decide which one is best suited for your workflow. Each tool has different features and capabilities – it’s not a one-size-fits-all situation.
If you’re unsure which tool is best for you, this guide is designed to help you understand the capabilities of Figma vs Adobe XD vs Sketch, and understand why and how these tools have quickly become a favourite.
Overview
Figma:
Figma’s power comes from its incredibly fast and intuitive cloud-based app; a necessity when collaborating on larger projects or with multiple teams.
Figma is easy to use and highly intuitive, making it a favourite for creatives and UX/UI designers the world over. The introduction of FIGJAM, an online whiteboard used for brainstorming, diagrams, and online presentations, has been praised in the community for giving UX/UI designers a creative space for virtual brainstorming exercises, team collaboration, sitemaps, user flows, and customer journey mapping.
Figma allows users to effortlessly create dynamic designs with Autolayout (a no-code feature that emulates the CSS3 Property Flexbox), easy-to-use constraints that can be set to any element, the ability to create advanced animations with Smart Animate, and set component combinations to heart’s content.
As Figma is cloud-based, you can’t open a file while offline. Connect to the web to open any previous work. However, if you already have the file open, you can work offline so long as you don’t need to search for anything in your Library.
Adobe XD:
A member of the Adobe Creator Cloud, XD has quickly gained popularity for Adobe-native designers and developers. With the ability to support files from Illustrator, Photoshop, and AfterEffects, XD also allows for teams to integrate useful communication tools like Slack and Microsoft Teams.
A popular tool for UI prototyping, XD is often preferred by users already holding a subscription to the Adobe Creative Cloud as it allows access to the Asset Library.
Adobe offers many of the same features as Figma. It includes the highly popular Auto-Animate tool for front-end design, and the ability to drag and drop images. XD is a powerful tool but it can get laggy or messy on larger live-collaboration projects, leading to overcomplicated projects.
Sketch:
Sketch is a macOS-native design tool perfect for many UI/UX designers. It is easy-to-use with a bunch of design tools to suit different devices and screen sizes. Many web designers also prefer to use Sketch thanks to its great plugins.
A smaller streamlined version of XD and Figma, Sketch does have some scalability issues. It reportedly crashes on larger projects, and being a macOS-only program have alienated a lot of the community. While Sketch is a perfectly capable tool, the Creative Director of Unfold has famously said that “comparing Sketch and Figma is like comparing Notepad and Google Docs.” Both tools do the same thing, just one tool does it better.
Supported Platforms:
Figma:
A predominantly browser-based software, Figma can be run on all full operating systems including macOS, Windows, Linux, and Chrome OS. Figma also has a handy desktop application available for macOS and Windows, with an updated version currently in beta testing.
Download the Figma Mirror app for iOS and Android devices to use live device previewing (more on live collaboration later in this article).
For mobile users on devices that run mobile operating systems (such as iOS), you’ll only be able to access a View Only version of your files. However, for those devices able to run a full desktop OS like the Microsoft Surface, you won’t have this problem.
Adobe XD:
Adobe XD can be used on a browser, desktop, or mobile app. Suitable for macOS and Windows users, Adobe also offers the XD mobile app, which allows you to preview your files and designs on iOS and Android devices, but you’ll need to edit your design using XD on the desktop.
Currently, XD doesn’t support viewing of shared design specs on mobile browsers, or Windows 7 & 8.
Sketch:
Currently, Sketch is macOS only, with no plans for Windows or Linux.
Live Collaboration
Figma:
When Figma was launched in 2016, their USP was their innovative and highly intuitive live collaboration capabilities. Multiple team members can collaborate and view designs in real-time (just like in Google Docs.) One of the most powerful live collaboration design tools on the market, it allows for better communication across teams.
UX/UI designers can easily see the latest project updates on the Project Pages, track contributors and projects on the Team and Organization Pages, edit in real-time, and, using the Observation Mode, watch every pixel.
When you’re first learning the Figma ropes, it can feel a little overwhelming. After spending years in the trenches experiencing every emotion under the sun using Figma, I decided to create a simplified, easy-to-use, intuitive Figma design system and Figma & UI Design Masterclass Course. Why make life more complicated than it needs to be?
Some UX/UI designers find the live collaboration feature a little intrusive – no one wants to have someone peaking over their shoulder when they’re working. Other experts have noted that a live collaboration tool stops design errors before they happen. At the end of the day, these issues all come down to a person’s preferred working style.
Adobe XD:
Adobe XD’s coediting allows real-time collaboration in the cloud. For those comfortable working with Adobe software, or for those looking to collaborate with other Adobe users, this feature of XD is a blessing.
Launched in 2019 shortly after Figma, XD’s coediting also allows for simple sharing across Creative Cloud Libraries, as well as the same live-editing features of Figma. Recently, some have noted a “sync” issue and lag between users on larger collaborative designs.
Sketch:
Sketch allows for real-time collaboration through their iOS app. The live collaboration feature is included as part of a subscription, but this is different to a “Mac-only license”, so make sure you triple check which subscription you have. This has become a headache for UX/UI designers or external stakeholders that need to monitor and provide guidance on a project or live editing.
Sketch also offers a Follow Mode where a user can watch another UX/UI designers work. Edits will only be shown once a user has completed an action.
Design System
Figma:
Figma has worked hard on upgrading its component system to streamline every UX/UI designer’s design system workflow. The ability to build highly scalable design systems that can be utilised across multiple projects is a Godsend. Over the years they have also continued to optimize their performance and the updates only get better and better.
Most recently in August 2021, they made a major update to their components workflow.
Figma allows you to create your own design system, you can also download my Designership Design System; designed for UX/UI designers like yourself who want to spend less time struggling and more time creating.
Adobe:
With Adobe XD, you can create a design system from the ground up in under 6 steps. The advantage of building your own design system is that it helps to ensure consistency across UX and UI designs for different team members. To make the process easier, make sure to use a few plugins.
Sketch:
Sketch has the same flow as Figma and Adobe in terms of design system capabilities, although many note that the need to sign up for 3rd-party services (such as Invision and Zeplin) to complete your product design workflow can be a hassle.
Animations & Transitions
Figma Smart Animate:
For those looking to create advanced custom animations, Figma’s Smart Animate seeks out matching layers, recognises any differences, and works to animate layers between frames in a prototype.
Adobe XD Auto-animate:
The recent release of auto-animate makes prototyping rich interactions even easier by automatically animating micro-interactions across artboards in Adobe XD.
Sketch Timeline:
For Sketch users, Timeline has become the go-to plugin for animations and interactions. A pretty simple paid tool, Timeline helps to improve the capabilities of Sketch by allowing you to animate for websites, mobile apps, ads, and more.
However, some note that the “animation tool fidelity is moderate,” and that its state-animation model makes it tricky to add smooth intermediate values and positions.
Hand-off
Figma Hand-off:
Hand-off in Figma is incredibly simple. Paper Tiger’s Mirko Santangelo has written a first-hand experience making the switch.
Before Figma, he notes, he used to send a long list of elements to developers “including source files stored in Dropbox, a couple of InVision projects, design specs created via plugins or tools, fonts, images, SVGs and some notes.”
But since making the shift to Figma, Santangelo now just has to share one link to the developers involved with the project.
Adobe XD Collaboration:
XD encourages users to approach hand-off as a “collaboration” rather than siloed work. XD’s hand-off feature is more than capable to handle a smooth process, although again, some report scalability issues and missing assets.
Sketch Hand-off:
In Sketch, developers can check and inspect designs and can even export assets without requiring a Mac suing the “Inspector” tool. To use the tool, just make sure you are viewing an individual Artboard instead, and then head to the Inspector button sitting in the sidebar.
Plugins & Extensions
Figma:
Launched in 2019, Figma now offers a full library of plugins and files built by the Figma community. Users can browse through thousands of custom-made plugins and files, and even build or remix plugins.
In August 2021, Figma went one step further by inviting all developers and builders to create the first plugins and widgets for FIGJAM.
We see how the official community works with Figma resources and develops through them. There is a lack of moderation in the community, so make sure the resources or plugins you’re considering are tested and suitable.
You can check out this guide to the best Figma plugins for 2021, but my personal top 3 boring but most useful plugins include:
Adobe XD:
Adobe XD offers a range of free and paid plugins and app integrations from both Adobe and third-party developers. Known as UI kits, XD enables deep integrations with external tools and services, boasting external integrations to assist with other UX/UI designers and stakeholders.
Some of the more popular Adobe XD plugins include:
Sketch:
Thanks to Sketch’s strong community of developers, they offer hundreds of powerful paid third-party extensions and plugins, designed to improve your workflow. You can browse assistants, plugins, integrations, or, like Fignam create your own.
Some people struggle with browsing plugins as Sketch doesn’t offer the same one-stop shop that the Figma community is offered. There are also reports that updating extensions, plugins, and systems can be time-consuming and can lead to multiple bugs or missing fonts.
Some of the more popular Sketch plugins include:
Network Effect
Figma:
Over the years, Figma has fostered a pretty dedicated community of UX/UI designers who in turn have created a creative ecosystem of projects and inspiration. The Community Resource section is filled with dedicated developers and other fellow UX/UI designers allowing people to bounce ideas, seek support, share creations, and seek out tech support from resource developers themselves. A dedicated platform for the community is being regularly updated and reworked, with more improvements on the way.
Interestingly, members of the Figma community have also branched beyond UX/UI design, sharing things such as:
Adobe XD:
Adobe has a strong userbase thanks to industry-leading software and programs like Photoshop, AfterEffects, and Illustrator. When compared to Figma, Adobe’s community is a little more formal, whereas Figma’s seemed to have grown more organically over time.
Customer support boards are hosted on the Adobe Customer Support website, although the board only has 9.6K Conversations to date (for comparison, Photoshop has 81K+). An interesting feature of XD is the Adobe-hosted live streams, where you can watch other design pros work on a UI/UX project in real-time, and ask them questions.
Sketch:
Sketch’s community may be slightly smaller in numbers, but they’re fiercely loyal and quick to help any struggling designers who need guidance.
Sketch also runs Ambassador and Sketch Advocate programs. With dedicated online communities for Sketch tech support, plugin and resource development, and even online classes, Sketch also encouraged (pre-COVID) local meetups with other ambassadors.
Cost/Pricing
Figma:
The Figma Starter account is free to use and includes one team project, and unlimited cloud storage, files in drafts, viewers, commenters, and editors on 3 team files.
The next pricing tier is Professional, $12 per editor/per month billed annually, or $15 on a month-to-month basis. You’ll get unlimited projects, unlimited version history, custom file/user permissions, invite-only private projects, and the highly useful shareable team library.
Adobe XD:
Adobe XD is available for a free trial of 7 days, bumping up to US$9.99/per month. The Adobe Creative Cloud for US$52.99/per month includes Adobe XD and comes with 20+ other programs including Photoshop, Illustrator, and After Effects.
Sketch:
When choosing which package to purchase through Sketch, you have two choices: a Sketch subscription, and a Mac-only license. The Sketch subscription is like a full package (live collaboration, developer handoff, etc). The Mac-only licenses only include the Mac editor app and therefore no access to any of our collaborative features. Be sure to check which one is best suited for you.
Sketch Standard, designed for solo users and teams, will set you back $9 per editor/ per month or $99 per editor/annually. You’ll get unlimited documents and projects, version history, shared Libraries, members, guests, and unlimited free viewers. The Standard tier is also offered as a 30-day free trial which can be cancelled anytime.
For larger teams, you’ll need to contact Sketch directly for a quote.
Figma vs Adobe XD vs Sketch: The Showdown
They say that a tool is only as good as the hands that wield it, and when it comes to these design tools, that saying has never been more on the mark. Figma, Adobe XD, and Sketch are all extremely capable in their own ways, but the most important part is to choose a tool that suits your needs best.
There are many advantages to all 3 design tools. It’s important to acknowledge what your specific needs are.
In my opinion, Figma is the most appropriate tool for the work I do right now. Hence why I have created my own Figma & UI Design Masterclass Course to help you become a pro, too. As these tools evolve, who knows who might take the lead. Nothing lasts forever, so I’m excited to see what lies in the future ahead!
.jpg)
