Tutoriel vidéo : synchroniser des variantes de composants dans Figma à l’aide d’un tableur
Cette vidéo montre comment synchroniser des variantes de composants dans Figma à l’aide d’un tableur et du plugin CopyDoc.
Étape 1 : configurer les variantes de votre calque de composant dans Figma
Avant de synchroniser votre tableur pour changer de variantes de composant, vous devez d’abord configurer dans Figma un ensemble de composants avec des variantes, en suivant les quelques étapes ci-dessous (illustrées dans la vidéo ci-dessus).
- Créez un nouveau calque de composant Figma et donnez-lui le même nom que l’en-tête de votre tableur (par exemple #Tag)
- Faites un clic droit sur le calque de composant Figma, survolez Main component et cliquez sur Add variant pour créer un nouvel ensemble de composants Figma.
- Ajoutez autant de variantes que nécessaire en cliquant sur le bouton + (icône) en bas du calque de l’ensemble de composants Figma (lorsqu’il est sélectionné), puis modifiez le style de chaque nouvelle variante (par exemple en changeant les arrière-plans ou les couleurs).
- Une fois vos variantes de composant créées, vous pouvez personnaliser le nom des propriétés et des variantes en renommant les noms par défaut de Figma pour les identifier et les utiliser plus facilement dans votre tableur (par exemple, renommer « Property 1 » en « Genre » et « Variant 1 » en « Synthwave »).
- Ouvrez le panneau Assets de Figma, puis faites glisser votre nouveau composant Figma (par exemple #Tag) dans votre fichier Figma et placez-le dans le ou les frames Figma que vous souhaitez synchroniser depuis un tableur.
- Suivez les instructions de l’étape 2 ci-dessous pour changer automatiquement l’option de variante de votre composant en synchronisant les lignes d’un tableur avec vos frames Figma.
Étape 2 : changer de variantes en synchronisant votre tableur
Comme pour la synchronisation de texte classique, pour changer de variantes depuis un tableur, vous devez d’abord ajouter le nom de votre calque de composant (par exemple Tag) comme nouvelle valeur de colonne d’en-tête dans la première ligne de votre tableur.
Ensuite, copiez-collez le nom de la propriété et de la variante, visible lorsque vous double-cliquez sur votre calque de variante Figma dans la barre latérale : il contient un signe égal = (par exemple Genre=Synthwave) qui sépare le nom de la propriété et celui de la variante. Collez-le dans les lignes suivantes de la même colonne du tableur, comme dans l’exemple ci-dessous (et dans la vidéo ci-dessus).
| #Tag |
|---|
| Genre=Synthwave |
| Genre=Outrun |
| Genre=Vaporwave |
| Genre=Darksynth |
Lorsque vous synchronisez le tableur avec Figma, la valeur de variante de tous les calques de composant Figma portant le nom correspondant (par exemple #Tag) est automatiquement changée selon la valeur de variante indiquée dans les lignes de votre tableur.
Vous pouvez toujours synchroniser normalement du texte ou des images pour d’autres calques dans le même tableur, en créant aussi des colonnes supplémentaires pour ceux-ci.