Data in Atomic lets you bring custom data into a project by connecting a Google Sheets spreadsheet. This allows you to design with real data, specific to your project.
How to add a data source
- In your Project, select the Data tab.
- Select ‘Import Data’ and follow the instructions to link your Google account and import a spreadsheet, and which specific sheet(s).
- If you make any changes to the data source, manually sync the changes from the data sources list.
Tip: If you're linking to images in your data sheet, we recommend ensuring the URL is point to an HTTPS, not HTTP link.
How to use data in your prototype
Adding data to your elements:
- Select the text or image element you’d like to add data to. The Data settings will appear in the properties panel.
- Select your custom Data Source from the dropdown and define the Column.
- Assign the Row to be used. Checking ‘Random’ applies a random data row. If applying this to a selection of elements, the same row is applied to each element.
How to distribute a range of data to your elements:
- Create and select multiple text elements. The Data panel will appear in the properties panel.
- Set the Source to ‘Inherit data from parent element’* and in the column name field, type the name of the Column of data to be used.
Tip: What you type into the column name field must match the name of the column in the spreadsheet. Alternatively, select your data source from the dropdown, choose the Column from the column dropdown and then reset the source to Inherit. The column selected will be remembered.
- With your elements selected create a Group, Mask or Scroll Container.
- On your Group, Mask or Scroll Container, select your Data Source from the Data panel in the properties panel.
- Set the data to show ‘Maps rows to child elements’. This will distribute different data rows to each data-enabled element nested within your selection.
- Enter a start row number or to randomly distribute the rows, select the shuffle icon.
*Inherit data from parent element means that the selected element(s) will use the Data Source set on a parent. This could be a Group, Mask, Container or Component.
Sample: Creating repeating blocks of data
In this example we’ve created one block of data, turned it into a Component and repeated that component to create a list.
Next, we’ve wrapped everything in a Scroll Container and assigned it the data source which will populate each Component with a different data row.
To recreate this:
- Layout the text elements, setting each to Inherit and naming a column. Tip: It can help to put placeholder copy in each text area.
- Turn these elements into a Component.
- Duplicate the Component multiple times. Select them all and create a Scroll Container.
- The scroll container is now the Parent – this is where the data Source is set. To do this, select the Source from the Data panel. By default it’s set to distribute a row of data per child element (i.e. each Container).
Tip: If data appears out of order, check your layer order. Data will be distributed in the order of layers shown in the layers panel, regardless of the visual order on your page.
Using data to dynamically set the State of a Component
If you have Components with different states, you can dynamically set which state to use depending on the data shown. To do this:
- The Google Sheet needs a Column which has the state. Eg. A column named ‘Active’ which has ‘Yes’ or ‘No’ in each row.
- The Component pages need to be named to reflect these same states. Eg. Pages named ‘Yes’ and ‘No’
- To dynamically show the right state of the component, select your component in your prototype and in the State dropdown select 'set from data column'. In the data column, select your data source.
You could also use a page number (for example, a numeric value from the spread sheet) starting with '1'.
Looking for a data source to use in your prototypes? You can use this one – no credit required.