Figma Plugin

Google Sheets to Figma Text Sync

How to populate Figma text layers directly from Google Sheets.

Chapter jump links:

Step-by-step Instructions

Introduction

👋 Hello - Thanks for installing this plugin.

As the name suggests - this plugin enables you to easily populate text layers in Figma, directly from your Google spreadsheet.

Let's get started.

Setting up the layer names.

For the text from your Google Sheet to correctly populate your Figma text fields contained within your layout - we need to map each Google Sheet cell containing text, to specific text layers in Figma.

We do this by using table column and row titles in Google Sheets. The column titles should match your layout container in Figma (These can be Frames, variants or groups).

We then match the row titles in Google Sheets with the same names used for your text layers in Figma.

⚠️ Note: Ensure you have the word 'Key' in cell 1A of your Google Sheet.

The image below illustrates this match.

Column titles = Frame / Layout titles.
Row titles = Text layer names.

Heres my example Shareable Google Sheet URL link.

Option 1: Populating Figma text layers using your Google Sheets URL.

Grab the URL share link from your Google Sheet:

  • Goto: File > Share > Share with others.
  • Make sure the General access option is 'Anyone with the link'.
  • Copy the link.
  • Close the modal.

Now that you have the shareable link copied to your clipboard, return to Figma:

  • Select the Layout on your Figma page you wish to update.
  • Open the plugin.
  • Paste in the URL into the 'option 1' text box.
  • Hit the 'Fetch' button.
  • The Google sheets data contained in the URL will be populated into the larger text box below.
  • Then hit the 'Sync' button.
  • ✅ Done!

Option 2: Populating Figma text layers using the Google Sheet CSV file.

Another way of updating text layers is by using the Google Sheets CSV file.

To download the CSV file:

  • Goto: File > Download > Select: 'Comma-separated value (.CSV)'.
  • Your browser will download the Google Sheets' CSV file containing the raw data
  • Open the CSV file in a text editor (unformatted).
  • Copy the contents to your clipboard.
  • Return to Figma and open the plugin (Make sure you have the layout selected)
  • Paste the CSV data into the large text box.
  • Then hit the 'Sync' button.
  • ✅ Done!

That's it! I hope this plugin helps in your day-to-day.

Whilst this plugin remains free to use, a little support would go a long way.
So if you fancy buying me a coffee, please follow this link ☕.

Thanks so much!
Andrew