Create a Figma Prototype with Data from Google Sheets

Design tooling improves leaps and bounds each year. The latest tool to catch my interest is a plug-in for Figma called Google Sheets Sync. It allows a user to pull in data directly from Google Sheets. This by itself is really cool, but there are a few features of this plug-in that make it amazing.

Figma users might want to use this to populate their designs with more realistic data. Having non-realistic data is often distracting during user testing. Clients especially have a hard time getting past placeholder content. We will run through the setup and then create a filtered list of results with a filtering sidebar all dynamically populated from Google Sheets.

Setting Up The Plug-in

1. In Figma’s main menu bar, go to > Plugins > Browse Plugins in Community.
2. Search for Google Sheets Sync (You may have to see the tab to the plugin results).
3. Open a new document and select the plug-in via main menu bar > Plugins > Google Sheet Sync.
4. You can then access the plug-in in the right sidebar under the ‘Design’ tab.
5. Clicking on ‘Open Google Sheets Sync’ will prompt you for the URL of the Google Sheet with your data in it. Note make sure your Google Sheet is set to be visible via a link to the public.
6. You are now ready to import the data into your design file.

Pulling in Data from Google Sheets

For this example. we’ll use this NFL team data. It’s brief and the data has a few attributes we can use as an example. If you’re following along, you’ll need to create a new sheet and import the data.

Here’s how you start adding data from the sheet into a layer of Figma:

1. Add a text element to the screen.
2. Prepend the layer name with a # + the title of the column in the Google Sheet. In our case, we could use #Name for the name of the team.
3. When the plug-in runs it will run through each row of the column Name and add the data in the cell and then repeat if there are more Figma layers than rows in the spreadsheet. If there was only one layer in Figma named #Name, we should expect it to be replaced by the first team’s name. If there were two text layers named #Name, we would expect the first layer to get the first name in the list and the second layer to get the second team name in the Google Sheet.
4. You’ll need to manually run the plug-in when you want the data to be re-synced to the Google Sheet.

This is great and useful, but we can make it even better…

Creating Components Using Google Sheets Sync Plug-in

We can take our earlier knowledge of prepending a layer with # and create a slightly more complex component. Create a component for the team listing comprised of the team name, abbreviation, conference, and division. Now we have a repeatable component to be used when listing out all the teams in the league.

Wouldn’t it be great if we could use the plug-in to create a list of all the teams? Well, I’m glad you asked. To do this, add a frame around the component that should be duplicated and prepend the title with #@.

This way, the plug-in will know to duplicate the child and repeat for each instance. Here is the result when we re-sync the Google Sheet via the plug-in:

Pulling It All Together

To move closer to our goal of creating a filtered view of the main list, we can use Google Sheet Queries bring the concept home. In a new sheet named “Division,” we use a query referencing the data on the initial sheet. In the query, we ask it to manipulate the data to group it by the divisions and tell us how many of each there are in the list.

=QUERY(
  'Machine-readable-business-employment-data-sep-2021-quarter'!2:1044, 
  "SELECT "& E1 &", COUNT("& E1 &") 
    WHERE "& E1 &" is not null 
    GROUP BY "& E1 &" 
    ORDER BY "& E1 &" ASC 
    label COUNT("& E1 &") ''
")

The result is two columns. The first column is the division name and the second is the count of that division in the data. We can then concatenate the two cells into one and use that concatenated cell as our data for Figma. We’ll title the data “Division” above the concatenated cells so we can reference it by #Division in a text layer.

Then in Figma we can use // Division to pull data from this sheet and #Division on the layer name we want to take on this information.

To complete the example, we need to come up with a filtered view of the teams that play in the East division. We again can model this based on the filter example we just completed. Create another sheet called “East” and another Google Query. In this case, the query will ask to manipulate the data that only show rows that have the Division that is East.

=QUERY(
  'Machine-readable-business-employment-data-sep-2021-quarter'!1:1044,
  "Select * Where E like 'East'
")

In Figma, we can duplicate the view we previously made but this time populate it with this data by filtering the results using // East on a parent layer’s layer-name. When added correctly and the data is synced we would expect to see this:

These screens can now be wired up with clickable hotspots on the filter user interface elements. When in prototype mode, we can navigate between the filtered view and the unfiltered view. If you click on East in the filters, the data on the right will update to show only the teams in the East Division.

Let us know where you take this plug-in!

Note: A deeper read of the documentation will be helpful, as you can go quite a bit deeper.