This feature is available on the team and business plans.
Users with manage integrations permission can access this feature.

The EasyContent plugin for Figma comes with a Google Sheets integration, allowing you to sync content from your Google Sheets document straight into your Figma project. This article will teach you how to connect your Google Sheets document to your Figma design using our plugin.

Our plugin is free to use and you don't need an EasyContent account if you only need to connect a Google Sheets document to your Figma project.

Connecting Your Google Sheets Document to your Figma Project

To get started, install the plugin from the Figma Marketplace. Once the plugin is installed, launch it and you'll be greeted with the following screen:

Click on Google Sheets to connect your document. You have two options: generate a public link or invite our EasyContent helper account to access your document.

Connecting a Public Google Sheets

If you don't mind generating a publicly accessible link to your Google Sheets document, you can use this method. 

1. Click the Share button in your sheet
2. Under General access, select Anyone with the link
3. Set the role to Viewer
4. Copy the sheet link

Go back to your Figma project, paste the link to our plugin UI, and press the arrow key next to the input field or ENTER on your keyboard.

Your Google Sheets document is now connected to your Figma project!

Connecting a Private Google Sheets

If you don't want to generate a public link to your Google Sheets document, you can invite our Helper account to access your document.

1. Click the Share button in your sheet
2. At the top of the Share window invite the EasyContent helper account (easycontent@lunar-standard-443219-e4.iam.gserviceaccount.com).
   
   
    
3. Set the role to Viewer and uncheck Notify people.
4. Click the Share button.
   
   
   
5. You'll see the "Access updated" notification pop-up.
6. Click the Share button again and verify that the helper account is now added under People with access.
7. Copy the sheet link

Go back to your Figma project, paste the link to our plugin UI, and press the arrow key next to the input field or ENTER on your keyboard.

Your Google Sheets document is now connected to your Figma project!

Syncing Your Google Sheets Data to Your Figma Project

Now that you've connected your Google Sheets document, you're ready to use its contents in your Figma project. In this section, we will demonstrate how.

You can see the example Google Sheets document that we used in this article here: https://docs.google.com/spreadsheets/d/1jji5NA-sb4HoO_wE5Zb3Nb34_lvh8JOX3zFBzTjasA4/edit?usp=sharing

How EasyContent Figma Plugin Parses Your Google Sheets Document

You may need to adjust your document to ensure the correct data is pulled.

1. The first row of your Google Sheets document will be used as the fields.
2. The first column except the first row of the first column will be shown in the Row (content source) dropdown.
3. Selecting a row from the Row (content source) dropdown will update the fields to match that row's data.

That's all you need to know! If you have further questions, don't hesitate to contact us via support@easycontent.io.

Getting Data from Google Sheets to Your Figma Project

Select the sheet you want to pull data from. Then select the tab you want to pull data from.

Next, select the row from which the associated data will be pulled in the Row (content source) dropdown. In this example, we selected the "Margherita Pizza" row (you can use our example Google Sheets document above to follow along if you want to). We're now ready to add data to our Figma project!

Drag and Drop

You can drag and drop the fields to populate text layers in your design. This allows the design to reflect actual content from your Google Sheets document.

Replace Text

You can also replace existing text using data from Google Sheets. First, select the text layer you want to replace, then in the plugin's UI, select the field you want to use for the text layer and click on the replace icon.

Editing or Changing Linked Data

If a text layer is already linked to a field from Google Sheets, you can select it and select a new row from the "Row (content source)" dropdown to change its data based on the selected row.

You can also select multiple text layers and update them at once.

Locate a Field

You can use the locate icon to find where a field is in the project. Note that if you have multiple pages in your project, it will only find instances of a field in the current page.

Detach a Field

If you no longer want a text layer to sync to your Google Sheets document, you can detach it. Select the text layer, and in the plugin UI, click the detach icon in the lower right corner.

Disconnect Your Google Sheets Document

If you no longer need or want your Google Sheets document, you can disconnect it from your Figma project. Click the trash icon in the select a spreadsheet screen to disconnect your document.

That's all you need to know! If you have any questions, comments, or requests, don't hesitate to contact us at support@easycontent.io. We'll be happy to help.

If you need a content collaboration platform, don't hesitate to try out EasyContent! Start a 14-day FREE trial. No credit card needed: https://easycontent.io/signup.