---
url: "/copydoc/sync/variants.md"
description: "You can use the Sync Content feature in CopyDoc to automatically swap out Figma variants for named component layers when syncing your spreadsheet data."
---

# Syncing Figma component variants from the spreadsheet

> You can use the Sync Content feature in CopyDoc to automatically swap out Figma variants for named component layers when syncing your spreadsheet data.

### Video Tutorial: Sync component variants in Figma using a spreadsheet

This video tutorial is a complete step-by-step guide showing you how to sync component variants in Figma using a spreadsheet with the CopyDoc plugin.
[Embedded media](https://www.youtube.com/embed/pytew54ZZ_g)

## Step 1: Setting up your component layer variants in Figma

[Video](/assets/videos/copydoc/sync/create-variants.mp4)

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](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants).
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

[Video](/assets/videos/copydoc/sync/sync-variants.mp4)

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.

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