Figma pour les développeurs : extraire le CSS sans se tromper
Le panneau Dev Mode de Figma génère du CSS, mais savoir l'interpréter intelligemment vous évitera bien des aller-retours avec votre designer.
Figma est devenu le standard de la maquette d'interface, et la communication entre designers et développeurs s'est améliorée avec l'arrivée du Dev Mode. Pourtant, copier-coller le CSS généré par l'outil ne suffit pas toujours : il faut savoir lire entre les lignes.
Le Dev Mode s'active via l'icône `</>` en haut à droite de l'interface Figma. Une fois activé, cliquez sur n'importe quel élément pour voir ses propriétés : dimensions, couleurs, typographie, espacements, ombres. L'onglet CSS affiche des déclarations directement copiables.
Ce que Figma vous donne
Les valeurs de couleur apparaissent en hexadécimal ou en RGBA selon la transparence de la couche. Les ombres portées sont converties en propriétés `box-shadow` prêtes à l'emploi. Les styles de texte donnent `font-family`, `font-size`, `font-weight`, `line-height` et `letter-spacing`.
Attention à `letter-spacing` : Figma l'exprime en points ou en pourcentage du corps de texte, mais le CSS attend une valeur en `em` ou en pixels. Un espacement de 5% dans Figma sur un texte de 16px correspond à `0.05em` ou `0.8px` en CSS. Faites toujours la conversion plutôt que de copier la valeur brute.
Les limites à connaître
Figma ne génère pas de mise en page. Les propriétés `display: flex` ou `grid` doivent être inférées par le développeur en observant comment les éléments sont disposés dans les frames. Le Dev Mode indique si un auto-layout est utilisé, ce qui est un bon indice pour traduire en Flexbox.
Les variables de design (Design Tokens) sont affichées dans le panneau si le fichier les utilise. C'est précieux : au lieu d'une couleur `#2563EB`, vous voyez peut-être `color/primary/600`, ce qui vous invite à utiliser votre variable CSS correspondante plutôt que la valeur codée en dur.
Enfin, discutez avec votre designer de la convention de nommage des composants dans Figma. Si elle reflète celle de votre système de composants front-end, la correspondance devient presque automatique et les échanges gagnent en fluidité.
À lire aussi
VS Code : dix raccourcis qui changent vraiment la vie
Vous utilisez VS Code tous les jours, mais connaissez-vous vraiment les raccourcis qui multiplient votre vitesse de frappe par deux ?
La grille d'évaluation pour bien choisir sa société de production audiovisuelle
Au-delà de la bande démo, sept critères concrets permettent de départager les prestataires vidéo avant de signer un devis.
Filmer une table ronde : le dispositif son et image qui respecte le débat
Entre micros individuels, plans serrés et réalisation en direct, capter un échange à plusieurs voix demande une méthode précise pour que chaque intervenant reste audible et visible.