Adobe XD: Designing with Real Data

Earlier this month we announced Adobe XD (formerly called Project Comet) to the world and the reception has been tremendous. The team and I are humbled by all the positivity and requests for early access. For those who haven’t heard of it yet, Adobe XD is a brand new design tool from Adobe that allows you to design and prototype in a single tool.

Building a new design tool from the ground up has benefits: performance, simplicity and focus. It also allows us to re-think and challenge everything, like the role of real data in the design process.

I put together some of the ideas I had regarding this in an experimental build of Adobe XD and presented it at Adobe MAX 2015 Sneaks:

Caveat: Like all MAX Sneak demos, this is a work in progress and subject to change. The UI/features shown in this demo are all super early.

There are many interesting things being shown in the video. Before we dive into that, I’d like to step back a bit and explain how we got here.

Designing with Real Data

As an engineer, edge cases in design have always fascinated me. Real data in design surfaces them early, often having a fundamental impact on design. The UX design community has also started to champion the importance of real data:

We see the world and our users as they are, instead of how we imagine them to be. Designing with real data means we can move faster, surface problems and additional constraints sooner, and ultimately create better experiences for our users. — Josh Puckett on Modern Design Tools: Using Real Data

I remember a conversation early on in the brainstorming process with Talin Wadsworth (our lead designer), Narciso (NJ) Jaramillo (jack of all trades) and Tom Krcha (product manager) about using real data in designs and how design tools should help. We were excited and had tons of ideas, but it faded into the background as we surged on to build a product from the ground up.

We turned our attention to a more fundamental problem: designing repeated items in lists and grids — an essential pattern in mobile and web designs, but one that’s tedious to create manually. To make this easier, we came up with the Repeat Grid tool. You can select any item on canvas and repeat it horizontally or vertically. Items in a Repeat Grid maintain position and style, but text content and images can change. Padding can be visually adjusted.

Repeat Grid in action — items maintain position and style. Drawing inside a cell updates all instances.

Once we finished implementing the first pass of Repeat Grid, the conversation about real data in designs resurfaced in my mind.

One problem with figuring out how to flow data into a design is that in a standard design tool, there is no semantic structure: the design is just a bunch of individual graphic objects — shapes, images, text items. But data by its very nature is structured. You can try to add ways to impose structure on a design, but they can be cumbersome and impede the design workflow.

Repeat Grid introduces a simple structure to your design. It also solves another key problem: selection. Selecting a single item in a Repeat Grid affects all repeated instances of that item. This means that if you have a list of ten names, you can flow it onto the design canvas after selecting a single text item in a Repeat Grid. No need to select each instance of text one by one.

Real Data in Adobe XD

In the experimental build shown at MAX Sneaks, data (text or images) can flow into your design via multiple channels:

1. Built-in sample content.
2. Local filesystem.
3. Google Sheets.
4. Web.

Note: Everything shown below is a work in progress and subject to change.

Built-in Realistic Sample Content

Every time you select a sample like “Name”, you get a random list of names.

Realistic Sample Data

Data from your filesystem

Drag and drop a text file onto an item in a Repeat Grid and text from the file fills in.

Drag and drop in a text file

You could imagine working with JSON or CSV data as well, filling different items in a repeat grid from different properties or columns in the data.

Data from Google Sheets

Type in a Google Sheet URL and select a column to quickly bring in data from the cloud into your design. Switching columns lets you quickly try different sets of data in your design. One interesting use case here is to switch between different sets of localized strings for a menu — this can quickly show you where your design might break in different languages.

Data from Web

Navigate to any webpage and as you hover your mouse over repeated items in the web page, a highlight is shown over other repeated instances. One click can bring in text/images into your design. Using your company’s webpages can bring in realistic data relevant to your design without developer intervention.

The mouse is over “Fiodor SUMKIN” on the behance website. Repeated author names like “Andreas Preis” and “Fil Dunsky” get a highlight.

This part is so much fun. I’ve demoed it often by navigating to Facebook and bringing in pictures and names of my actual friends in a few clicks. It was also interesting to navigate to Adobe Stock. In just a few clicks, you’re able to see a visually diverse amount of images flow directly into your design.

Images from Adobe Stock flow in with a single click

Did you find support for data in Adobe useful? Let me know what you think on Twitter and vote for the feature here.

Update: “Drag and drop a text file onto an item in a Repeat Grid” has shipped in Adobe XD. Plugins stepped in to cover a lot of the cases my experimental Data panel did. I’ll name the two I like the most: Data Populator and Google Sheets For Adobe XD.