Syncing content to Figma from a Airtable

If you've created your spreadsheet as an Airtable, you can sync it with your Figma design.

Video Tutorial: Sync Airtable spreadsheet content to Figma

This video walks through how to sync Airtable spreadsheet content to Figma 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 Airtable content to Figma layers ​

To add your Airtable content for the Sync Content feature in CopyDoc, select the Sync from Airtable URL option from the platforms dropdown selector; then you need to add 3 fields:

Your Airtable Sheet URL ​

To create a sheet, login to Airtable and click Create a base, select the Workspace you'd like to add it under, and then click Create.

The Airtable sheet URL should look like this: https://airtable.com/appzkSCDvQhxjfrl3/tbl9Ug0eTNoZFX5ne/viwULclwtTCrQq4dR?blocks=hide

Your Airtable Personal Access Token ​

You can create a token from the Airtable Personal Access Token page.

Your Airtable personal access token should look like this: patCDDXkwmgP4CyJK.19aa66430076753f90aaf1b27ae0a4ddf14f445dce8add9bd539bcbefcbe35df

Set the token's Scopes to data.records:read and schema.bases:read, and give it access to the base you want to sync. The schema scope lets CopyDoc recognise columns that are blank in every record, so matching text layers can be cleared. A token with only data.records:read can still sync returned columns, but entirely blank columns may leave the template text unchanged.

Custom Airtable Label ​

You need to set a custom label (for example, My Airtable Snippets) to help you identify your Airtable URL when you use it.

Once you've added those fields, click Save New Airtable + to load the content preview and save the view in your Figma file. You can save multiple views of the same table with different labels. Adding the same view again selects the existing saved entry.

Blank fields ​

With schema.bases:read enabled, empty cells clear matching text layers even when the whole column is blank in the selected view. Layers that do not match a table column keep their existing content. CopyDoc loads all record pages in the selected view.

If CopyDoc cannot read the field list, it shows a message and continues using the fields returned with the records. Add the schema scope to your token if requested, then reload the content preview. If the field list is temporarily unavailable, reload to retry.

A label such as MODERATED BY will still appear if its Airtable cell contains that text. Clear that cell too if you want the label removed.

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.

Use this to turn one card, catalog item, or campaign layout into a populated design for each spreadsheet row. Text and image layers inside the design use the matching spreadsheet columns.

If you select a main component, CopyDoc creates an instance for each row. Selecting an existing instance duplicates that instance; selecting a frame duplicates the frame.

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.