Auto Layout Figma : maîtriser le responsive design
Tutoriel complet sur l'Auto Layout dans Figma : créez des composants responsive flexibles avec padding, spacing et constraints.
Auto Layout est la fonctionnalite la plus transformative de Figma pour la creation de designs responsifs et maintenables. Introduit en 2019 et massivement ameliore depuis, Auto Layout permet aux elements de s organiser automatiquement selon des regles de flux, d espacement et d alignement, exactement comme le modele Flexbox en CSS. Maitriser Auto Layout est indispensable pour tout designer qui souhaite creer des composants adaptatifs, des mises en page dynamiques et des design systems coherents.
L importance d Auto Layout depasse la simple commodite de mise en page. Il change fondamentalement la maniere dont les designs sont structures dans Figma. Un design construit avec Auto Layout est semantiquement plus proche du code final : les conteneurs ont une direction de flux, les elements enfants respectent des regles d espacement uniformes, et les dimensions s adaptent au contenu. Cette proximite structurelle avec le CSS Flexbox facilite le handoff vers les developpeurs et produit du code genere plus pertinent dans Dev Mode.
Ce guide couvre Auto Layout de maniere exhaustive, depuis les fondamentaux de direction et d alignement jusqu aux techniques avancees comme les Auto Layouts imbriques, les contraintes min/max, le positionnement absolu et la creation de composants veritablement responsifs. Chaque concept est explique avec des cas d utilisation concrets et des recommandations pratiques pour vous permettre d exploiter tout le potentiel de cette fonctionnalite dans vos projets.
1. Les fondamentaux : direction, espacement et padding
Auto Layout transforme un frame Figma en conteneur flexible qui organise ses enfants selon une direction definie. La direction horizontale (row) place les enfants cote a cote de gauche a droite, tandis que la direction verticale (column) les empile de haut en bas. La direction Wrap permet aux elements de passer a la ligne suivante quand ils atteignent la largeur du conteneur, equivalent a flex-wrap: wrap en CSS. Ces trois modes couvrent la majorite des besoins de mise en page.
L espacement entre les elements enfants est defini par la propriete gap, unifiee ou differenciee par axe. En mode horizontal, le gap definit l espace horizontal entre chaque enfant. En mode vertical, il definit l espace vertical. En mode Wrap, vous pouvez definir un gap horizontal et un gap vertical distincts pour controler l espacement dans les deux directions. Utilisez les variables de spacing de votre design system pour garantir la coherence : selectionnez le champ gap et appliquez une variable comme spacing/md.
Le padding definit l espace entre le bord du conteneur Auto Layout et son contenu. Figma permet de definir un padding uniforme (meme valeur sur les quatre cotes), un padding par axe (horizontal et vertical) ou un padding individuel par cote (haut, droite, bas, gauche). L icone de lien dans le panneau de proprietes permet de basculer entre ces modes. Pour la plupart des composants, un padding par axe est suffisant : par exemple, 16px horizontal et 12px vertical pour un bouton.
La propriete Fill (remplissage) des enfants controle comment ils occupent l espace disponible dans le conteneur. Un enfant en Fixed width conserve sa largeur definie quelle que soit la taille du conteneur. Un enfant en Fill container s etend pour occuper tout l espace disponible, equivalent a flex: 1 en CSS. Un enfant en Hug content s ajuste a la taille de son contenu. Ces trois modes se combinent pour creer des layouts flexibles : un header avec un logo en Fixed, un espace central en Fill et des icones en Hug.
La direction de l Auto Layout peut etre modifiee dynamiquement avec les Component Properties de type Variant. Creez un composant avec une variante desktop (direction horizontale) et une variante mobile (direction verticale) pour adapter la mise en page au breakpoint. Cette approche est plus maintenable que de creer deux composants separes et reflete la logique des media queries CSS que les developpeurs implementeront.
2. Alignement et distribution des elements
L alignement dans Auto Layout fonctionne sur deux axes : l axe principal (direction du flux) et l axe transversal (perpendiculaire au flux). Pour un Auto Layout horizontal, l axe principal est horizontal et l axe transversal est vertical. Le controle de l alignement se fait via la matrice 3x3 dans le panneau de proprietes, ou chaque position represente une combinaison d alignement principal et transversal : debut, centre ou fin sur chaque axe.
L alignement transversal est critique pour la qualite visuelle. Dans un Auto Layout horizontal contenant un texte et une icone de tailles differentes, l alignement transversal determine si ces elements sont alignes en haut, au centre ou en bas. L alignement central est le plus courant pour les composants comme les boutons, les badges et les barres de navigation. L alignement en baseline (ligne de base typographique) n est pas disponible nativement dans Figma, ce qui peut necessiter des ajustements manuels de padding pour les cas complexes.
La distribution avec l option Space Between repartit l espace restant uniformement entre les elements enfants, equivalent a justify-content: space-between en CSS. Cette distribution est ideale pour les barres de navigation, les footers avec des colonnes equidistantes et les tabs horizontaux. Quand Space Between est active, la propriete gap est ignoree car l espacement est calcule dynamiquement selon l espace disponible et le nombre d enfants.
L alignement individuel d un enfant permet de le soustraire a l alignement global du conteneur. Selectionnez un element enfant specifique et modifiez son alignement dans le panneau de proprietes pour le placer differemment des autres enfants. Par exemple, dans un header avec alignement central, vous pouvez aligner individuellement un bouton d action en bas. Cette fonctionnalite correspond a align-self en CSS et offre une flexibilite supplementaire sans ajouter de conteneurs intermediaires.
Pour les mises en page complexes, combinez l alignement du conteneur avec les modes de remplissage des enfants. Un conteneur vertical avec alignement a gauche et des enfants en Hug content creera une pile d elements alignes a gauche de largeurs variables. Le meme conteneur avec des enfants en Fill container creera des elements qui s etendent tous a la largeur du conteneur. Comprendre ces interactions est essentiel pour construire des layouts previsibles et maintenables.
3. Auto Layouts imbriques pour des mises en page complexes
La puissance reelle d Auto Layout emerge avec l imbrication de conteneurs. Une page web typique est un Auto Layout vertical contenant un header (Auto Layout horizontal), une section hero (Auto Layout vertical), une grille de cartes (Auto Layout horizontal avec Wrap) et un footer (Auto Layout horizontal). Chaque niveau d imbrication gere la direction et l espacement de ses enfants directs, creant une hierarchie de layout claire et previsible.
Les cartes illustrent parfaitement l imbrication. Une carte typique est un Auto Layout vertical contenant : une image en haut (Fixed height), un bloc de contenu textuel au milieu (Auto Layout vertical avec un gap de 8px entre le titre, la description et les tags), et un bloc d actions en bas (Auto Layout horizontal avec des boutons). Le bloc de contenu est en Fill container verticalement pour pousser les actions vers le bas, creant un layout de carte elastique qui s adapte a differentes quantites de contenu.
Les formulaires beneficient enormement de l imbrication d Auto Layout. Chaque champ de formulaire est un Auto Layout vertical contenant un label, un input et un message d erreur optionnel. Le formulaire global est un Auto Layout vertical contenant ces champs avec un gap uniforme. Un groupe de champs cote a cote (comme prenom et nom) est un Auto Layout horizontal contenant deux champs en Fill container. Cette structure reflete exactement la hierarchie HTML que le developpeur implementera.
La navigation responsive est un cas d utilisation avance d imbrication. Un composant de navigation contient un Auto Layout horizontal avec le logo a gauche, les liens de navigation au centre (Auto Layout horizontal en Fill container avec Space Between) et les actions utilisateur a droite. En variante mobile, la direction passe a vertical et les liens sont caches derriere un menu hamburger. Chaque sous-section est elle-meme un Auto Layout qui gere l alignement et l espacement de ses propres enfants.
Pour eviter la complexite excessive de l imbrication, limitez-vous a 4-5 niveaux maximum. Au-dela, la structure devient difficile a comprendre et a maintenir. Si vous avez besoin de plus de niveaux, c est generalement le signe qu un sous-ensemble devrait etre extrait en composant reutilisable. Nommez chaque frame Auto Layout de maniere descriptive (Container, ContentArea, ActionBar) pour que la hierarchie reste lisible dans le panneau de couches.
Besoin d’aide en Figma ?
Nos experts vous accompagnent. Recevez 3 devis gratuits sous 24h.
Gratuit · Sans engagement · Reponse sous 24h
4. Contraintes min/max pour des layouts adaptatifs
Les contraintes min-width, max-width, min-height et max-height sont essentielles pour creer des composants qui s adaptent elegamment a differentes tailles de conteneur. Dans Figma, ces contraintes se definissent dans le panneau de proprietes de chaque element, dans les champs situes sous les dimensions principales. Un composant de texte avec min-width: 200px et max-width: 400px s etirera dans cette plage selon l espace disponible, sans jamais devenir trop etroit ni trop large.
Les contraintes min/max sont particulierement utiles pour les composants textuels. Un bouton avec un texte variable peut utiliser Hug content en largeur avec un min-width de 120px pour garantir une taille de cible tactile minimum, meme avec un texte court comme OK. Inversement, un max-width de 300px empeche le bouton de devenir demesurement large avec un texte long, forcant le texte a passer a la ligne. Cette approche produit des boutons adaptatifs qui respectent les contraintes d accessibilite et d esthetique.
Pour les layouts de page, les contraintes max-width definissent les largeurs de contenu maximales. Un conteneur de texte avec max-width: 720px garantit une longueur de ligne lisible (environ 70-80 caracteres) quelle que soit la largeur de l ecran. Un conteneur de grille avec max-width: 1200px centre le contenu et empeche l etirement excessif sur les grands ecrans. Ces contraintes repliquent les max-width CSS que les developpeurs implementeront.
La combinaison de Fill container avec des contraintes min/max cree des layouts veritablement responsifs. Un element enfant en Fill container avec min-width: 250px dans un conteneur horizontal Wrap creera automatiquement une grille responsive : les elements s etalent horizontalement tant que chacun a au moins 250px, puis passent a la ligne suivante. Ce comportement est exactement equivalent a un CSS Grid avec auto-fill et minmax, et constitue la methode la plus elegante pour creer des grilles adaptatives dans Figma.
Testez vos contraintes en redimensionnant les frames conteneurs a differentes tailles typiques : 375px (mobile), 768px (tablette), 1024px (petit desktop), 1440px (grand desktop). Verifiez que les composants se comportent correctement a chaque taille et qu aucun contenu ne deborde ou ne disparait. Les contraintes min/max bien configurees eliminant le besoin de creer des maquettes separees pour chaque breakpoint, car le design s adapte naturellement.
5. Positionnement absolu dans un contexte Auto Layout
Le positionnement absolu dans Auto Layout permet de placer un element enfant en dehors du flux normal du conteneur, le faisant flotter au-dessus des autres elements. Pour activer le positionnement absolu, selectionnez l element enfant et cliquez sur l icone de positionnement absolu dans le panneau de design (icone avec un point et des lignes de contrainte). L element est alors retire du calcul du flux et peut etre positionne librement par rapport au conteneur parent.
Les cas d utilisation courants du positionnement absolu incluent les badges de notification sur les icones, les boutons de fermeture dans les coins des modals, les indicateurs de statut sur les avatars, les overlays sur les images et les labels flottants sur les champs de formulaire. Dans chacun de ces cas, l element positionne absolument est visuellement associe au conteneur mais ne doit pas influencer l arrangement des autres enfants.
Les contraintes d un element positionne absolument definissent comment il se positionne par rapport aux bords du conteneur parent. Vous pouvez contraindre l element a gauche, a droite, en haut, en bas, au centre horizontalement ou au centre verticalement. Par exemple, un badge de notification est contraint en haut et a droite avec un decalage negatif de -4px sur chaque axe pour chevaucher le coin de l icone. Un bouton de fermeture dans une modal est contraint en haut et a droite avec un offset de 16px.
La superposition d elements positionnes absolument suit l ordre z-index du panneau de couches. Les elements places plus haut dans la liste apparaissent au-dessus. Contrairement au CSS ou le z-index est explicite, Figma utilise l ordre naturel des couches. Pour s assurer qu un element absolu apparait au-dessus du contenu, placez-le en haut de la liste des enfants dans le panneau de couches. Cette approche est intuitive mais peut necessiter des reordonnements manuels lors de modifications.
Evitez de surcharger un Auto Layout avec trop d elements positionnes absolument. Si plus de 2-3 elements sont en position absolue dans un meme conteneur, la structure devient confuse et difficile a maintenir. Privilegiez l utilisation d un sous-frame dedie pour regrouper les elements superposes. Par exemple, plutot que de mettre un badge et un indicateur de statut en position absolue sur un avatar, creez un sous-composant AvatarWithBadge qui gere cette complexite internement.
6. Creer des composants veritablement responsifs
Un composant responsif dans Figma est un composant qui s adapte elegamment a differentes tailles et contextes sans intervention manuelle. La cle est de combiner Auto Layout, les modes de remplissage (Fill, Hug, Fixed), les contraintes min/max et les Component Properties pour creer des composants qui repondent naturellement aux variations de contenu et de conteneur. Un bouton responsif utilise Hug content en largeur avec un min-width, des paddings en variables de spacing et un texte qui truncate au-dela d un max-width.
Les breakpoints dans les composants se gerent via les Component Properties de type Variant. Creez un variant property breakpoint avec les valeurs desktop, tablet et mobile. Pour chaque breakpoint, ajustez la direction de l Auto Layout, les valeurs de gap et padding, la visibilite des elements optionnels (via Boolean properties) et la taille du texte. L instance du composant dans une maquette mobile utilisera le breakpoint mobile, tandis que la meme instance dans un desktop utilisera le breakpoint desktop.
Les conteneurs fluides sont la base des layouts responsifs. Creez vos composants principaux (cartes, sections, barres laterales) en Fill container par defaut, leur permettant de s adapter a la largeur du conteneur parent. Les elements internes utilisent un melange de Fill et Hug : les titres en Fill pour s etendre, les boutons en Hug pour garder leur taille naturelle. Quand le conteneur retrecit, les elements Fill retrecissent proportionnellement tandis que les elements Hug conservent leur taille, creant un comportement naturel.
La troncature de texte est un aspect souvent neglige des composants responsifs. Un texte dans un composant Auto Layout peut etre configure pour truncate avec des points de suspension quand il atteint la limite de son conteneur. Definissez le nombre maximum de lignes dans les proprietes du texte (1 pour une ligne avec troncature, 2-3 pour un apercu). Cette configuration garantit que le composant reste esthetique meme avec du contenu imprevisilement long, evitant les debordements visuels.
Testez vos composants responsifs de maniere systematique. Creez une page de test avec des instances de chaque composant placees dans des conteneurs de largeurs variees : 280px, 320px, 375px, 480px, 640px, 768px, 1024px, 1280px, 1440px. Verifiez que chaque composant se comporte correctement a chaque taille, sans texte coupe, sans debordement, sans espaces excessifs. Automatisez ce test en creant un frame de test reutilisable avec des conteneurs de taille fixe que vous dupliquez pour chaque composant.
7. Techniques avancees et patterns recurrents
Le pattern Spacer est une technique pour creer des espaces flexibles entre des groupes d elements. Inserez un frame vide en Fill container entre deux groupes d elements dans un Auto Layout horizontal. Ce spacer invisible pousse les groupes aux extremites du conteneur, equivalent a un div flex-grow en CSS. Par exemple, dans un header avec un logo a gauche et des actions a droite, un spacer central en Fill container cree l espace flexible entre les deux groupes.
Le pattern Divider utilise un frame Auto Layout avec une hauteur de 1px et une largeur en Fill container pour creer des separateurs entre les sections. Donnez a ce frame une couleur de fond correspondant a votre token de couleur border/default. Place comme enfant d un Auto Layout vertical, le divider s etend automatiquement a la largeur du conteneur. Encapsulez le divider dans un composant reutilisable avec un padding vertical optionnel pour l espace autour de la ligne.
Le pattern Stack permet de superposer des elements en utilisant la combinaison de position absolue et d Auto Layout. Creez un frame Auto Layout qui contient un element de fond (image ou couleur) en Fill container, puis ajoutez des elements de contenu en position absolue au-dessus. Cette technique est ideale pour les hero banners avec du texte sur une image, les cartes avec des overlays de gradient et les composants avec des etats de chargement superposes.
La technique de clipping automatique utilise les proprietes Clip content de l Auto Layout pour masquer les elements qui debordent du conteneur. Activez Clip content sur le frame Auto Layout et les enfants qui depassent les limites du conteneur seront visuellement tronques. Cette technique est utile pour les carrousels horizontaux, les listes avec scroll horizontal et les composants qui revelent du contenu au hover via des animations de deplacement.
Le pattern Responsive Grid sans plugin cree une grille responsive en utilisant un Auto Layout horizontal avec Wrap et des enfants en Fill container avec un min-width. Definissez le gap horizontal et vertical du conteneur, puis configurez chaque enfant avec Fill container et min-width: 300px. Les enfants s arrangent automatiquement en colonnes, passant de 4 colonnes sur grand ecran a 1 colonne sur mobile, sans aucun calcul manuel. Cette technique replique le comportement d un CSS Grid avec auto-fill et minmax de maniere elegante.
Questions frequentes
Quelle est la difference entre Auto Layout et les contraintes classiques dans Figma ?
Auto Layout gere l arrangement des enfants selon un flux directionnel (horizontal, vertical ou wrap) avec des regles d espacement et d alignement, equivalant a CSS Flexbox. Les contraintes classiques (Constraints) gerent le positionnement d un element par rapport aux bords de son frame parent lors du redimensionnement, equivalant a CSS position et anchoring. Les deux systemes servent des objectifs differents et sont complementaires. Utilisez Auto Layout pour les composants et les mises en page structurees, et les contraintes pour les elements fixes dans des frames non-Auto Layout.
Comment convertir un design existant sans Auto Layout vers Auto Layout ?
La conversion se fait de maniere incrementale, en commencant par les composants les plus simples. Selectionnez les elements enfants d un groupe, creez un Auto Layout via Shift+A, puis ajustez la direction, le gap, le padding et les modes de remplissage. Travaillez de l interieur vers l exterieur : convertissez d abord les composants atomiques (boutons, champs), puis les molecules (cartes, barres), puis les organismes (sections, pages). Verifiez visuellement que le rendu est identique apres chaque conversion avant de passer au composant suivant.
Pourquoi mes elements Auto Layout ne s alignent-ils pas comme prevu ?
Les problemes d alignement dans Auto Layout proviennent generalement de trois causes. Premierement, la confusion entre l alignement du conteneur (qui affecte tous les enfants) et l alignement individuel d un enfant (qui ne l affecte que lui). Deuxiemement, un enfant en Fill container qui masque l effet de l alignement car il occupe tout l espace disponible. Troisiemement, des paddings inegaux qui creent un decentrage visuel. Verifiez ces trois aspects systematiquement pour diagnostiquer les problemes d alignement.
Auto Layout impacte-t-il les performances des fichiers Figma volumineux ?
Auto Layout a un cout de calcul superieur aux frames statiques car Figma doit recalculer le layout a chaque modification. Sur des fichiers contenant des milliers de composants avec des Auto Layouts profondement imbriques (6+ niveaux), des ralentissements sont possibles. Pour optimiser les performances, limitez l imbrication a 4-5 niveaux, evitez les Auto Layouts inutiles sur les elements statiques, et decomposez les pages complexes en composants qui sont calcules independamment. En pratique, les gains de productivite d Auto Layout compensent largement le leger surcoute de performance.
Comment reproduire un CSS Grid avec Auto Layout dans Figma ?
Auto Layout avec Wrap est l equivalent le plus proche de CSS Grid dans Figma. Creez un Auto Layout horizontal, activez Wrap, definissez le gap horizontal et vertical, puis configurez chaque enfant en Fill container avec un min-width correspondant a la largeur minimale de colonne souhaitee. Pour un grid de 3 colonnes avec des colonnes de minimum 300px, les enfants auront min-width: 300px et passeront a 2 puis 1 colonne quand le conteneur retrecit. Pour des grids avec des colonnes de largeurs differentes, combinez Fill container avec des ratios de largeur specifiques en utilisant la propriete Fill ratio d Auto Layout.
Guides complementaires
Comment créer un design system sur Figma : guide complet 2025
Maîtrisez la création d'un design system complet sur Figma : couleurs, typographie, composants réutilisables et design tokens pour une cohérence parfaite.
FigmaLes 30 meilleurs plugins Figma pour designers en 2025
Sélection complète des 30 meilleurs plugins Figma classés par catégorie : productivité, accessibilité, contenu, animations et collaboration.
FigmaFigma vs Sketch : comparatif complet pour designers en 2025
Comparaison détaillée Figma vs Sketch : fonctionnalités, collaboration, prix et performances pour vous aider à choisir le bon outil.
Outils gratuits recommandes
Lancez votre projet figma
500+ experts verifies prets a vous accompagner. Devis gratuit sous 24h.