Tutoriel vidéo : styliser des calques Figma depuis un tableur avec la synchronisation de styles CSS
Cette vidéo montre comment styliser des calques Figma depuis un tableur avec la synchronisation de styles CSS du plugin CopyDoc.
Par exemple, si vous avez dans Figma des calques de texte nommés #SectionHeading, vous pouvez modifier leur taille de police et leur couleur en ajoutant font-size: 40px; color: #999999; dans la ou les lignes situées sous la colonne #SectionHeading de votre tableur.
Lorsque vous synchronisez le tableur avec Figma, les styles de tous les calques Figma correspondants sont automatiquement mis à jour, à condition que la valeur CSS soit prise en charge et s’applique à ce type de calque.
Propriétés CSS prises en charge pour styliser vos calques Figma
Certaines propriétés CSS sont disponibles selon le type de calque, et vous pouvez appliquer plusieurs propriétés à un calque en les plaçant dans la même cellule du tableur :
par exemple, color: #000000; font-size: 24px; font-weight: bold;
| #HeroBlock | #Menu | #CardFrame | #StaffName |
|---|---|---|---|
| background-color: #818AF9; color: #FFF; font-size: 16px; border-radius: 20px; | opacity: 0.3; background-color: #CCD4FF; | font-size: 10px; | font-size: 22px; color: #818AF9; font-weight: bold; |
| background-color: #818AF9; color: #FFF; font-size: 16px; border-radius: 20px; | opacity: 0.3; background-color: #CCD4FF; | font-size: 10px; | font-size: 22px; color: #818AF9; font-weight: bold; |
Voici les propriétés CSS actuellement prises en charge par la synchronisation de tableurs :
Calques de texte
Ces propriétés CSS peuvent s’appliquer à n’importe quel calque de texte Figma.
- color (par exemple
color: #CCCCCC;) - font-size (par exemple
font-size: 40px;) - line-height (par exemple
line-height: 48px;) - font-family (par exemple
font-family: Arial;) - font-weight (par exemple
font-weight: bold;) - font-style (par exemple
font-style: italic;) - text-align (par exemple
text-align: center;) - text-transform (par exemple
text-transform: uppercase;) - vertical-align (par exemple
vertical-align: middle;)
Appliquer des styles de texte à tous les calques enfants. Si vous appliquez un style CSS de calque de texte (par exemple font-size: 30px) à un calque qui contient des calques enfants (par exemple Frame, Group, Component, Instance), le style est automatiquement appliqué à chaque calque de texte situé dans ce calque.
Autres calques
Ces propriétés CSS peuvent s’appliquer aux autres calques Figma (images, rectangles, frames, etc.) :
- width (par exemple
width: 100px;) - height (par exemple
height: 100px;) - opacity (par exemple
opacity: 0.5;) - background-color (par exemple
background-color: #CCCCCC;) - border (par exemple
border: 1px solid #CCCCCC;) - border-radius (par exemple
border-radius: 20px;)
Propriétés de positionnement
Ces propriétés CSS peuvent s’appliquer à n’importe quel calque Figma (texte, images, rectangles, frames, etc.).
Transform
La propriété CSS transform permet de modifier visuellement la position, la rotation et l’échelle d’un élément sans changer l’espace qu’il occupe réellement dans la mise en page. On l’utilise souvent dans Figma et les outils de design similaires pour reproduire des déplacements, des rotations et des redimensionnements qui se produisent à l’intérieur d’un frame, et non par rapport au flux du document.
Les fonctions de transformation courantes sont :
translate Déplace un élément le long des axes X et Y. Exemple :
transform: translate(10px, 20px)→ déplace l’élément de 10px vers la droite et de 20px vers le bas.translateX Déplace un élément horizontalement le long de l’axe X. Exemple :
transform: translateX(10px)→ déplace l’élément de 10px vers la droite.translateY Déplace un élément verticalement le long de l’axe Y. Exemple :
transform: translateY(20px)→ déplace l’élément de 20px vers le bas.rotate Fait pivoter un élément autour de son point d’origine. Exemple :
transform: rotate(45deg)→ fait pivoter l’élément de 45 degrés dans le sens des aiguilles d’une montre.scale Redimensionne un élément selon un facteur d’échelle sur les axes X et Y. Exemple :
transform: scale(1.5)outransform: scale(2, 1.5)→ agrandit l’élément 1,5× dans l’ensemble ou 2× horizontalement / 1,5× verticalement.
Vous pouvez combiner plusieurs fonctions de transformation à la suite. Exemple : css transform: translateX(10px) rotate(45deg) scale(1.2); L’ordre compte, car chaque fonction s’applique au résultat de la précédente.
Position X/Y
Contrairement aux transformations, les valeurs X et Y de Figma correspondent à la position absolue de l’élément dans son frame parent ou son système de coordonnées. En CSS, ce positionnement est représenté par des propriétés comme :
top Indique le décalage vertical par rapport au bord supérieur de l’élément conteneur. Exemple :
top: 100px;→ place l’élément 100px sous le haut de son conteneur.left Indique le décalage horizontal par rapport au bord gauche de l’élément conteneur. Exemple :
left: 100px;→ place l’élément à 100px de la gauche de son conteneur.
Différence avec transform : - top et left définissent la position de l’élément dans la mise en page. - transform: translate() décale l’élément visuellement, sans affecter les éléments voisins ni le flux de la mise en page.
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)).