Opinion

Adobe XD vs Invision Studio: First Impressions and Effectiveness of Use in Designing and Prototyping (with images)

[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.

User Interface

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 - Adobe XD

UI Interface – Invision Studio

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

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.

Adobe XD

Adobe XD dropping an image on a drawing shape

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.

Invision Studio

Invision Studio dropping an image on a drawing shape

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

Interactions Invision Studio

Interactions Invision Studio Timeline

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

Adobe XD password protected mockups

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 Adobe XD

Collaboration Tool – Invision Studio

Invision Studio add comments anywhere on the screen

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

Adobe XD prototype 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.

Keyboard shortcuts

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.

Text Editor

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.

OS Availability

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.

Price

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.

Platform Bugs

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.

Conclusion

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.

Rate this post

Adobe XD vs Invision Studio: First Impressions and Effectiveness of Use in Designing and Prototyping (with images)
5 (100%) 5 votes

Get notified of my new post

Connect With Me

I’m currently looking for a new and exciting role and/ or if you would like to collaborate, catch me at

coconstantino@gmail.com / +64 021 157 2214

Under the sea fish wing