Better in English?
Better in English? Switch the website language for a better experience.
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.
{{webdesign}}
Chez Mazette.co, on ne va pas vous mentir : ce genre de mise à jour, on l'attendait. Pas parce qu'elle est spectaculaire, mais parce qu'elle règle un problème du quotidien que tout designer qui utilise l'auto layout sérieusement a déjà rencontré.
Sur nos projets Webflow, on construit énormément d'interfaces avec du contenu dynamique : CMS collections, filtres, listes qui s'allongent selon les données. Jusqu'ici, gérer un wrap vertical propre en Figma demandait des contorsions qui n'avaient pas leur place dans un processus de design censé être fluide. On perdait du temps sur des détails techniques plutôt que sur la vraie valeur ajoutée : l'expérience utilisateur.
Le vrai bénéfice, selon nous, c'est la convergence avec CSS flexbox. Plus Figma colle au comportement réel du web, plus la phase de handoff vers Webflow devient rapide et sans surprise. Une maquette fidèle au rendu final, c'est moins d'ambiguïté, moins de questions, et un site qui ressemble vraiment à ce qui a été validé en design.
Notre seul bémol : cette fonctionnalité aurait pu arriver plus tôt, tant elle comble un manque évident depuis l'introduction de l'auto layout. Mais on préfère saluer une bonne pratique tardive qu'une mauvaise pratique installée. C'est exactement le genre d'évolution qui, mise bout à bout avec d'autres, transforme Figma en un outil de plus en plus proche du développement réel.
Si vous travaillez avec Figma au quotidien et que vous voulez que vos maquettes se traduisent fidèlement en site Webflow performant, c'est justement notre métier. Découvrez notre expertise Figma ou parlons de votre projet directement.
Code
Plus de 180 entreprises sont déjà sorties de l'obscurité à nos côtés.
Quand un auto layout est configuré en flux vertical, le contenu qui dépasse la hauteur du cadre bascule automatiquement dans une nouvelle colonne plutôt que de déborder du frame. Ce comportement reproduit celui de flex-wrap en CSS, ce qui rend les maquettes plus fidèles au rendu final en développement. Il suffit d'activer l'option de wrap dans les propriétés de l'auto layout vertical pour en profiter.
Le wrap horizontal existait déjà et permettait à des éléments en ligne de passer à la ligne suivante quand ils dépassaient la largeur disponible. Le wrap vertical fait l'inverse : il gère les débordements en hauteur en créant une nouvelle colonne, utile pour les grilles ou listes qui s'organisent verticalement. Les deux options combinées couvrent enfin tous les cas de mise en page responsive qu'on gérait auparavant à la main.
L'auto layout permet aux éléments de se repositionner et se redimensionner automatiquement quand le contenu change, ce qui évite de tout ajuster manuellement à chaque modification. C'est la base d'un design system solide et cohérent, surtout utile pour les équipes qui font le lien entre design et développement. Cela rapproche aussi Figma du fonctionnement réel du code, notamment CSS flexbox, ce qui facilite le passage en production.
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.
