Powerful prototyping with Lists.Design & Atomic

Syncing Lists.Design data to your Atomic prototypes

Atomic prototype populated with data from Lists.Design

There’s nothing quite like the real thing, unless of course you’re prototyping. Using data in your prototypes over placeholder text not only saves you time but also help to test the limitations and parameters of various data values.

At Atomic we value the ability to build more realistic layouts and work faster. Using data in your Atomic prototypes allows you to not only improve your workflow, but also dynamically control states and styles.

While you could create your own data sources to use when prototyping, Julien Perrière’s Lists.Design includes almost every data type you could ever need.

To use the Lists.Design data in your Atomic prototypes we’ve created this Google Spreadsheet by importing the JSON data, like this:

How to import JSON data into Google Spreadsheets in less than 5 minutes

In the sheet you can browse almost all the available data in a Google sheet format, and pull them straight into Atomic. The sheet includes everything from user names to currencies and colors.

With the sheet open, just go to File > Add to My Drive to add the sheet into your own account.

Tutorial — populating your transaction history

In this tutorial we’ll be populating the ‘Transaction history’ of this prototype with a subset of the data from Lists.Design.

Transaction History

To complete this tutorial, you’ll need to copy & edit this prototype into your account. Click the above to open up the Atomic prototype in Preview. From there you can copy it into you own Atomic account via the copy & edit button in the bottom right.

→ Don’t have an Atomic account? Create yours for free.

Step 1: Create your data sheet

For this example we’re going to use this spreadsheet that we’ve already created for you. You’ll notice the spreadsheet already has the relevant data columns we’ll be using in our prototype.

If you’d like to use your own data, you can create your own sheet and pre-populate it with the data you’d like to use. We recommend ensuring that all the data you’d like to use exists on the same Sheet — this makes the data we’d like to use easy to reference in Atomic.

With your prototype open in the Editor, you’ll notice that the Account details have already been pre-populated with data for our Sheet. In order to fill the Transaction History with data, we’ll be using the following data columns:

1. Budget (Spendings)
2. Prices ($ 0–99)
3. Dates (Dd Mm Y)
4. Time (Am Pm)

Step 2: Connect your Google account with Atomic

If you copied the prototype into your account you’ll see this sheet appear in the Data tab of your project.

However if you want to use your own data (now or in future) you’ll need to connect your Google account with Atomic. To do this, open up the Project and navigate to the Data tab. Atomic will take you through a few simple steps to connect your Google Account.

Once connected you can browse and select any Google Sheet you’d like to use for your prototype.

Step 3: Adding the data to Atomic components

Now that we’ve synced our Google Sheet, we can navigate back to our prototype. You’ll see a group of component instances called ‘Transaction History Items’. These component instances currently have placeholder text.

To add data to these component instances, double click the first ‘transaction-row’ to open it up for editing. To add data to the placeholder text:

1. Select the placeholder text element (for example, the date placeholder)
2. In the Text properties, select Set from Data Column
3. In the Data dropdown, select Inherit from Parent
4. In the column field, type the name of the column in the Data sheet you’d like to display. Because we’d like this column to display the Date data, I’ll type Dates (Dd Mm Y) Data

It’s important that whatever you type into the column field, matches exactly the name of a column from your data sheet.

Then, repeat this for the remaining placeholder elements. Each placeholder should have the following column names assigned to it in the column field:

1. Time — Time (Am Pm) Data
2. Description — Budget (Spendings) Data
3. Amount — Prices ($ 0–99) Data

Make sure you repeat this on the Credit page of your component as well. While nothing will visibly change yet, behind the scenes we’re linking each of the placeholder text elements to Inherit from parent. This means that these element will inherit whatever data is assigned at the top level, such as a group, mask or container.

Step 4: Displaying the data in the prototype

Click back in the top left of the editor to navigate back to the prototype. Then, select each of the ‘transaction-row’ component instances, and in the Component properties in the Data field select Inherit from parent.

Next, select the parent of the group in the Layers panel (titled Transaction History Items). With this group selected, in the Group properties, open the data field and select your Google Sheet. You can choose a start row if you wish, or use the shuffle icon to randomize the starting row.

Lastly, make sure map rows to child elements is checked. This helps to display multiple lines of data in chronological order across the component instances. You should see your data update in the editor to display the data from the Sheet.

With Lists.Design you can prototype many different variations of data, like this Newsfeed which has multiple pages and components.

We’d love to see what you create! Send us a tweet with a link to your prototype and we may pop something cute in the mail for you 💌

→ Don’t have an Atomic account? Create yours for free.