Regardless of if you're using an XLSX, CSV or Google Sheet for your spreadsheet, the structure is always the same; the very first row (or the "header") of your spreadsheet is used as the first header row of the table (as the "component" row), and any rows underneath will become instances of that first header.
You can preview your spreadsheet contents by pasting your public Google Sheets URL into the Sync Public Google Sheet input field; if it's a valid, and public URL that's correctly structured, it will automatically load a preview of the headers that it contains after pasting it.
Once the preview has loaded, and then click on the Generate a table in Figma from this spreadsheet button. This will import the content from your spreadsheet into a table on your current Figma page.
Example spreadsheet structure for table imports
Regardless of if you're using an XLSX, CSV or Google Sheet for your spreadsheet, the structure is always the same; the very first row (or the "header") of your spreadsheet has to contain the names of the Figma layers that you would like to sync the rest of the rows underneath it with.
You can name these whatever you like, but it's easiest to use a short yet descriptive hashtag format like: #Title or #Description. In Figma, you would then name your text layers #Title or #Description as well; this will ensure that they are mapped together when the spreadsheet is synced up in the plugin later.
| #Title | #Genre | #Age Rating | #Total Reviews |
|---|---|---|---|
| No Time To Die | Action | 13 | 123 Reviews |
| Dune | Sci-Fi Action | 14 | 124 Reviews |
| Black Widow | Action | 18 | 125 Reviews |
| Suicide Squad | Action | 18 | 125 Reviews |
Supported Markdown formatting for table text content
You can optionally add some basic markdown formatting (bold, italics) and links to your spreadsheet content, which will automatically be applied when the snippet is synced to your Figma text layer.
- You can specify Bold text by using double asterisks
**Snipet text to bold**or double underscoreseg.__Snipet text to bold__ - You can specify Italic text by using single asterisks
*Italic Snippet Text*or single underscoreseg._Italic Snippet Text_ - You can specify Bold Italic text by using triple asterisks
***Bold Italic Snippet Text***or triple underscoreseg.___Bold Italic Snippet Text___ - You can specify hyperlinks by using the markdown syntax of
This is [my link here](https://example.com) in a text snippet(you can also format the link text by adding the bold/italic syntax inside of the link's[]text area).