Video Tutorial: Sync component variants in Figma using a spreadsheet

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 (eg. #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 (eg. 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 (eg. 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 (eg. #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 (eg. 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 on your Figma variant layer in the sidebar, which will have an = equals sign (eg. 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 (eg. #Tag) will automatically have their variant value swapped out, based on the variant value you specified in your spreadsheet rows.