Video Tutorial: Sync component variants in Figma using a spreadsheet

This video walks through how to sync component variants in Figma using a spreadsheet with the CopyDoc plugin.

Step 1: Setting up your component layer variants in Figma

Before you sync your spreadsheet to swap out component variants, you'll first need to set up your Figma component set with variants as a Figma layer by following a few steps below (as shown visually in the video above).

1. Create a new Figma component layer and name it to match your spreadsheet header (for example, #Tag)
2. Right-click the Figma component layer, hover over Main component and click Add variant to create a new Figma component set.
3. Add as many new variants as needed by clicking the + icon button at the bottom of the Figma component set layer (when it's selected), and update the style for each of the new variants (for example, changing backgrounds or colors, etc).
4. Once you've created your component variants, you can customize the names of the property and variant names, renaming the Figma defaults to make them easier to identify and use in your spreasheet (for example, renaming "Property 1" to "Genre", and "Variant 1" to "Synthwave").
5. Go to your Assets panel in Figma, and drag and drop your new Figma component (for example, #Tag) onto your Figma file and move it into any Figma frame(s) you'd like to sync from a spreadsheet.
6. Follow the Step 2 instructions below to automatically swap your component variant option by syncing rows from a spreadsheet with your Figma frames.

Step 2: Swapping out variants by syncing your spreadsheet

Similar to syncing normal text content, to swap out variants from a spreadsheet, you'll first need to add your Component layer name (for example, Tag) as a new header column value in the first row of your spreadsheet.

Then, you can copy/paste the property and variant name that's visible when double-clicking your Figma variant layer in the sidebar, which will have an = equals sign (for example, Genre=Synthwave) to show the property name and variant name values, in the following spreadsheet rows inside the same column, like the example below (and as shown visually in the video above).

#Tag
Genre=Synthwave
Genre=Outrun
Genre=Vaporwave
Genre=Darksynth

When you sync the spreadsheet with Figma, any matching named component Figma layers (for example, #Tag) will automatically have their variant value swapped out, based on the variant value you specified in your spreadsheet rows.

You can still sync additional text or image content normally for other layers in the same spreadsheet by creating extra columns for those, too.