Google Sheets Sync

Figma Resource

Sync content from Google Sheets directly into your Figma file.


This is not an official plugin created by Google • It is simply created with ❤️ by David Williames

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

buymeacoffee.com/davew


STEP 1:

Make sure your Google Sheets file has a shareable link – click ‘Share > Get shareable link’


STEP 2:

Name your figma layers appropriately

• Add a ‘#’ followed by the name of the value you want to sync

• For example: to get the value ‘Title’ – name your text layer ‘#Title’

(Note: it is not case sensitive, and will ignore ‘spaces’)


STEP 3:

Run this plugin, paste your shareable link, and click ‘Sync’

——–

More documentation:

https://docs.sheetssync.app

——–


SPECIFYING A SPECIFIC SHEET IN THE WORKBOOK

You can choose to use a specific sheet in the workbook by naming the page in your Figma file similar to how you’d name a layer – e.g. Naming your page ‘Page 1 //Properties’ will use the sheet named ‘Properties’ from your Google Sheet.

(This also works if you name a frame or group the name of the specific Sheet too.)

If you do not name your page accordingly, it will default to using the first Sheet in your Workbook

——–


USING IMAGES

To dynamically set an image fill on your layer — make sure the value in your Google Sheet for a specific property is an image URL (it must end with ‘.jpg’, ‘.png’ or ‘.gif’). Then make sure you name a Vector/Shape layer with the appropriate name – e.g. ‘#image’

——–

More details and documentation for advanced usage coming soon…