Adobe recently opened up a preview for their latest tool called Adobe XD (Experience Designer) on the Creative Cloud. The market for simple User Interface design tools and prototyping has been an area that Adobe has been falling behind. Programs for web design such as Sketch, and prototyping tools such as Invision have overtaken the market and replaced Photoshop and Illustrator with their simple use and design.
So what is Adobe XD exactly?
Simply put, Adobe XD makes it easy to undertake wire framing, visual design, interaction design, prototyping, previewing and sharing. It combines tools designers need for experience design into a single solution. It delivers a basic set of tools in each of those areas, while continuing to ensure performance and a comfortable design experience.
The UI
As mentioned earlier the big thing Adobe wanted to ensure with this product was a simple, clean design. That can be seen immediately upon opening a new file. As you can see below the UI is very simple using the menu placement similar to other Adobe products and is reminiscent of Sketch’s simplistic UI.
The toolset is relatively small right now and I don’t foresee it getting much larger than this. Designers coming over from Photoshop or Illustrator might have an initial panic of “Where are all my tools?” – I know I did. As I moved on and actually created a prototype with XD I found over time that I really didn’t need anything more than what they have now though.
As you can see here you have:
- Selection Tool
- Square Tool
- Circle Tool
- Line Tool
- Pen Tool
- Text Tool
- Art Board Tool
The pen tool is the same functionality as Illustrator but it has even better curve manipulation and with the same path manipulation (Add, Subtract, Extract, etc,) it’s certainly handy drawing vectors in the same place as their use. The selection tool offers a little more as well and is a combined Selection and Direct Selection tool for points.
In addition to the left toolbar items, XD comes with a full set of basic tools for positioning and styling:
- The Align tools featured in Adobe Products play a large part in managing your layout
- The Repeat Grid is an amazing tool that I dig into in the next section
- The standard Add/Subtract shape toolkit for shape manipulation – this functions just the same as it does in Illustrator
- A light text editor with size, font, alignment, character and line spacing
- Appearance section with standard Fill, Border, Shadow, and Opacity settings
Repeat Grid
There are a number of really neat features in this Preview but to me the biggest one is the Repeat Grid. As all designers know a lot of time can be spent replicating items repeatedly to show a grid of items or a repeatable row. To replace this endless copy, paste, and adjust they introduced this tool. Simply create one version/row/instance of you want to duplicate, click the Repeat Grid Button and a green line with two tabs appear around it. Simply drag the tabs to start creating your repeatable items.
As you can see below, this makes repeatable items a super simple process with little time needed to measure the offsets of each item. After you have opened the grid to as many items as you want you can drag the spacer in between to adjust the grid spacing.
Another fantastic aspect of the Repeat Grid tool is that if you adjust one item, say the description of Earth in this example, it will move all of the description in the group. I found it exceptionally helpful with adjustments, and afterward Ungrouping the grid for some more efficient content adjustments.
Creating Prototypes
One of the main benefits of using XD is that it combines the prototyping tools used in another program directly in this application, removing the need to port over designs. The tools at this time for prototyping are minimal, but good enough to create simple click and go proof of concepts. The slide transition options, you can see to the left, provide the target, simple directional segues and easing, and duration for the transition.
Adding transitions is a simple point, click and drag (seen below – represented by the blue lines).
The Future of XD
The XD team is currently working on adding all kinds of features based on community feedback. Some items such as Layers, better Prototyping tools, and Scrollable Areas are just a few listed as in progress. To keep track of upcoming features Adobe has created a forum. This is a fantastic tool and I can’t wait to see what it’s like in six months’ time with some of the awesome features requested.
