New Slick Prototyping Tool, Adobe Experience Design (XD)

I can say that now is the age of interactive prototyping. Designers tend to create prototype with animation instead of static image. If you search prototype on Dribbble, you’ll see that most designers posted GIF images. I myself usually use inVision or Marvel App to create interactive prototype with simple animation.

Have you heard about Project Comet? Initially demoed at Adobe MAX in October 2015, it got a new identity as Adobe Experience Design or Adobe XD, or just XD, for short. Creating visual design, prototyping, wireframing, testing, and demoing are all possible using XD.

So let me share you my quick glance review about Adobe XD.

Interface

On the opening screen, we can choose common screen size for our new artboard. We can also create custom-size artboard as well.

Adobe XD Opening Screen
Adobe XD Opening Screen
Adobe XD Working Screen
Adobe XD Working Screen

My first impression when I looked at Adobe XD working screen is it looks similar to Sketch, but more simple. XD only has 7 insert tools on the left-hand side, Select: V, Rectangle: R, Ellipse: E, Line: L, Pen: P, Text: T and Artboard: B. You can find Design tools and styling panel on the right-hand side, e.g., fill color, border color & width, opacity, shadow, etc.

We can’t find vector editing icon on XD panel, just like Sketch, because we can double-click the shape directly on the canvas to enter the editing mode, and then double-click the shape’s points to convert them to bézier curves.

Has Adobe taken the minimalist approach too far, or are we becoming more aware of how design tools work? Perhaps it’s true what they say, the best interface is no interface!

Adobe XD is organized into two tabs. One is Design, the other is Prototype. On Design tab, you can build your own layout. In Prototype, you can give your images interactivity, and build the button-linked workflow of your whole app or website.

Features

First cool feature that I found in first 5 minutes using Adobe XD is image mask. Why is it cool? Because I love the way Adobe XD proportionally resizes the image. Look the difference between XD and Sketch below.

Adobe XD – Resizing image mask
Resizing image mask on Adobe XD
Resizing image mask on Sketch
Resizing image mask on Sketch

The second feature is Repeat Grid. It really makes us easier to prototype. We can replicate any elements horizontally or vertically as many times as we want. We can even click the spacing in between each element and drag with the mouse to adjust it.

Repeat Grid
Repeat Grid

Another great feature from Adobe XD is you can create interactive prototype. If you still compare Adobe XD to Sketch, Sketch doesn’t have this feature. And one last thing, Adobe XD allows us to share our prototype online. That way, I think you don’t even need either inVision or Marvel anymore :D.

This software running smoothly on my old Macbook Pro 2011. It’s true what they say, XD is built from scratch, and built for speed. With all features that I found in first release, I think it’s enough reason to keep an eye on Adobe XD. I even heard that Adobe plans to add layer support, options for gradients and text blending, scrollable content, real-time design and preview on actual iOS and Android devices, API support, and Windows 10 availability (right now, this release is Mac exclusive). Hmm.. Looks promising!

Leave a Reply

Your email address will not be published. Required fields are marked *