Blog

Tutoriel Figma : autolayout et contraintes

Vous travaillez sur Figma et vous aimeriez réaliser des interfaces au design responsive, avec des blocs qui s’adaptent à tous types d’écrans ? Figma est un logiciel de maquettage très puissants qui permet des réaliser des design d’interfaces complexes. Il existe pléthore de tutoriels vidéo en ligne pour apprendre à créer des barres de navigation en autolayout et au design responsive, vous pourrez notament suivre les chaînes youtube de Jessica Trocmé et Basti UI qui sont mes mentors pour l’apprentissage des bases de Figma. Si vous n’avez pas la possibilité de suivre une vidéo et préférez la version tuto écrite, voici de quoi apprendre à réaliser un bloc avec texte responsive !

Les composants sur Figma

Première chose à retenir !

Le composant Master sur Figma, c’est la version principale d’un élément cliquable que vous allez créer, comme par exemple un bouton ou une icône. 

Il sert de modèle à toutes les instances de cet élément dans votre conception. 

Lorsque vous apportez des modifications au composant Master, elles sont automatiquement répercutées sur toutes les instances, ce qui facilite la mise à jour et la cohérence de votre design.

figma, UX design, UI design, UX Designer freelance, UI Designer freelance, Designer, Adobe XD, maquettes, autolayout, responsive, constraints, contraintes, composant, component, composant interactif, scale
figma, UX design, UI design, UX Designer freelance, UI Designer freelance, Designer, Adobe XD, maquettes, autolayout, responsive, constraints, contraintes, composant, component, composant interactif, scale

Créer un bloc responsive sur Figma
avec l'autolayout et les contraintes en 6 étapes

Étape 1 : créer une frame avec un fond et les textes
figma, UX design, UI design, UX Designer freelance, UI Designer freelance, Designer, Adobe XD, maquettes, autolayout, responsive, constraints, contraintes, composant, component, composant interactif, scale

Étape 2 : créer une frame englobant les textes et lui rajouter un fond (cocher “clip content” sur la frame parent pour que le rectangle rouge s’adapte au rectangle arrondi) + rajouter contraintes

figma, UX design, UI design, UX Designer freelance, UI Designer freelance, Designer, Adobe XD, maquettes, autolayout, responsive, constraints, contraintes, composant, component, composant interactif, scale
figma, UX design, UI design, UX Designer freelance, UI Designer freelance, Designer, Adobe XD, maquettes, autolayout, responsive, constraints, contraintes, composant, component, composant interactif, scale

Étape 3 : Mettre la frame top (ici en rouge) en scale pour qu’elle d’adapte en cas de redimensionnement

figma, UX design, UI design, UX Designer freelance, UI Designer freelance, Designer, Adobe XD, maquettes, autolayout, responsive, constraints, contraintes, composant, component, composant interactif, scale
figma, UX design, UI design, UX Designer freelance, UI Designer freelance, Designer, Adobe XD, maquettes, autolayout, responsive, constraints, contraintes, composant, component, composant interactif, scale
Étape 4 : transposez cette carte en composant
figma, UX design, UI design, UX Designer freelance, UI Designer freelance, Designer, Adobe XD, maquettes, autolayout, responsive, constraints, contraintes, composant, component, composant interactif, scale

Étape 5 : créez différents formats à partir du composant master (copiez-collez le composant master et adaptez les cartes selon la taille que vous souhaitez)

figma, UX design, UI design, UX Designer freelance, UI Designer freelance, Designer, Adobe XD, maquettes, autolayout, responsive, constraints, contraintes, composant, component, composant interactif, scale

Étape 6 : comme les textes longs dépassent, ajoutez auto-height sur les textes du composant master

figma, UX design, UI design, UX Designer freelance, UI Designer freelance, Designer, Adobe XD, maquettes, autolayout, responsive, constraints, contraintes, composant, component, composant interactif, scale

+ scale sur le sous-titre
+ ajouter autolayout vertical sur le bloc bottom

figma, UX design, UI design, UX Designer freelance, UI Designer freelance, Designer, Adobe XD, maquettes, autolayout, responsive, constraints, contraintes, composant, component, composant interactif, scale
+ scale sur le sous-titre
figma, UX design, UI design, UX Designer freelance, UI Designer freelance, Designer, Adobe XD, maquettes, autolayout, responsive, constraints, contraintes, composant, component, composant interactif, scale
En suivant toutes ces étapes une à une, normalement vous devriez parvenir à réaliser une carte avec éléments ajustables sur vos maquettes figma.
N’oubliez pas de bien faire la différences entre les contraintes et l’autolayout : les contraintes c’est lorsqu’on veut redimensionner à la main le parent. L’auto layout c’est lorsque l’enfant pousse le « parent ».