Spreadsheet Sync

About this plugin

🧩 Use dynamic data on your Figma from Google Spreadsheets.

🔥 Fast data replace from Google Spreadsheet.

😎 Use Google Sheets as dynamic data on your design.

✅ Works with Components, Frames, Layers... all (as long as the layer has sub-layers/children).

⬇️ ⬇️ ⬇️ CHECK THE STEPS BELOW ⬇️ ⬇️ ⬇️

Not affiliated with Google • Created with ❤️ by André Pinto

If you want to support the continued development of this plugin, why not buy me a coffee at:

ko-fi.com/apinix

SHARE THIS IF YOU LOVE IT! LETS MAKE THE BEST PLUGIN TO HELP THE COMMUNITY!

--------

STEP 1:

Your Google Spreadsheet has to be public

1. Share > Get shareable link

STEP 2:

Use the correct naming on your Figma layers.

AUTO RENAMING... Rename manually or use the new renaming by clicking on the table (when on advanced mode).

MANUALLY RENAMING... add a # prefix followed by the name of the column you want to sync (ex: #Title).

You can nest multiple columns in one layer (Note: it is not case sensitive, and will ignore spaces).

Google Sheets column example names: (ex: Sheet / Figma)

1. Text (Just text)
2. Fill Color (/#E24A08)
3. Stroke Width and Color (/2|#E24A08) or (/|#E24A08)
4. Show (/Show)
5. Hide (/Hide)
6. Image (http://image-path...)
7. Multiple (#Name#Color#Show)
8. Multiple with Placeholders (layer name: #Value1#Value2 -> actual text: 'This is {#Value1} and is in the same sentence of {#Value 2}')

Google Sheets example:

Figma layer naming example:

STEP 3:

Paste your Google Spreadsheet link (copy from browser address bar), select the amount of layers and click Sync.

EXTRA:

🔥🔥🔥 Use the "Preview" button for an advanced usage (little blue button with eye icon next to the url input).

1. You can rename layer(s) with just a click
2. You can even multiple rename layers if you click SHIFT key

--------

EXAMPLES:

1. Figma File
2. Google Spreadsheet (example card)
3. Google Spreadsheet (example table)