Back to Plugins
Google Sheets Sync

Google Sheets Sync

<p>Sync content from Google Sheets directly into your Figma file.</p><p><br></p><p><em>This is not an official plugin created by Google • It is simply created with ❤️ by David Williames</em></p><p><br></p><p>If you want to support the continued development of this plugin, why not buy me a coffee at: <a rel="noreferrer noopener nofollow ugc" href="https://buymeacoffee.com/davew" target="_blank">buymeacoffee.com/davew</a></p><p><br></p><p><strong>STEP 1:</strong></p><p>Make sure your Google Sheets file has a shareable link – click ‘Share &gt; Get shareable link’</p><p><br></p><p><strong>STEP 2:</strong></p><p>Name your figma layers appropriately</p><p>• Add a ‘#’ followed by the name of the value you want to sync</p><p>• For example: to get the value ‘Title’ – name your text layer ‘#Title’</p><p>(Note: it is not case sensitive, and will ignore ‘spaces’)</p><p><br></p><p><strong>STEP 3:</strong></p><p>Run this plugin, paste your shareable link, and click ‘Sync’</p><p><br></p><p>--------</p><p><br></p><p>More documentation: <a rel="noreferrer noopener nofollow ugc" href="https://docs.sheetssync.app" target="_blank">https://docs.sheetssync.app</a></p><p><br></p><p>--------</p><p><br></p><p><strong>SPECIFYING A SPECIFIC SHEET IN THE WORKBOOK</strong></p><p><br></p><p>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.</p><p>(This also works if you name a frame or group the name of the specific Sheet too.)</p><p><br></p><p>If you do not name your page accordingly, it will default to using the first Sheet in your Workbook</p><p><br></p><p>--------</p><p><br></p><p><strong>USING IMAGES</strong></p><p><br></p><p>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’</p><p><br></p><p>--------</p><p><br></p><p>More details and documentation for advanced usage coming soon...</p>

contenttextimportsheetssyncdataspreadsheetcsvjsonpopulateautomateduplicate

Plugin Preview

Google Sheets Sync preview

About this plugin

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...

Plugin Details

Version19
CreatedJuly 24, 2019
Last UpdatedNovember 27, 2022
CategorySoftware development
CreatorDave Williames
Stats136209 installs, 4947 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:build/ui.html
  • main:build/plugin.js
  • Editor Types:
    figma