Tutoriel vidéo : synchroniser le contenu d’un tableur Airtable avec Figma
Cette vidéo montre comment synchroniser le contenu d’un tableur Airtable avec 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 Airtable avec vos calques Figma
Pour ajouter votre contenu Airtable à la fonctionnalité Sync Content de CopyDoc, sélectionnez l’option Sync from Airtable URL dans la liste déroulante des plateformes ; vous devez ensuite remplir 3 champs :
L’URL de votre table Airtable
Pour créer une table, connectez-vous à Airtable et cliquez sur Create a base, sélectionnez le Workspace dans lequel l’ajouter, puis cliquez sur Create.
L’URL de la table Airtable doit ressembler à ceci : https://airtable.com/appzkSCDvQhxjfrl3/tbl9Ug0eTNoZFX5ne/viwULclwtTCrQq4dR?blocks=hide
Votre jeton d’accès personnel Airtable
Vous pouvez créer un jeton depuis la page Personal Access Token d’Airtable.
Votre jeton d’accès personnel Airtable doit ressembler à ceci : patCDDXkwmgP4CyJK.19aa66430076753f90aaf1b27ae0a4ddf14f445dce8add9bd539bcbefcbe35df
Réglez les Scopes du jeton sur data.records:read et schema.bases:read, et donnez-lui accès à la base que vous voulez synchroniser. Le scope de schéma permet à CopyDoc de reconnaître les colonnes vides dans tous les enregistrements, pour que les calques de texte correspondants puissent être vidés. Un jeton limité à data.records:read peut tout de même synchroniser les colonnes renvoyées, mais les colonnes entièrement vides risquent de laisser le texte du modèle inchangé.
Libellé Airtable personnalisé
Définissez un libellé personnalisé (par exemple, My Airtable Snippets) pour reconnaître facilement votre URL Airtable lorsque vous l’utilisez.
Une fois ces champs remplis, cliquez sur Save New Airtable + pour charger l’aperçu du contenu et enregistrer la vue dans votre fichier Figma. Vous pouvez enregistrer plusieurs vues de la même table avec des libellés différents. Si vous ajoutez de nouveau la même vue, l’entrée déjà enregistrée est sélectionnée.
Champs vides
Avec schema.bases:read activé, les cellules vides vident les calques de texte correspondants, même lorsque toute la colonne est vide dans la vue sélectionnée. Les calques qui ne correspondent à aucune colonne de la table conservent leur contenu actuel. CopyDoc charge toutes les pages d’enregistrements de la vue sélectionnée.
Si CopyDoc ne peut pas lire la liste des champs, il affiche un message et continue avec les champs renvoyés avec les enregistrements. Ajoutez le scope de schéma à votre jeton si c’est demandé, puis rechargez l’aperçu du contenu. Si la liste des champs est temporairement indisponible, rechargez pour réessayer.
Un libellé comme MODERATED BY s’affichera toujours si sa cellule Airtable contient ce texte. Videz aussi cette cellule si vous voulez supprimer le libellé.
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)).