Tutoriel vidéo : synchroniser le contenu d’un tableur Google Sheets avec Figma

Cette vidéo montre comment synchroniser le contenu d’un tableur Google Sheets avec vos designs Figma à l’aide du plugin CopyDoc.

Tutoriel vidéo : 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.

Synchroniser le contenu Google Sheets avec vos calques Figma

Si vous avez créé votre tableur dans Google Sheets, vous pouvez le synchroniser avec votre design Figma en cliquant sur le bouton Sync Content dans l’écran principal du plugin CopyDoc, ce qui ouvre le panneau de réglages de cette fonctionnalité.

Rendre le lien Google Sheets public et copier l’URL

CopyDoc a besoin d’une autorisation pour lire le tableur. Dans Google Sheets, sélectionnez Share et remplacez Restricted par Anyone with the link avant de copier l’URL.

Si la politique de votre entreprise interdit le partage par lien, téléchargez le document Google Sheets au format Excel (.xlsx). Vous pouvez glisser-déposer ce fichier dans CopyDoc et utiliser le même workflow de synchronisation sans rendre la feuille publique.

Coller l’URL Google Sheets et synchroniser avec Figma

Pour prévisualiser le contenu de votre tableur, collez l’URL publique de votre document Google Sheets dans le champ Your Public Google Sheet URL ; si l’URL est valide, publique et correctement structurée, un aperçu de ses en-têtes se charge automatiquement dès que vous la collez.

Sélectionnez dans Figma au moins un calque contenant des calques renommés pour correspondre aux en-têtes de votre tableur, puis cliquez sur le bouton Sync Rows with Layers (Sync & Repeat Selected Layer lorsque Auto Repeat est activé). Le contenu de votre tableur est alors synchronisé avec les calques Figma renommés que vous avez sélectionnés.

Les calques de texte Figma dont une police est manquante ne peuvent pas être mis à jour. Si votre calque de texte Figma contient une police manquante, le plugin ne pourra pas le mettre à jour. Veillez à résoudre les polices manquantes de tous les calques de texte que vous souhaitez modifier d’une manière ou d’une autre avec le plugin CopyDoc.

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)).