Insights

Sketch, Figma, Adobe XD, Oh My! Is It Really Worth Switching?

It's the cross-platform dilemma: you want to design your next generation product across iOS, Android and web, but you can only choose one of these cross-platform frameworks. What should you do?

This article will give an overview of some of the best cross-platform tools on the market and compare their advantages and disadvantages in order to help make a decision.

Sketch 

Sketch is a cross-platform design tool that runs on OSX and has become incredibly popular in recent years. Sketch was built by the developers at Bohemian Coding (the same company behind other well known products like Fontcase, Tentacles and Apple Design Award Winner GFX) as an alternative to Illustrator, Photoshop or Fireworks. It is highly popular for its ease of use and cross-platform capabilities.

Sketch is available for free with no trial period or watermarks, but to take advantage of the latest plugins (which are essential) users will have to purchase a license that costs $99/year. Sketch also offers an educational discount which gives students access to all new versions.

Technical requirements for Sketch are just a Mac running OSX Yosemite (and above) plus an Intel processor.

Figma 

Figma is a  cross-platform design tool that runs on both OSX and Windows (and is soon coming to the web). It was built by the developer behind Google Docs, Drive and Gmail as an alternative cross platform option. Figma has become popular for its real time collaboration abilities which allow teams of designers across different locations to work simultaneously. 

Figma is free to use and does not require a paid subscription, but users will have limited access unless they upgrade. Figma also offers an educational discount which gives students full features (though it only applies for the current release).

Technical requirements for Figma are just a PC running Windows or OSX with Chrome installed.

Adobe XD 

Adobe XD is a cross-platform design tool that runs on both OSX and Windows. It was built by the developers behind Adobe Illustrator, Photoshop and After Effects as an alternative cross platform option for these tools.

Since its release Adobe has been pushing hard to get designers to switch over to XD. Adobe currently has a free plan that gives users access to the most basic features. In early 2019 (after being delayed) this situation changed because of a release in their paid subscription model.

Technical requirements for XD are just a PC running Windows or OSX with Chrome installed.

Why to choose one over the others

The cross-platform dilemma is one that many designers face when trying to choose which cross platform option is best for them. Figma and XD are the newest options on the market, but they also have some of the most powerful features available (especially in real time collaboration), we'll go over those in a few lines. Sketch has had a head start though and with its ease of use,  intuitive interface and cross-platform capabilities it has become more popular than ever.

