Que votre tableur soit un fichier XLSX, CSV ou un Google Sheet, la structure est toujours la même : la toute première ligne (l’« en-tête ») de votre tableur sert de première ligne d’en-tête du tableau (la ligne « composant »), et toutes les lignes situées en dessous deviennent des instances de cet en-tête.
Pour prévisualiser le contenu de votre tableur, collez votre URL Google Sheets publique dans le champ Your Public Google Sheet URL : si l’URL est valide, publique et correctement structurée, un aperçu des en-têtes qu’elle contient se charge automatiquement après le collage.
Une fois l’aperçu chargé, cliquez sur le bouton Generate Table from Rows. Le contenu de votre tableur est alors importé dans un tableau sur votre page Figma actuelle.
Exemple de structure de tableur pour l’import de tableaux
Que votre tableur soit un fichier XLSX, CSV ou un Google Sheet, la structure est toujours la même : la toute première ligne (l’« en-tête ») de votre tableur doit contenir les noms des calques Figma avec lesquels vous souhaitez synchroniser les lignes situées en dessous.
Vous pouvez leur donner le nom de votre choix, mais le plus simple est d’utiliser un format de hashtag court et descriptif, comme #Title ou #Description. Dans Figma, nommez ensuite vos calques de texte #Title ou #Description également : ils seront ainsi associés lorsque vous synchroniserez le tableur dans le plugin.
| #Title | #Genre | #Age Rating | #Total Reviews |
|---|---|---|---|
| No Time To Die | Action | 13 | 123 avis |
| Dune | Action, SF | 14 | 124 avis |
| Black Widow | Action | 18 | 125 avis |
| Suicide Squad | Action | 18 | 125 avis |
Mise en forme Markdown prise en charge pour le texte des tableaux
Vous pouvez ajouter au contenu de votre tableur une mise en forme Markdown simple (gras, italique) et des liens : ils seront appliqués automatiquement lors de la synchronisation du texte avec votre calque de texte Figma.
Votre calque de texte Figma peut contenir du texte normal au départ : inutile de préparer un exemple en gras ou en italique. Utilisez une famille de polices qui propose dans Figma les variantes gras, italique ou gras italique correspondantes. L’aperçu du tableur utilise les polices du navigateur : son apparence ne suffit donc pas à confirmer que votre police Figma dispose de ces variantes.
- Pour mettre du texte en gras, utilisez deux astérisques
**Snippet text to bold**ou deux tirets bas__Snippet text to bold__ - Pour mettre du texte en italique, utilisez un astérisque
*Italic Snippet Text*ou un tiret bas_Italic Snippet Text_ - Pour mettre du texte en gras italique, utilisez trois astérisques
***Bold Italic Snippet Text***ou trois tirets bas___Bold Italic Snippet Text___ - Pour ajouter des liens hypertextes, utilisez la syntaxe Markdown
This is [my link here](https://example.com) in a text snippet(vous pouvez aussi mettre en forme le texte du lien en ajoutant la syntaxe gras/italique à l’intérieur des crochets[]du lien).