Note: This article is similar to an earlier post I made, but I wanted to look at it again since the app is now more refined and focus more on speed of workflow. You can see the original post here.

I have taken a keen interest in Adobe X D lately, being able to watch it grow as a product and even contribute to it’s direction (with the team being very active on twitter). It’s fast becoming a really solid design tool that bridges the gap between design and prototyping directly without the need for plugins or multiple apps/subscriptions.

I wanted to take a quick look at some of the cool features and workflows is has. Adobe has taken a leaf from SketchApp’s playbook, focusing on simplicity and productivity over the power and function of it’s siblings; photoshop, illustrator and so on.

I decided to whip up a quick portfolio design to show off some of this new stuff. Full disclosure, the gif at the start is sped up a little ;). The original video was about 5.20 which is still pretty quick for a basic design.

1. Simplicity

As I mentioned above, the first thing you notice about the app is the simple and focused layout which feels like it’s following the Pareto principle (80/20 rule) a bit, focusing on the key tools designers use often and leaving the more obscure, less useful stuff out.

screen-shot-2017-01-25-at-22-50-23

2. Repeating Grids

I really love the Repeating Grid. A super simple implementation and incredibly handy tool for fast lists and grids, like the one above.

screen-shot-2017-01-26-at-11-30-23

Simply create a list item out of what ever objects you like, group it, hit Repeating Grid and start dragging out from the right or bottom. You can edit the objects after you have made multiple instances of it and watch them all update simultaneously, which gives a holistic view of the interface as you design, which is totally awesome.

screen-shot-2017-01-26-at-11-38-58

3. Data imports

Before I started making my design, I grabbed a stack of photos I took and threw them in a folder. 8 Modern images and 8 more traditional ones. I also created 2 text documents and wrote some names for the photos in them, 1 name to 1 line.

From there, just select the images you want to import, drag them onto the object you want it to auto mask in, and BAM! Each image is dropped into the list in order.

dataimport

Same thing goes for the text documents. Drop it onto a text item in a repeating grid and it will place each line into the list.

3. Quick switching between Design and Prototyping. 

There is a tab at the top of the screen that jumps between you design tools and prototyping tools (Or just tap Ctrl + Tab). From here you can create simple transitions between your art boards.

Screen Shot 2017-01-26 at 11.39.51.png

While the transitions at this stage are rather basic, they are enough to get a simple prototype up and running in seconds by dragging out transitions from objects and connecting them to their destinations. Set an transition type and duration and you’re done.

screen-shot-2017-01-26-at-11-41-36

The ability to jump back and forth between design and prototyping is amazing. Being able to make quick adjustments and test straight away is awesome. The hotspots are also directly connected to objects, so if you move your button somewhere else, the hotspot goes with it. Handy!

4. Sharing prototypes.

After you have your prototype wired up,  you can view on device, run locally or upload it directly to Adobes cloud for review with the click of a button.

screen-shot-2017-01-26-at-11-45-07

You can check out my quick prototype here! https://xd.adobe.com/view/b8bfaa09-07f7-4b35-b2d6-e25fd6330c1e/

Going full screen will get rid of the Adobe stuff around the edges for the full experience. I hope they decide to show this first in the future with the options a little more hidden somehow.

5. Recording prototypes

Running up your prototype locally also has an option to do a quick recording. This is super handy if you are not ready to show the whole thing yet but want to send a teaser or small progress update through email or slack for example.

Wrap up

This is no where near an exhaustive list of what the app is capable of, but it’s a few features I have found to be super handy and has sped up my workflow.

Bridging the gap between design and basic prototyping really does reduce the time it takes to produce something to validate a theory or present a vision to a client.

The app still has a little way to go before it becomes my everyday workflow but it moving incredibly fast, releasing new features every month. I am certainly keeping an eye on it.

Here are a couple of other super quick prototypes I have whipped up for other purposes.

SoCal: https://xd.adobe.com/view/631e7282-81ef-4f74-b96e-d4a9fc926916/

Traverse: https://xd.adobe.com/view/fa845fc8-db2c-40bf-b273-d97541a6b160/

 


Thanks for reading. Don’t forget to check out my site!

www.agkdesigns.net