Spreadsheet Sync

🧩 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:

| Title | Variant | Fill Color | Stroke | Hidden | Image |

| --------------- | ----------- | ---------- | ---------- | ------- | ----------------- |

| This is a title | Color=blue | /#ff0000 | /2|#ff0000 | /Show | http://image-path |

| This is a text | Color=green | /#0099ff | /|#0099ff | /Hide | http://image-path |

Figma layer naming example:

| ------------------------ |

| #Title | -> normal text replace

| ------------------------ |

| #Color.randsave | -> gets a random value from a random "saved" row (if you want to use the same random row on another layer)

| ------------------------ |

| #Hidden | -> hides or shows layer

| ------------------------ |

| #Image.rand | -> gets a random value

| ------------------------ |

| #Title.1#Color.randsave | -> text replacement and the same random saved color from before (if under the same selection))

| ------------------------ |

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)