Pour utiliser Auto Layout dans une maquette responsive, définissez les règles du bloc puis faites varier sa largeur et son contenu. L'objectif n'est pas seulement de déplacer des éléments ensemble : il faut comprendre ce qui s'étire, ce qui reste fixe et ce qui revient à la ligne.
Choisir la disposition selon le besoin
Commencez par un composant concret : une carte, un groupe de boutons ou un en-tête. Notez les relations importantes entre ses éléments avant de régler les espacements. Le titre doit-il pousser le bouton ? L'image doit-elle conserver sa proportion ? Une action peut-elle passer sous le texte ?
La documentation Auto Layout de Figma décrit les dispositions proposées, dont les flux horizontaux, verticaux et la grille. Ne partez pas d'un ancien comparatif qui supposerait que la grille est absente. Vérifiez les options effectivement disponibles dans votre environnement.
Préparer un jeu de contenus de contrôle
Créez un titre court, un titre long et un texte comportant un mot difficile à couper. Ajoutez un libellé de bouton réaliste, puis une variante plus développée. Ces textes d'essai doivent représenter les contraintes du projet, pas chercher à produire une maquette parfaite.
Faites varier la largeur du bloc progressivement. Relevez le moment où la composition cesse de répondre au besoin. Une capture mobile et une capture ordinateur ne montrent pas forcément les difficultés situées entre les deux.
Exemple fictif : une carte d'atelier
Imaginons une carte contenant une image, un titre, une date et un lien d'inscription. Le premier titre tient sur une ligne, le second sur trois. Si les cartes doivent être comparées dans une liste, décidez ce qui doit s'aligner et ce qui peut varier.
Éprouvez une version étroite, puis une largeur intermédiaire. Vérifiez que la date reste associée au bon titre et que l'action ne recouvre pas le texte. Si une hauteur fixe coupe le contenu, revoyez la règle plutôt que de raccourcir artificiellement tous les titres.
Conservez trois états illustrant la décision retenue et ajoutez une annotation : largeur contrainte, contenu variable, comportement attendu. Ce scénario fictif prépare une transmission ; il ne prouve pas qu'un navigateur produira le même résultat sans règles CSS adaptées.
Relier la disposition aux composants réutilisés
Lorsque plusieurs blocs suivent les mêmes règles, organisez les composants et leurs variantes. Une copie isolée peut diverger sans que les autres écrans soient corrigés. Définissez aussi les exceptions qui justifient réellement un comportement différent.
Pour un en-tête ou un menu, complétez l'exercice avec les scénarios de navigation mobile accessible. Le retour à la ligne n'est qu'un aspect du problème : l'ouverture, la fermeture et les commandes devront être testées dans l'interface développée.
Lors de la transmission, décrivez l'intention et les cas d'essai, pas seulement les valeurs de la capture finale. Le développeur pourra alors vérifier la règle sur des contenus nouveaux sans deviner ce qui devait rester fixe.
Questions fréquentes
Auto Layout produit-il automatiquement un site responsive ?
Non. Il organise la maquette. Le développement doit traduire les règles dans le document et les styles, puis vérifier le résultat sur le site et ses contenus réels.
Faut-il éviter toutes les tailles fixes ?
Non. Certaines dimensions peuvent répondre à une contrainte légitime. Le point important est de savoir ce qu'elles protègent et ce qui se passe lorsque le contenu dépasse l'hypothèse initiale.
Pourquoi tester des mots longs ?
Ils peuvent révéler des débordements qu'un texte court ne montre pas. Utilisez des noms et libellés plausibles pour votre projet, notamment si plusieurs langues ou des noms propres sont prévus.
Sources
Documentation consultée lors de la relecture du 10 septembre 2026.