Better in English?
Better in English? Switch the website language for a better experience.
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.
{{webdesign}}
Chez Mazette.co, on utilise Figma tous les jours, sur tous nos projets Webflow. Et honnêtement, ce type de mise à jour, on l'attendait depuis longtemps. Ce n'est pas une fonctionnalité qui fera la une, mais c'est exactement le genre d'amélioration qui change une journée de travail.
Concrètement, Webflow repose lui aussi sur les mêmes fondations flexbox. Un espacement pensé en "Evenly" côté Figma se traduit presque littéralement en distribute côté Webflow. Moins d'ambiguïté, moins d'allers-retours entre design et intégration, moins de "ce n'était pas tout à fait ça à l'écran". Pour une agence qui vit entre ces deux outils au quotidien, c'est un vrai gain de fluidité, pas juste un gadget.
On apprécie aussi la philosophie derrière cette annonce : Figma ne cherche pas à imposer son propre vocabulaire, il adopte celui du web. C'est un signal de maturité qui va dans le bon sens, celui d'un outil de design qui accepte pleinement que sa mission finale, c'est de produire des interfaces qui fonctionnent en code, pas seulement des maquettes qui font illusion. Si vous voulez voir comment on exploite ce type de nuances dans nos propres process, jetez un œil à notre méthode ou à notre expertise Webflow.
Code
Plus de 180 entreprises sont déjà sorties de l'obscurité à nos côtés.
Ils permettent de répartir automatiquement les espaces entre des éléments dans un conteneur, sans avoir à calculer manuellement chaque marge. Around laisse un demi-espace sur les bords, Evenly rend tous les espaces strictement identiques, y compris aux extrémités. C'est un gain de précision direct pour les mises en page en grille ou en liste.
Oui, c'est justement l'objectif de cette mise à jour. Between, Around et Evenly reprennent le vocabulaire et le comportement de justify-content en CSS, ce qui rapproche mécaniquement le design de son implémentation réelle en code.
Indirectement oui, car Webflow repose lui aussi sur les mêmes fondations flexbox que le CSS natif. Un design Figma pensé avec ces nouveaux modes de spacing se traduit plus naturellement en flex distribute dans Webflow, ce qui simplifie l'intégration et limite les allers-retours entre designer et intégrateur.
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.
