[Updated on 24 Sep 2018]
For the past ten years as a digital and website designer, I have always used Adobe Photoshop as my go-to tool for designing websites and mobile applications. However, things have dramatically changed in the web and mobile app design scene since more and more UI/UX designers care about the overall user experience of the website and mobile apps more than just the aesthetic value. For a pleasant user experience, UI/UX designers need tools that offer efficiency In designing, prototyping, testing, and collaboration.
Currently, there are numerous UI/UX design tools available in the market such as UXPin, SketchApp, Axure, Proto.io, Marvel and Invision to name a few. You can explore each of these to determine which platform suits your needs and preferences. For this article, we will be comparing Adobe XD and Invision Studio based on several parameters.
Both platforms have a neat and minimalist style. The tools and control panels are arranged properly to prevent confusion on the part of the user.
For this parameter, I give the points to Adobe XD since its toolbar is easily accessible with just one click compared to that of Invision Studio which requires the user to perform two clicks to access the toolbar with the shape, objects, and text tool. With Invision Studio, you have to click the rectangle tool each time you want to create a shape. I also found the font and icon size of Invision Studio quite small and difficult to read.
UI Interface – Adobe XD
UI Interface – Invision Studio
Speed and Efficiency
I was pleasantly surprised the first time I used Adobe XD in website design and prototyping. It saves me a lot of time compared to Adobe Photoshop and Invision Studio.
I love Adobe XD’s repeater grid which allows you to duplicate objects, images, and texts easily. You can also drag and drop images inside the repeater grid and it automatically fills the empty object with thumbnails of photos.
Adobe XD Repeater Grid
On the other hand, Invision Studio has a “Component” that allows you to convert a reusable layer which is then added to your library. Also, when you make changes, it is automatically applied to all items. Recently, Adobe XD has added a similar feature and they called it “Symbols”.
Shapes and Images
In Adobe XD, I can easily fill the shapes with images by just dragging the images in my desktop and dropping it in the shapes.
On the other hand, Invision Studio will not fill the shapes with images, instead it will fill the whole canvas with images which I find it disappointing.
Interactions and Motions
Basic interactions like tap triggers, easing and slide left, right page transitions are available in both platforms but when it comes to advanced animation, Invision Studio wins hands down. Invision Studio can set object animation when moving and fading objects. It also has a timeline which allows you to set the timing of the layer animation.
Quite frankly, I am still on the process of understanding how Invision Studio motion and layer animation works as I have gotten used to Adobe Flash which has a completely different concept.
Invision Studio – Interactions
Sharing Prototype and Collaboration Tool
In terms of sharing, I think Adobe XD works better because shared links can be set up with a password so that only authorised users can preview your work.
Public Prototype – Adobe XD – Require Password
In terms of collaboration, I prefer Invision Studio because of its feature that allows you to add your comments anywhere on the screen compared to Adobe XD where you are only allowed to add comments on the sidebar window.
Collaboration Tool – Adobe XD
Collaboration Tool – Invision Studio
Previewing your prototype
For both platforms, reviewing your design work simulates the device based on its screen size but one thing I observed is that Adobe XD provides a low quality output unlike Invision which has sharper quality.
Adobe XD has now capability to record your prototype screen with cursor hotspot and save it as .mp4 video format.
Adobe XD screen recording
Online Community and Tutorials
As far as I know, Adobe XD has a bigger community of users and has more online tutorial resources than Invision Studio. This means that Adobe XD is more community friendly for beginners as there are lots of references in Adobe XD forums, search engines such as Google, and video-based websites like Youtube, Udemy and Lynda. Tutorials for Invision Studio can be limited to Invision Studio forum and Youtube.
Online Resource Materials
Just like the tutorials, Adobe XD has more resources available in the internet compared to Invision Studio. UI kits and icons in Adobe XD file format can be easily found in the internet.
Supported Image Formats
Adobe XD supports all common image formats for web and mobile apps like JPG, PNG, and SVG in comparison to Invision Studio that does not support SVG format.
Since I am more familiar with Adobe’s interface, I choose Adobe XD for the efficiency of keyboard shortcuts as they are just similar to that of Adobe Photoshop and Adobe Illustrator.
Exporting as Image File
Both platforms can export artboards in JPG and PNG format. However, one advantage I noticed with Invision Studio is that you can export a single element in the artboard in contrast to the low quality image that Adobe produces when exported.
As ridiculous as it may sound, Adobe XD has no button to change the text to uppercase or lowercase unless you type it manually.
Grid and Layout
Based on my experience, grid and layout can be set much easier in Invision compared to Adobe XD. In Invision Studio, I would just specify the column, margin, and gutter measurements then automatic calculation is done by the system. With Adobe XD, i am experiencing difficulties on understanding how the grid works, The bottomline is that Invision Studio is more user-friendly in terms of setting measurements compared to Adobe XD.
Adobe XD is available in both Windows and Mac computers while Invision Studio is strictly for Mac users only. Developers of Invision Studio are currently working to provide Windows support in near future.
Adobe XD and Invision Studio are both free at the moment. Adobe XD provides an option to upgrade from a free plan to a premium plan.
In my experience, Invision Studio is stable while Adobe XD is quite buggy. For instance, when I tried to type in the numbers to change the object size or text font size, it changes the opacity instead.
It also shuts down the application without warning so it would be helpful to click on the Save button often.
There are times when the copy and paste feature is not working so you have to restart the application to make it functional again. Also, bugs can happen when you want to apply a certain color to an object but when you use the color picker, the one that is applied is the color of the column grid and different from the one that you picked.
Both platforms are still in the early stage and both have the potential to be the best and widely used UX/UI design tools. Both platforms have their respective pros and cons so it is really up to you which one to choose or better yet, you can try both.
Personally as freelance web designer, I prefer to use Adobe XD compared to Invision Studio because Adobe XD updates their software faster with new tools and new features. It also supports the SVG file format and a handy repeater grid to duplicate the blocks. On the other hand, Invision Studio’s motions and advanced animations look very promising.
Please be informed that as of this writing, I may have missed out some updates and new features that may have come out from both platforms. I will do my best to keep this post updated.