Video Tutorial: Sync XLSX Excel spreadsheet content to Figma
Video Tutorial: Sync CSV spreadsheet content to Figma
Video Tutorial: Auto repeat and sync Figma layers from a spreadsheet
Video Tutorial: Sync a folder of images to Figma layers via a spreadsheet
Video Tutorial: Sync SVG icons from a spreadsheet to your Figma layers
Syncing your CSV or XLSX file content to Figma layers
You can preview your spreadsheet contents by either dragging and dropping your correctly structured .csv
or .xlsx
file into the Sync XLSX/CSV File dropzone area, or by clicking on it and selecting the file manually by browsing for it on your computer.
Ensure that you select at least one layer in Figma that contains renamed layers to match your spreadsheet headers, and then click on the Sync Spreadsheet Rows with Figma Layers button. This will sync the content from your spreadsheet with your selected renamed Figma layers.
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'd like 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 (eg. #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 (eg. My Frame Layer (Row 3)
) instead.