Figmaのレイヤーに合わせてスプレッドシートを構成する

CopyDocのSync Content機能を使うと、任意のスプレッドシート（.xlsx/.csvファイルまたは公開のGoogle SheetのURL）の複数行にある繰り返しのテキストや画像を、選択したFigmaレイヤーに同期できます。

スプレッドシートからFigmaレイヤーを自動で繰り返して同期する

この動画では、CopyDocプラグインを使って、スプレッドシートからFigmaレイヤーを自動で繰り返して同期する方法を説明しています。

繰り返しのグリッドやリストを含むデザインに、実際のコンテンツを自動で流し込みたい場合にとても便利です。

この機能を使って、スプレッドシートからレイヤーの名前を変更したり、CSSスタイルを適用したりすることもできます。

Figmaレイヤーとのコンテンツ同期用のスプレッドシート構成例 ​

スプレッドシートにXLSX、CSV、Google Sheetのどれを使う場合でも、構成は常に同じです。スプレッドシートの一番上の行（「見出し」）には、その下の行と同期したいFigmaレイヤーの名前を入れる必要があります。

名前は自由に付けられますが、#Titleや #Descriptionのように、短くてわかりやすいハッシュタグ形式にするのが最も簡単です。そのうえで、Figmaのテキストレイヤーにも #Titleや #Descriptionという名前を付けます。こうすることで、後でプラグインでスプレッドシートを同期するときに、両者が確実に対応付けられます。

#Title#Genre#Age Rating#Total Reviews
No Time To DieAction13123 Reviews
DuneSci-Fi Action14124 Reviews
Black WidowAction18125 Reviews
Suicide SquadAction18125 Reviews

スプレッドシートの行に合わせて1つのFigmaレイヤーを自動で繰り返す ​

ContentまたはStylesの同期タブを使うときは、Auto Repeatのトグルをオンにすると、1つのFigmaレイヤーを自動で繰り返せます。選択した元のFigmaレイヤーが自動的にコピーされ、スプレッドシートのデータの行数と同じ数だけ複製されます。

これを使うと、1つのカード、カタログアイテム、キャンペーンのレイアウトから、スプレッドシートの行ごとにコンテンツを流し込んだデザインを作れます。デザイン内のテキストレイヤーと画像レイヤーには、対応するスプレッドシートの列が使われます。

メインコンポーネントを選択した場合、CopyDocは行ごとにインスタンスを作成します。既存のインスタンスを選択した場合はそのインスタンスが、フレームを選択した場合はそのフレームが複製されます。

選択したFigmaレイヤーが、Auto Layoutが有効な別のFigmaレイヤーの直下にすでにある場合は、選択したレイヤーがその親レイヤーの中に自動的に複製されます。そうでない場合は、CopyDocが新しいAuto Layoutフレームを作成し、その中に新しいFigmaレイヤーを複製します。

自動で繰り返す親レイヤーの動的な名前 ​

複製した各Figmaレイヤーにスプレッドシートから名前を付けるには、選択したテンプレートレイヤーの名前を列見出しと一致させます。CopyDocは、各行のその列の値を新しいレイヤー名として使います。

先頭の#は1つまでなら省略できます。#Titleという名前のレイヤーはTitle列に、Titleという名前のレイヤーは#Title列に一致させられます。両方の見出しがある場合は、値が空欄でも完全に一致するほうが優先されます。大文字・小文字とスペースは一致している必要があります。

スプレッドシートに一致するレイヤー名がない場合、CopyDocプラグインは元のFigmaレイヤー名に行番号を付けた名前（例：My Frame Layer (Row 3)）を使います。

テキストコンテンツで使えるMarkdown書式 ​

スプレッドシートのコンテンツには、オプションで基本的なMarkdown書式（太字、斜体）やリンクを追加できます。これらは、スニペットをFigmaのテキストレイヤーに同期するときに自動的に適用されます。

Figmaのテキストレイヤーは通常のテキストのままでかまいません。太字や斜体のサンプルを事前に書式設定しておく必要はありません。Figmaで、対応する太字、斜体、太字斜体のバリエーションがあるフォントファミリーを使ってください。スプレッドシートのプレビューはブラウザのフォントを使うため、プレビューの見た目だけでは、Figmaのフォントにそれらのバリエーションがあるかどうかは確認できません。

  • 太字のテキストは、2つのアスタリスク**Snippet text to bold**または2つのアンダースコア__Snippet text to bold__で指定できます
  • 斜体のテキストは、1つのアスタリスク*Italic Snippet Text*または1つのアンダースコア_Italic Snippet Text_で指定できます
  • 太字斜体 のテキストは、3つのアスタリスク***Bold Italic Snippet Text***または3つのアンダースコア___Bold Italic Snippet Text___で指定できます
  • ハイパーリンクは、This is [my link here](https://example.com) in a text snippetというMarkdown構文で指定できます（リンクの[]テキスト内に太字・斜体の構文を追加して、リンクテキストに書式を付けることもできます）。