Auto repeat and sync Figma layers from a spreadsheet
This video walks through how to automatically repeat and sync Figma layers from a spreadsheet using the CopyDoc plugin.
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.
| #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 |
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.
Dynamic auto-repeating parent layer names
If you want to dynamically name the new auto-repeating Figma layer from your spreadsheet data, too, you can do this by ensuring the Figma layer name that you're repeating (for example, #Title) matches a column in the spreadsheet that you're syncing; this will automatically use the value from each row under the #Title column in your spreadsheet as the layer name for each duplicated Figma layer.
If there's no matching layer name in your spreadsheet, the CopyDoc plugin will take the original Figma layer name and append a row number to it (for example, My Frame Layer (Row 3)) 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 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).