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