Better in English?
Better in English? Switch the website language for a better experience.
Le 24 juillet 2026, Figma a discrètement publié l'une des évolutions les plus structurantes de son moteur de mise en page depuis l'introduction de l'Auto Layout. L'annonce tient en une phrase dans le changelog officiel, mais son impact est loin d'être anecdotique : Figma fait évoluer son option Auto Layout pour qu'elle se comporte comme le CSS.
Jusqu'ici, un décalage subtil mais bien réel existait entre la façon dont l'Auto Layout gérait certains comportements (redimensionnement, wrap, contraintes de taille) et la façon dont les mêmes règles s'appliquent en CSS moderne, notamment avec Flexbox et Grid. Résultat concret sur le terrain : les développeurs devaient régulièrement ajouter des ajustements manuels au moment du handoff pour que la version codée corresponde fidèlement au design validé sur le canvas.
Cette mise à jour ferme ces écarts. L'Auto Layout se rapproche désormais du comportement réel du CSS, ce qui signifie que ce que vous voyez sur Figma ressemble davantage, structurellement, à ce qui sera produit en code.
Figma a pensé la bascule pour ne pas casser les projets en cours :
Cette approche progressive laisse le temps aux équipes de tester la migration sur des projets pilotes avant de généraliser, plutôt que de subir un changement de comportement du jour au lendemain sur l'ensemble d'une bibliothèque de composants.
| Aspect | Ancien Auto Layout | Nouvel Auto Layout (aligné CSS) |
|---|---|---|
| Comportement de redimensionnement | Règles propriétaires à Figma | Calqué sur Flexbox / Grid |
| Fidélité design vers code | Écarts fréquents à corriger | Correspondance directe |
| Migration des fichiers existants | - | Optionnelle, réversible jusqu'à janvier 2027 |
| Nouvelles frames | - | Nouveau comportement par défaut |
{{webdesign}}
Figma vient d'annoncer une évolution discrète en apparence, mais redoutablement utile au quotidien : l'auto spacing de l'auto layout gagne deux nouveaux comportements. Jusqu'ici, une seule logique existait par défaut, silencieusement rebaptisée "Between" dans cette mise à jour. Elle reste inchangée : des espaces égaux entre les éléments, rien sur les bords.
Deux nouvelles options rejoignent ce mode :
Rien de révolutionnaire sur le papier. Mais dans la pratique, ce sont exactement les trois valeurs que propose la propriété CSS justify-content en flexbox (space-between, space-around, space-evenly). Figma ne réinvente rien : il aligne enfin son vocabulaire et son comportement sur celui du code qui exécute réellement les interfaces.
Quiconque a déjà maquetté une grille de cartes, une liste de tags ou une barre de navigation sait à quel point le spacing manuel devient vite un calvaire. Ajouter ou retirer un élément obligeait à recalculer les marges à la main, ou à bricoler des espaceurs invisibles pour simuler un effet de répartition homogène. Ce n'était pas seulement une perte de temps : c'était surtout une source d'erreurs et d'incohérences entre les écrans Figma et le rendu final en navigateur.
En reproduisant fidèlement le comportement du CSS, Figma referme un écart qui existait depuis des années entre l'intention du designer et la réalité du développeur. Un espacement "Around" en Figma se comporte désormais exactement comme un espacement "Around" en CSS. Plus de traduction approximative, plus de "à peu près pareil".
| Mode d'espacement | Comportement | Équivalent CSS |
|---|---|---|
| Between | Espaces égaux entre les éléments, rien sur les bords | space-between |
| Around | Espaces égaux entre les éléments, demi-espace sur chaque bord | space-around |
| Evenly | Tous les espaces strictement identiques, bords compris | space-evenly |
Cette annonce s'inscrit dans une tendance de fond chez Figma : rapprocher toujours plus l'outil de design des contraintes réelles du développement. On l'avait déjà observé avec les évolutions récentes autour du motion et des shaders, où Figma cherche à réduire l'écart entre ce qui se conçoit et ce qui s'exécute réellement dans un navigateur. Le spacing responsive suit la même logique, à un niveau plus fondamental encore : la mise en page elle-même.
Pour une équipe qui travaille en Design System, ce genre d'alignement terminologique et fonctionnel a une valeur qui dépasse le simple confort d'usage. Cela signifie moins de documentation à écrire pour expliquer "ce que le designer voulait dire", et moins d'interprétation nécessaire côté intégration.
Une mise à jour discrète, mais qui va soulager pas mal de designers. Figma vient d'ajouter le wrap vertical à l'auto layout. Concrètement : quand votre flux est réglé en vertical et que le contenu dépasse la hauteur du cadre, il ne déborde plus. Il bascule proprement dans une nouvelle colonne.
Une fonctionnalité qui paraît anodine sur le papier. Elle ne l'est pas du tout dans la pratique, si vous construisez des interfaces avec beaucoup de contenu dynamique : listes de tags, cartes produits, galeries, filtres empilés.
Avant cette évolution, seul le wrap horizontal existait en auto layout. Utile pour des lignes d'éléments qui doivent passer à la ligne suivante. Mais dès que votre layout était pensé en colonnes verticales avec du contenu variable, il fallait bricoler : frames imbriquées, duplications manuelles, ou pire, un débordement silencieux qui cassait la maquette sans prévenir.
En résumé : moins de calculs manuels, plus de fidélité entre ce que vous designez et ce qui sera codé. Un détail technique qui a un impact très concret sur la vitesse de production.
| Situation | Avant le wrap vertical | Avec le wrap vertical |
|---|---|---|
| Liste de tags qui s'allonge | Débordement du frame ou frames imbriquées manuellement | Nouvelle colonne créée automatiquement |
| Grille de cartes produits | Duplication et repositionnement à chaque ajout | Réorganisation automatique en colonnes |
| Fidélité au code final | Écart entre maquette et flexbox CSS | Comportement aligné sur flex-wrap |
L'auto layout, c'est la fondation de tout design system cohérent dans Figma. Chaque nouvelle option qui le rapproche du comportement réel du code, c'est du temps gagné à l'implémentation et moins d'allers-retours entre designers et développeurs. Le wrap vertical s'inscrit dans cette logique : moins de composants qui cassent en production, plus de prévisibilité dans les mises en page complexes.
Une maquette qui se comporte comme le code final, c'est une maquette qui inspire confiance à toute l'équipe produit.
Chez Mazette.co, Figma est notre outil de travail quotidien pour concevoir les interfaces avant de les développer sur Webflow. Et sur ce type de mise à jour, on a un avantage direct : moins d'écart entre le fichier de design et le site livré, c'est moins de temps passé à réexpliquer une intention de mise en page qui semblait pourtant limpide sur le canvas.
Concrètement, l'Auto Layout historique fonctionnait bien tant qu'on restait dans des cas simples. Dès que la mise en page devenait un peu plus fine (wrap conditionnel, comportements de redimensionnement imbriqués, contraintes multiples), on tombait régulièrement sur des situations où le rendu Figma ne collait plus exactement à ce que produit un vrai Flexbox ou Grid en CSS. Le développeur devait alors trancher : suivre à la lettre le fichier Figma, quitte à obtenir un résultat un peu bancal, ou s'écarter légèrement du design pour respecter une logique CSS plus saine. Ni l'un ni l'autre n'était vraiment satisfaisant.
Cette mise à jour s'attaque directement à ce problème de fond, plutôt qu'à une fonctionnalité cosmétique. C'est le genre d'évolution qui ne fait pas de bruit dans les timelines mais qui change réellement le quotidien d'une équipe produit-design-dev.
Notre seul bémol : la fenêtre de coexistence entre ancienne et nouvelle version, si elle est nécessaire, peut aussi créer une confusion temporaire dans les équipes si certains fichiers restent sur l'ancien comportement et d'autres passent au nouveau sans documentation claire côté design system. On recommande donc de traiter cette migration comme un vrai chantier, avec un audit préalable des composants critiques, plutôt que de laisser chaque designer basculer au fil de l'eau.
Si vous travaillez avec une équipe product design qui construit ses interfaces sur Figma avant intégration Webflow, c'est le moment de revoir vos bibliothèques de composants pour profiter de cette meilleure correspondance entre design et code. Et si votre agence explore justement comment mieux connecter Figma et Webflow au quotidien, notre page agence Figma détaille notre approche.
Code
Plus de 180 entreprises sont déjà sorties de l'obscurité à nos côtés.
Cette mise à jour aligne le comportement de l'Auto Layout sur les règles de mise en page du CSS moderne, notamment sur la gestion du redimensionnement, de l'espacement et des contraintes. Concrètement, ce qui est conçu sur le canvas Figma se comporte de la même façon une fois transposé en code, sans les petits écarts qui obligeaient les développeurs à ajuster manuellement le résultat.
Non, ce n'est pas obligatoire dans l'immédiat. Les frames existants restent sur l'ancienne version tant que vous ne choisissez pas de les mettre à jour, alors que les nouvelles frames héritent automatiquement du nouveau comportement. Il est possible de repasser à l'ancienne version jusqu'en janvier 2027, ce qui laisse le temps de tester la migration sereinement sur les projets en cours.
Oui, c'est précisément l'objectif de cette mise à jour. En rapprochant le comportement de l'Auto Layout des règles du CSS Flexbox et Grid, Figma réduit les cas où un développeur devait recréer une mise en page différemment de ce qui était visible sur le design. Pour des workflows de développement Webflow, où la fidélité au design compte beaucoup, cela limite les corrections de dernière minute lors du handoff.
Titres percutants, meta descriptions soignées, sitemap, Schema.org, structure Hn, audits : ce sont les fondations SEO qui rendent votre contenu lisible par Google ET par les IA génératives. Nous couvrons les deux en même temps.
Avec plus de 180 clients, notre agence vous accompagne sur tous les sujets comme le webdesign sur mesure, les automations fines, la conversion et votre visibilité SEO et GEO.
Nous concevons des designs web sur mesure, orientés performance, parcours utilisateurs et conversion. Comme plus de 180 clients, faites nous confiance et élevez votre marque.
