Use data to enrich your prototypes

Femke van Schoonhoven


Manually adding content into your layout and prototypes can be time consuming, and updating it can be painful. To make this process easier, Data in Atomic lets you import real data to use in your prototypes.

Data can be used to dynamically populate layouts and control states of components. You can quickly apply data to individual elements, or groups of repeating elements.

Combining data, grouped elements and reusable components will help you build and maintain tables, lists and other data rich layouts in a fraction of the time it would take manually. Create realistic, data heavy prototypes quickly and seamlessly.

Importing and syncing Data

The first data-source we’re supporting is Google Sheets – all you have to do is connect your Google account and browse for your data sheet. Importing data from the Sheet takes seconds, and once in your prototype it’s very easy to set text, input and image elements to display your data.

Need to update your data source? No problem – just make sure you sync the changes back into your Project.


Using data in your prototypes

As well as speeding up the creation of layouts, using real data in your prototypes opens up a world of possibilities. Here are a few ideas we’ve seen from our beta-testers:

  1. Updating data sources can quickly personalize prototypes during user testing. This allows participants see themselves in your prototypes, reducing the dissonance that often undermines testing.
  2. Creating a collection of data sets (think Data Personas) and sharing it with every designer in your team helps everyone test their prototypes using the same data source.
  3. Use your data sets to display and test realistic data within your layouts.

Data is available on all Atomic plans. To get started, simply connect your Google Account via the ‘Data’ tab of a project, and you can start syncing your sheets straight away.

Learn more about data in this introductory tutorial video, or read the documentation in our Help Center.

Posted 28 March 2017

Advanced interactive design & prototyping.