In recent years, Adobe XD has been gaining popularity as one of the top UI/UX design tools. Adobe’s Photoshop and Illustrator has always been popular with UI?UX designers. But they were not developed specifically for the purpose. With Adobe XD, designers have a platform specifically designed for UI/UX, for designing Android, iOS, and web apps.
The first news about Adobe XD came at the Adobe Max Conference in October 2015, when they announced that they were working on an interface design and prototyping tool. The first beta version was released in March 2016 and was out of beta in October 2017.
Contrary to Adobe’s usual style, Adobe XD was soon offered as a free software, albeit with limitations on collaboration. The free version comes with 2GB of cloud storage and is not likely to be discontinued any time soon.
So what do you get with Adobe XD? Read along.
Different modes in Adobe XD
Once you open an artboard on Adobe XD, you’ll notice different modes ‘Design’, ‘Prototype’, and ‘Share’. The Share mode is what you’d expect, you can quickly share your project with clients, or team, and collaborate, or get their feedback in real-time.
Design mode works pretty much like a canvas. This is where you create the visual aspects of your design. Here you can create different elements, artboards, etc.
You move on to the Prototype mode once you’re done with the design. Here you create links to different artboards, basically make your design more interactive. With this mode, you can see how your design will actually look like, how it will play out when you make your app or website. And you can quickly spot and fix design flaws that may be more expensive to fix down the line.
Components and states
These are two features of Adobe XD that makes your work easier.
Components are objects that you can reuse across your artboards. Let’s say you design an icon or a button that you use across a website. If you have used the same button across 5 different pages, and there’s a small change to the button, changing them all is not only annoying, it’s also a waste of time. By making it a component, you make changes to one, and the change is reflected across the entire .xd document.
Component states are how your components look or act in different situations. Components have a default state, and you can add more states to each component. In the Prototype mode, you can set triggers to these components as well. For example, in the design mode, you can create states for how a button will look like when you click on it or when you hover on top of it. And in the Prototype mode, you can set triggers for these different states, and link them to other components or states. So a button will have a white background by default, turning into a black when you hover on it.
Preview on phone/device
As you can expect with any design tool, Adobe XD lets you preview your prototype easily. But a really cool feature is the real-time mobile preview. Adobe XD is available for Mac or Windows or Linux, but it also comes with mobile apps for Android and iOS devices. Download the apps, and you can preview your design on your devices.
With a USB cable, you can also preview your design in real-time on your phone while you’re working on it. It will help you quickly spot and fix any issues.
But you don’t have to carry your PC or laptop everywhere to show your prototype. You can load your design from Adobe cloud, and even if you’re offline, you can view the last version you previewed on your device. Your team and clients can see exactly how it will look like even before the app is built.
Responsive resize
Mobile devices come in all shapes and sizes these days and it is important to make sure your design works for these different sizes. Creating different artboards for different sizes, duplicating every element, and resizing manually takes up a lot of time. And this is where responsive resize from Adobe XD comes in handy.
All you have to do is group your elements or objects, so as to let adobe know which all needs to stick close to each other, and resize the artboard. Adobe XD then adjusts the relative spacing to the new size. Of course, it doesn’t do all the work for you, you may still need to manually make some adjustments to make it perfect, but it sure is way easier than creating 10 designs for 10 sizes.
Adobe XD vs Figma Vs Sketch
Sketch was one of the first design tools expressly made for UI/UX. It got the Apple Design Award two years after its launch. And is still one of the most popular tools out there. It could be argued that the success of Sketch was the reason for the appearance of other tools created solely for UI/UX.
Figma is somewhat unique in the sense that it is primarily web-based. You can start using it from a browser. It became available to the public in 2016. It has gained a lot of attention and is said to be used by designers in top Silicon vallery startups.
So let’s see what are the pros and cons of these three.
Available platforms
As a browser-based tool, Figma leads on the number of platforms it can be used on. You can use it on just about any platform that supports a modern browser. Sketch is available only on Mac, and Adobe XD is available only on Mac and Windows.
Companion apps
All of them comes with companion apps for viewing your designs /prototypes on mobile devices. Sketch has Sketch Mirror, Figma has Figma Mirror, and Adobe XD, well it has apps by the same name.
Collaboration
When it comes to collaboration, Figma leads again. It was the first among the three to allow real-time collaboration, allowing multiple designers to work together on the same design. Adobe XD introduced real-time collaboration in 2019 and the same feature from Sketch is now in a public beta.
Plugins
When it comes to plugins, nothing beats Sketch (as of now). They have a huge library of plugins for prototyping, animation, and one interesting tool for viewing your design to different mockups in different angles. But this doesn’t mean the other two are lacking in plugins either. They have enough plugins to get you going.
Licensing options
Licensing is another area where things get interesting. Adobe is free for individual use. Unless you want to collaborate with a large team, or you want higher cloud storage, you’re good to go with the starter plan. You’ll have to pay if you want access to the complete font library or if you want to share more than one link.
With Figma, for the free plan you get two editors and 30 day version history(same as Adobe). You also get unlimited cloud storage and unlimited free viewers. Unlike Adobe, you get unlimited version history with both the paid plans for Figma. But you only get 3 projects in the free plan.
Sketch has an interesting plan, where you make a one-time payment of $99. With this plan, you get one year of updates and access to the cloud. After this, you lose the cloud storage and updates, but you can keep using the last version of that year without any payments. You can continue getting the cloud storage and updates by renewing the subscription for $79. Sketch also has a monthly plan for $9 per user which is available to teams.
Interested in UI/UX? You’ll love our article about dark patterns.
