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é PintoIf you want to support the continued development of this plugin, why not buy me a coffee at:ko-fi.com/apinixSHARE THIS IF YOU LOVE IT! LETS MAKE THE BEST PLUGIN TO HELP THE COMMUNITY!--------STEP 1:Your Google Spreadsheet has to be publicShare > Get shareable linkSTEP 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)Text (Just text)Fill Color (/#E24A08)Stroke Width and Color (/2|#E24A08) or (/|#E24A08)Show (/Show)Hide (/Hide)Image (http://image-path...)Multiple (#Name#Color#Show)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).You can rename layer(s) with just a clickYou can even multiple rename layers if you click SHIFT key--------EXAMPLES:Figma FileGoogle Spreadsheet (example card)Google Spreadsheet (example table)