Répéter et synchroniser automatiquement des calques Figma depuis un tableur
Cette vidéo montre comment répéter et synchroniser automatiquement des calques Figma depuis un tableur à l’aide du plugin CopyDoc.
C’est très pratique pour les designs qui contiennent des grilles ou des listes répétées à remplir automatiquement avec du contenu réel.
Vous pouvez aussi utiliser cette fonctionnalité pour renommer des calques ou appliquer des styles CSS depuis votre tableur.
Exemple de structure de tableur pour synchroniser du contenu avec des calques Figma
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 |
Répéter automatiquement un calque Figma selon les lignes de votre tableur
Avec les onglets de synchronisation Content ou Styles, vous pouvez répéter automatiquement un calque Figma en activant l’option Auto Repeat : le calque Figma sélectionné est copié et dupliqué autant de fois que votre tableur contient de lignes de données.
Vous pouvez ainsi transformer une carte, un article de catalogue ou une mise en page de campagne en un design rempli pour chaque ligne du tableur. Les calques de texte et d’image du design utilisent les colonnes correspondantes du tableur.
Si vous sélectionnez un composant principal, CopyDoc crée une instance pour chaque ligne. Si vous sélectionnez une instance existante, c’est cette instance qui est dupliquée ; si vous sélectionnez un frame, c’est le frame qui est dupliqué.
Si le calque Figma sélectionné se trouve déjà directement dans un autre calque Figma avec Auto Layout activé, il est automatiquement dupliqué dans ce calque parent ; sinon, CopyDoc crée un tout nouveau frame Auto Layout et y duplique vos nouveaux calques Figma.
Noms dynamiques des calques parents répétés automatiquement
Pour nommer chaque calque Figma dupliqué à partir de votre tableur, faites correspondre le nom du calque modèle sélectionné à un en-tête de colonne. CopyDoc utilise la valeur de cette colonne dans chaque ligne comme nouveau nom de calque.
Un seul # en début de nom est facultatif : un calque nommé #Title peut correspondre à une colonne Title, et un calque nommé Title à une colonne #Title. Si les deux en-têtes existent, la correspondance exacte l’emporte, même si sa valeur est vide. Les majuscules et les espaces doivent tout de même correspondre.
Si aucun nom de calque ne correspond dans votre tableur, le plugin CopyDoc reprend le nom d’origine du calque Figma et y ajoute un numéro de ligne (par exemple, My Frame Layer (Row 3)).
Mise en forme Markdown prise en charge pour le texte
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).