By Aaron Benjamin

Published: May 23, 2016

Last modified: October 12, 2016

Design Tool: Adobe XD

Adobe Experience Design(XD) really highlights the value of MVP product design in general and sets a fantastic foundation for things to come.

Project Comet

I first met XD when it was called Project Comet. It was a quirky piece of software that was really great at making basic shapes, and not a whole lot more. However, one of the things that stood out was its speed. Adobe put a lot of time and focus into performance. I could make rectangles and pan through hundreds of art-boards faster than anything else in my tool-set.

Over the next few releases, I opened Comet to check in on new features, draw a few screens, and tinker with the prototyping tools. The more I used it, the more familiar it became.

Features (My Favorites)

XD is still very early in the game. However, the MVP feature-set is pretty impressive, and I’m optimistic for what’s next.

LAYERS

At the moment, layers are invisible.

what animated GIF

This was a shocker from the start. How can I build a layered interface without seeing my layers and groups?

As it turns out…This is 100% doable.

Using XD highlighted how much time and effort I was putting into organizing and naming layers. Then I asked myself a question…

Why on Earth am I spending all this time organizing and naming layers?

XD forced me to focus on more important things like interactions, layout, and transitions. It’s as if the software was saying in an angelic voice “Don’t worry about those layers, I’ll hold on to them for you while you go do your thing.”

PEN TOOL

I’ve never been too handy with the pen tool…until now! XD brings all the different pen tool flavors into one. You can create a path, edit the path, make new points, and control the handles without switching to different pens. Also, there’s a nifty guide when you’re creating a new path that shows a preview of how the line will curve.

sorcery animated GIF

REPEAT GRID

One of the most tedious tasks in laying out a screen is creating the same element over and over and maintaining changes to styles of each element.

XD makes this a bit easier by replicating the selected element in whichever direction you expand the grid. Styles update automagically, and I can even drop images or a .txt file into the elements to populate content. (WOWZERS)

A. L. Crego animated GIF

Prototyping

One of the most exciting pieces of XD is in-app prototyping. Being able to toggle from Design mode to Prototype mode is some pretty cool stuff.

While exciting, this is also the area with the most potential to grow. Modern app today are breaking the traditional mold of “click-and-go” screen-to-screen transitions. A new visual language is emerging where an on-screen narrative is communicated through gestures, animations, and transitions to different states of the same screen or different areas of the application.

The existing problem for designers is that these micro-interactions are often the most difficult aspect of product design to communicate to developers and engineers.

The task at hand for Adobe is to invent a way to make demonstrating these interactions easy for designers, but also provide enough detail for developers to execute them.
Maori Sakai animated GIF

Wish List

From my perspective, there’s still a lot of ground to cover with experience design tools. I hope to see tool that help with the full process of identifying problems, iterating solutions quickly, gathering feedback, testing ideas, and producing hi-fi collateral to communicate designs.

STYLE GUIDES

A living style guide is a big help when designing in both small and large teams. Being able to create and maintain reusable design assets allows designers to focus on the experience and flow of their product and provides developers with the visual specs they need to mirror the design perfectly.

DEVICE MOCKUPS

Prototyping in a great way to communicate an idea in detail. To give mockups and prototypes context, it would be great to be able to export stills and recordings of screens on device images. Often, screen mockups don’t end their lifecycle when they’re presented in the boardroom or passed off to a developer. Screen designs need to be exported to landing pages, included in marketing material, and even featured in promotional videos.

NATIVE FUNCTIONS

One of my gripes with available prototyping tools is having to mimic lock screens, keyboards, cameras, etc… where they fit into the flow.

If I’m testing a login page prototype, the user should be able to type in a username with the device keyboard.

VERSIONING & SCREEN MANAGEMENT

Keeping up with screen versions/IDs and managing flows for medium to large apps can be a nightmare.

nightmare animated GIF

I would hope that down the line, I’d be able to see a screen inventory (maybe in a list-view) with options to review, approve, or roll-back iterations inside of a single source of truth.

RESPONSIVE MIRRORING / ELASTIC ART-BOARDS

Working on a responsive web page or multiple constraints for an app usually means creating 3 to 7 art-boards at different sizes or designing in-browser if you’re clever enough. Being able to design on multiple screens at once would be a neat trick. Essentially treating each mirror as an art-board that I can move my mouse to and manipulate would be a dream come true.

Another approach could be an elastic art-board paired with different units of measure for each element (%, ems, rems, px, pt…etc.)

Keep up the good work Adobe!

✌Join us for more

1000s have recommended us, sign up today for free.

  • Stay up to date with prototyping tools and design news.
  • Comment and give feedback.
  • Become an author and share your expertise.
Sign Up