動画チュートリアル：スプレッドシートを使ってFigmaのコンポーネントバリアントを同期する
この動画では、CopyDocプラグインを使って、スプレッドシートでFigmaのコンポーネントバリアントを同期する方法を説明しています。
ステップ1：Figmaでコンポーネントレイヤーのバリアントを設定する
スプレッドシートを同期してコンポーネントのバリアントを切り替える前に、まず次の手順に従って、バリアントを持つFigmaのコンポーネントセットをFigmaレイヤーとして設定する必要があります（上の動画でも手順を確認できます）。
- 新しいFigmaコンポーネントレイヤーを作成し、スプレッドシートの見出しに合わせた名前（たとえば #Tag）を付けます。
- Figmaコンポーネントレイヤーを右クリックし、Main componentにカーソルを合わせてAdd variantをクリックし、新しいFigmaコンポーネントセットを作成します。
- Figmaコンポーネントセットのレイヤーを選択した状態で、下部にある +アイコンボタンをクリックして必要な数だけ新しいバリアントを追加し、各バリアントのスタイルを更新します（たとえば、背景や色を変更するなど）。
- コンポーネントのバリアントを作成したら、プロパティ名とバリアント名をカスタマイズできます。Figmaのデフォルト名を変更して、スプレッドシートで識別しやすく使いやすい名前にします（たとえば、「Property 1」を「Genre」に、「Variant 1」を「Synthwave」に変更します）。
- FigmaのAssetsパネルに移動し、新しいFigmaコンポーネント（たとえば#Tag）をFigmaファイルにドラッグ＆ドロップして、スプレッドシートから同期したいFigmaフレームの中に移動します。
- 下記のステップ2の手順に従い、スプレッドシートの行をFigmaフレームと同期して、コンポーネントのバリアントオプションを自動的に切り替えます。
ステップ2：スプレッドシートを同期してバリアントを切り替える
通常のテキストコンテンツの同期と同様に、スプレッドシートからバリアントを切り替えるには、まずスプレッドシートの1行目に、コンポーネントレイヤーの名前（たとえばTag）を新しい見出し列の値として追加します。
次に、サイドバーでFigmaのバリアントレイヤーをダブルクリックしたときに表示されるプロパティ名とバリアント名をコピーして、同じ列の続く行に貼り付けます。この値には、プロパティ名とバリアント名を示す =（イコール記号）が含まれます（たとえばGenre=Synthwave）。下の例（および上の動画）を参考にしてください。
| #Tag |
|---|
| Genre=Synthwave |
| Genre=Outrun |
| Genre=Vaporwave |
| Genre=Darksynth |
スプレッドシートをFigmaと同期すると、名前が一致するFigmaのコンポーネントレイヤー（たとえば #Tag）のバリアントの値が、スプレッドシートの行で指定したバリアントの値に基づいて自動的に切り替わります。
同じスプレッドシートに列を追加すれば、ほかのレイヤーのテキストや画像コンテンツも通常どおり同期できます。