I'm a member of a great tutorial site called Design+Code. They've released a short series showing screen design in Figma and then taking those designs into Principle for advanced prototyping (view their lesson). These are great apps that I use for my own projects, but my company uses a typical Sketch/InVision/Zeplin workflow. Adobe XD has recently evolved as a realistic alternative with a great feature set and we've been using it for some of our more complex prototypes. XD's speed and stability is amazing, it's smoothly handling 150+ screens at 2560x1440 resolution (enterprise software dashboards). I wanted to see how much of Design+Code's Figma/Principle tutorial I could recreate in Adobe XD. 

While not as full-featured as Principle, XD has some intrinsic advantages when it comes to benefitting from Adobe's ecosystem. Principle has a relatively robust preview mode compared to most prototyping apps that seem to be more concerned with Dribbble GIF export than developer handoff or client/internal approval. However, it still falls short when it comes to showing a design to ALL stakeholders. XD lets the designer send a link that can be viewed on both Windows and MacOS. This is important because many stakeholders use Windows machines, especially on the business side of things. These people are often spreadsheet wizards but aren't typically savvy when it comes to trying to figure out how to test a prototype!

I was easily able to design the screens from scratch in XD and then build a prototype with animation that rivaled Principle (at least what was covered in the tutorial). I wasn't able to recreate EVERYTHING, but I got close, which felt like a big win considering XD's other features/advantages. Please remember that the concepts, content, and design are intellectual property of Design+Code and Meng To and not my own. Open the prototype in a separate tab Here or check out the embedded version below and remember to just click anywhere on its screen for hotspot hints if you get stuck (all interactions are either tap or drag gestures). 
Back to Top