Video Tutorial: Sync Google Sheets spreadsheet content to Figma
This video walks through how to sync content from a Google Sheets spreadsheet to your Figma designs using the CopyDoc plugin.
Video Tutorial: 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.
Syncing your Google Sheet content to Figma layers
If you've created your spreadsheet as a Google Sheet, you can sync it with your Figma design by clicking the Sync Content button in the main CopyDoc plugin screen, which will open up the settings panel for this feature.
Making your Google Sheet link public and copying the URL
CopyDoc needs permission to read the spreadsheet. In Google Sheets, select Share and change Restricted to Anyone with the link before copying the URL.
If company policy prevents link sharing, download the Google Sheet as an Excel (.xlsx) file. You can drag and drop that file into CopyDoc and use the same sync workflow without making the sheet public.
Pasting your Google Sheet URL and syncing with Figma
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.
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.
Figma text layers with missing fonts can't be updated. If your Figma text layer contains a missing font, the plugin won't be able to update it. Please ensure any text layers you would like to update in any way using the CopyDoc plugin have their missing fonts resolved.
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.