Spreadsheet Sync (Altar.io)

<p>🧩 Use dynamic data on your Figma from Google Spreadsheets.</p><p>🔥 Fast data replace from Google Spreadsheet.</p><p>😎 Use Google Sheets as dynamic data on your design.</p><p>✅ Works with Components, Frames, Layers... all (as long as the layer has sub-layers/children).</p><p><br></p><p>⬇️ ⬇️ ⬇️ <strong>CHECK THE STEPS BELOW</strong> ⬇️ ⬇️ ⬇️</p><p><br></p><p>Not affiliated with Google • Created with ❤️ by André Pinto</p><p><br></p><p>If you want to support the continued development of this plugin, why not buy me a coffee at:</p><p><br></p><p><a href="https://ko-fi.com/apinix" rel="noreferrer noopener nofollow ugc" target="_blank">ko-fi.com/apinix</a></p><p><br></p><p><strong>SHARE THIS IF YOU LOVE IT! LETS MAKE THE BEST PLUGIN TO HELP THE COMMUNITY!</strong></p><p><br></p><p>--------</p><p><br></p><h2>STEP 1:</h2><p>Your Google Spreadsheet has to be public</p><ul><li><code>Share &gt; Get shareable link</code></li></ul><h2><br></h2><h2>STEP 2:</h2><p>Use the correct naming on your <strong>Figma layers</strong>.</p><p><strong>AUTO RENAMING... </strong>Rename manually or use the <strong>new renaming</strong> by clicking on the table (when on advanced mode).</p><p><strong>MANUALLY RENAMING...</strong> add a <code>#</code> prefix followed by the name of the column you want to sync (<strong>ex:</strong> <code>#Title</code>).</p><p>You can nest multiple columns in one layer (<strong>Note:</strong> it is not case sensitive, and will ignore <code>spaces</code>).</p><p>Google Sheets column example names: (ex: <a href="https://docs.google.com/spreadsheets/d/1P888OymI2-Lgqswjtdb6pDqSfeHLQ_cC3_6vyEboO6g/edit#gid=0" rel="noreferrer noopener nofollow ugc" target="_blank">Sheet</a> / <a href="https://www.figma.com/file/iXrKORVQlsvRrxrAFhcp32/Spreadsheet-Sync-Example?node-id=0%3A1" rel="noreferrer noopener nofollow ugc" target="_blank">Figma</a>)</p><ul><li><strong>Text</strong> (<code>Just text</code>)</li><li><strong>Fill Color</strong> (<code>/#E24A08</code>)</li><li><strong>Stroke Width and Color</strong> (<code>/2|#E24A08</code>) or (<code>/|#E24A08</code>)</li><li><strong>Show</strong> (<code>/Show</code>)</li><li><strong>Hide</strong> (<code>/Hide</code>)</li><li><strong>Image</strong> (<code>http://image-path...</code>)</li><li><strong>Multiple</strong> (<code>#Name#Color#Show</code>)</li><li><strong>Multiple with Placeholders</strong> (layer name: <code>#Value1#Value2</code> -&gt; actual text: 'This is {#Value1} and is in the same sentence of {#Value 2}')</li></ul><h2><br></h2><h2><strong>Google Sheets example:</strong></h2><pre class="ql-syntax" spellcheck="false">| 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 | </pre><p><br></p><h2><strong>Figma layer naming example:</strong></h2><pre class="ql-syntax" spellcheck="false">| ------------------------ | | #Title | -&gt; normal text replace | ------------------------ | | #Color.randsave | -&gt; gets a random value from a random "saved" row (if you want to use the same random row on another layer) | ------------------------ | | #Hidden | -&gt; hides or shows layer | ------------------------ | | #Image.rand | -&gt; gets a random value | ------------------------ | | #Title.1#Color.randsave | -&gt; text replacement and the same random saved color from before (if under the same selection)) | ------------------------ | </pre><p><br></p><p><br></p><h2>STEP 3:</h2><p>Paste your <strong>Google Spreadsheet link</strong> (copy from browser address bar), select the amount of layers and click Sync.</p><p><br></p><h2><strong>EXTRA:</strong></h2><p>🔥🔥🔥 Use the <strong>"Preview"</strong> button for an <strong>advanced usage</strong> (little blue button with eye icon next to the url input).</p><ul><li>You can rename layer(s) with just a click</li><li>You can even multiple rename layers if you click SHIFT key</li></ul><p><br></p><p>--------</p><p><br></p><h2>EXAMPLES:</h2><ul><li><a href="https://www.figma.com/file/U8cAOL8VuvYd7BxxLECaiG/Figma-Spreadsheet-Sync-Community?node-id=0%3A1" rel="noreferrer noopener nofollow ugc" target="_blank">Figma File</a></li><li><a href="https://docs.google.com/spreadsheets/d/1P888OymI2-Lgqswjtdb6pDqSfeHLQ_cC3_6vyEboO6g/edit#gid=0" rel="noreferrer noopener nofollow ugc" target="_blank">Google Spreadsheet (example card)</a></li><li><a href="https://docs.google.com/spreadsheets/d/1OyaW9qhZDsX18HFUSVtiMhmg0GE7pw7Fykce4abec9E/edit#gid=0" rel="noreferrer noopener nofollow ugc" target="_blank">Google Spreadsheet (example table)</a></li></ul><p><br></p><p>--------</p><p><br></p><h2>TODO:</h2><ul><li>📔 Documentation</li><li>🎬 YouTube video</li><li>💪 Always bringing more updates. Keep using it!</li></ul>