Before we go over the pros and cons of each cross platform tool, let's first outline what you should be looking for in a cross-platform design tool: 

  • Ease of use 
  • Ability to work on both Mac & PC 
  • Quick learning curve (especially  if you're already familiar with Adobe products)
  • Ability to create cross platform prototypes (or mockups of your designs in their final state) 
  • Collaboration features:

Some of the most useful collaboration features Sketch, Fimga and Adobe XD offer are:

  • Version control: allowing team members to work simultaneously on the same file
  • Real time chat
  • Drag and Drop assets from one user to another (even if they're not using the same cross platform tool)
How to use each one for your specific needs 

Now that you know what cross platform tools are available, which one is the best for your needs?

Figma and Adobe XD both offer powerful real time collaboration options. Both also have a quick learning curve with lots of tutorials to get new users started. Figma has cross-platform prototyping capabilities (called "states"), while Adobe XD  does not. Figma has a free plan, but Adobe XD does require you to purchase either the monthly or annual subscription (which is where they make their money). Sketch  offers cross-platform capabilities and can create cross platform prototypes with it's "art-boards". However, it does lack powerful collaboration features as well as some of the other new features.

It's not easy to jump into conclusions yet, let's  take a look some of their main features to help you decide which one is best for your needs.

What are the features of each software and how does it work with other applications (e.g., Photoshop, Illustrator, InVision etc.) 

Sketch's main or most popular features are its ease of use, cross-platform capabilities and powerful plugins. It also has a thriving community filled with countless resources to help you succeed (like this Sketch Resource Guide).

Sketch works with other apps like Photoshop, Illustrator or InVision  as it's cross-platform. That means you can design and prototype in Sketch, export to your favorite tools for some extra work (e.g., Photoshop) or mockup what the final product will look like using something like InVision .

Some of Sketch's coolest plugins are:

Craft: an awesome plugin that allows  you to generate complex shapes with just a few clicks. I use Craft almost every time before exporting my designs (saves me so much time)

Invision: another time saver, this one makes creating full screen product mockups easy as it lets you add your content quickly and styles them beautifully in one click

Xara: this plugin is only for Mac users and it helps you create vector shapes quickly and easily (it's my go to when I'm trying to whip up a quick wireframe)

Figma's main or most popular features are its cross-platform capabilities, real time collaboration and powerful features that help you design with precision.

Figma works great with other apps like Photoshop (and many others) as it's cross platform. That means your designs will be accessible to everyone on the project from day one without having to worry about compatibility issues.

Some of Figma's most popular plugins are:

Content Reel: browse or search content to find published collections of text strings, images, and icons. Having trouble finding what you need from existing content? You can create your own text and image content by using Add

Unsplash: The Unsplash License allows images to be used freely for both commercial and personal projects.

Vectary 3D Elements: Vectary 3D plugin for Figma is adding the missing third dimension to your 2D designs. Place your Figma design into a predefined 3D mockup or your custom 3D element. Set your desired perspective in 3D and place the result into the scene with one click.

Adobe XD's most popular features are its cross-platform capabilities, ability to create cross platform prototypes and powerful features that help you design with precision.

Adobe XD works great with other apps like Photoshop (and many others) as it's cross platform. That means your designs will be accessible to everyone on the project from day one without having to worry about compatibility issues.

Some of Adobe XD's most popular plugins are:

Adobe Stock: this one is a given as it's an essential plugin for any cross platform design tool

Typekit: allows you to easily add fonts from the web or your desktop (it connects with Creative Cloud) so that they are accessible in XD 

Tips on getting started with a new tool and what you'll need to get started

The following are some tips for you to get started with these amazing tools:

For Sketch, it's best to use a Mac. It is cross platform and available for both Windows and Mac so you can work on your designs from either PC or mac (even Linux). You'll need an Adobe Creative Cloud account in order to access the plugin library at first though

Figma works with any web browser and can be used with Mac, Windows or Linux. It works best on Google Chrome though (you'll need the latest version)

Adobe XD is cross platform and available for both Windows and Mac users (no support yet for Linux but you can try it out using Wine). You have to have an active Creative Cloud subscription in order to access

Still indecisive? Keep reading. At the end of this guide, we'll be breaking down some additional cross platform tools that might help you decide which one is best for your needs!

Resources for learning more about all three tools and which ones might be best for your project type(s)

If you want to learn more about Sketch, Figma and XD , here are some helpful resources:

The Sketch Handbook by Mike Rohde: a good book for learning the basics of this cross platform tool. It's an easy read and includes tons of tips that will help you design your wireframes in no time

Sketch Masterclass by Chris Bank: another great resource to learn more about using Sketch as it focuses on  the medium

Design+Code by Meng To: this is a book that will teach you how to use Sketch and Xcode together in order to build cross platform prototypes (also available on iBooks)

Adobe XD's official tutorials: contains plenty of useful videos that should help you get started with the tool. It also has some great  resources for designers that are just starting with cross platform products.

Figma's official tutorials: is another great resource to learn more about the tool and it even has some basic tools (like a color picker) included in its tutorial videos so you can get started ASAP! It also has  resources  for advanced users like coding plugins, keyboard shortcuts and more

At this point, you are probably wondering which of these tools is the best fit for your project. We’ve been in a similar position and have found that each tool has its own strengths and weaknesses. Sketch seems to be more intuitive than Figma but not as versatile when it comes to designing interfaces or animations; whereas, on the other hand, Figma shines with interface design but lacks animation support. Adobe XD falls somewhere between Sketch and Figma with some applications like Photoshop being compatible while others such as Illustrator needing an additional plugin (Ink).

The good news is we are here to help you, we want to team up and design and build your digital products, no matter which tool we use, we know you'll be happy with the results. Let’s talk!

About the author

Alejandro Herreño is a UI/UX Designer born in Barranquilla (Colombia) with 7 years of experience making products that bring something new to people's lives. At Zemoga he's focused on bringing the Bridgestone Design team to a next level.