Structuring your spreadsheet to match your Figma layers

This can be really helpful for designs that contain repeating grids or lists where you need to populate it with real content automatically.

You can also use this feature to rename layers or apply CSS styles from your spreadsheet, too.

​

Example spreadsheet structure for content sync with Figma layers

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.

​

Auto repeat a single Figma layer with your spreadsheet rows

When using the Content or Styles sync tab options, you can automatically repeat a single Figma layer by enabling the Auto Repeat toggle, which will automatically copy the original selected Figma layer and duplicate it as many times as the number of rows that your spreadsheet data contains.

If your selected Figma layer is already directly inside of another Figma layer with Auto Layout enabled, the selected layer will automatically be duplicated inside of that parent layer, otherwise, CopyDoc will create a brand new Auto Layout frame and duplicate your new Figma layers there instead.

​

Supported Markdown formatting for 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 underscores eg.__Snipet text to bold__
• You can specify Italic text by using single asterisks *Italic Snippet Text* or single underscores eg._Italic Snippet Text_
• You can specify Bold Italic text by using triple asterisks ***Bold Italic Snippet Text*** or triple underscores eg.___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).