Google Sheets Sync

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 // 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 + example file: https://www.figma.com/proto/VtXf9HikcehWB7FJrJmApl -------- 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...

Version history

Version 6 on September 28, 2019

BIG UPDATE – Includes some possible breaking changes to how you've been using it • Changed the way you reference a specific Sheet from your Google Sheet – now, if you name your Figma page, frame or group with a '//Name' it will look up the sheet based on that name — previously, it was '#Name' – which could get confusing with property naming • Added new data types – if the value in your Sheet begins with a '/' – there's a range of different special data types it supports: • "/Hide" or "/Show" it will make the layer visible or hidden • "/#18A0FB" it will apply the fill colour '#18A0FB' to that layer • "/50%" it will make the layer opacity 50% • "/250w" will set the layer's width to '250px' • "/80h" will set the layer's height to '80px' • This works when applying it to an entire group too • Added the ability to limit the updates to only the selected layers • Fixed an issue where the scrollbars wouldn't show in the 'Fetch' view table • After a lot of requests; now it can sync layers within a Master component if you prefix the name of a Master component with an '+' — because most the time, you probably don't need to sync your Master Component it won't do it by default • If you want to mark a layer or a group as something you don't want updated, prefix the layer name with a '-'

Version 5 on September 2, 2019

• Added an info button (in the bottom-left) that links to some simple documentation • Image URLs don't have to end in '.jpg', '.png' etc. anymore — so now it should work even if there are query paramters at the end of the URL • After applying an Image to a shape layer – it will no longer set the scaling mode to 'FILL' every time, it will keep whatever scaling it already had on the shape layer