スプレッドシートにXLSX、CSV、Google Sheetのどれを使う場合でも、構成は常に同じです。スプレッドシートの一番上の行(「見出し」)は表の最初の見出し行(「コンポーネント」行)として使われ、その下の行はすべて、最初の見出し行のインスタンスになります。
公開したGoogle SheetsのURLをYour Public Google Sheet URL入力欄に貼り付けると、スプレッドシートの内容をプレビューできます。正しく構成された有効な公開URLであれば、貼り付けた後に、含まれている見出しのプレビューが自動的に読み込まれます。
プレビューが読み込まれたら、Generate Table from Rowsボタンをクリックします。これで、スプレッドシートのコンテンツが、現在のFigmaページ上の表にインポートされます。
表のインポート用のスプレッドシート構成例
スプレッドシートにXLSX、CSV、Google Sheetのどれを使う場合でも、構成は常に同じです。スプレッドシートの一番上の行(「見出し」)には、その下の行と同期したいFigmaレイヤーの名前を入れる必要があります。
名前は自由に付けられますが、#Titleや #Descriptionのように、短くてわかりやすいハッシュタグ形式にするのが最も簡単です。そのうえで、Figmaのテキストレイヤーにも #Titleや #Descriptionという名前を付けます。こうすることで、後でプラグインでスプレッドシートを同期するときに、両者が確実に対応付けられます。
| #Title | #Genre | #Age Rating | #Total Reviews |
|---|---|---|---|
| No Time To Die | Action | 13 | 123 Reviews |
| Dune | Sci-Fi Action | 14 | 124 Reviews |
| Black Widow | Action | 18 | 125 Reviews |
| Suicide Squad | Action | 18 | 125 Reviews |
表のテキストコンテンツで使える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構文で指定できます(リンクの[]テキスト内に太字・斜体の構文を追加して、リンクテキストに書式を付けることもできます)。