Créer la maquette d'une application mobile

Reproduire une application existante pour apprendre Figma

Le meilleur exercice pour débuter sur Figma, c’est de refaire une interface que tu connais déjà. Ici, c’est Vinted : page d’inscription, accueil, catégories, sous-catégories. Les captures de l’application servent de référence, posées à côté du plan de travail, et tout est reconstruit écran par écran.

Avant de dessiner quoi que ce soit, les couleurs de marque sont enregistrées en styles locaux : le vert de Vinted, le gris des bordures. Chaque élément se connecte au style au lieu de recevoir un hexadécimal tapé à la main : si la teinte change, elle change partout.

Frames, auto layout et zone de sécurité

La touche F ouvre le panneau des frames prédimensionnées : un format iPhone suffit, avec un border radius de 30 pixels pour l’aspect d’un vrai écran.

Le bandeau du haut (heure, réseau, batterie) est dupliqué depuis la capture de référence, rogné, aligné en haut de la frame puis verrouillé. C’est la zone de sécurité : elle évite de designer trop haut sur le téléphone.

Le reste passe en auto layout, avec le raccourci Shift + A. Le screen s’empile à la verticale, gap à zéro, et chaque bloc à l’intérieur prend le fill container pour occuper toute la largeur disponible. Le hug content fait l’inverse : l’élément se réduit à la taille de son contenu, utile sur les liens et les boutons. C’est ce couple de réglages qui rend la maquette adaptable.

Quand un élément doit sortir du flux, comme la flèche de retour d’une barre de titre, il passe en position absolute avec des contraintes à gauche et au centre : il reste calé même si la frame change de largeur.

Les composants Figma, le vrai gain de temps

Le bouton se construit sans rectangle : un simple texte, Shift + A pour l’envelopper dans une frame en auto layout, du padding, la couleur de marque en fond, un radius léger. Il devient un composant, avec une variante verte et une variante blanche qu’on échange depuis le panneau de droite.

La barre de recherche va plus loin. Elle reçoit une propriété booléenne connectée à la flèche de retour : un interrupteur sur l’instance affiche ou masque la flèche, au lieu de maintenir deux composants distincts. Une instance accepte aussi ses propres valeurs, un padding par exemple, sans impacter le composant principal ni les autres écrans.

Les icônes

• Bibliothèque Lucide, copie du SVG et collage direct dans la frame.
• Épaisseur de trait réduite dans la bibliothèque avant la copie si l’icône paraît trop grasse.
• Redimensionnement avec l’outil Scale (touche K) : le trait garde sa finesse, ce qui n’est pas le cas avec une poignée classique.

Carrousels, cartes produit et barre d’onglets

La carte produit empile un conteneur d’image et un bloc d’informations (marque, taille, prix). Le compteur de likes passe en absolute dans le conteneur de l’image et se cale en bas à droite. La carte devient un composant : les images changent d’une copie à l’autre, la structure reste commune.

Pour faire défiler le carrousel, tout se joue dans l’onglet Prototype : overflow horizontal sur la frame, et scroll with parent pour qu’elle suive le défilement vertical de la page. Le screen lui-même doit passer en overflow vertical, sinon la page reste figée de haut en bas.

La barre d’onglets reprend le même modèle cinq fois : une icône, un texte. Chaque onglet passe en fill container pour se partager la largeur équitablement, sinon un libellé plus long décale tous les autres. Trois variantes gèrent les états, avec la couleur de marque et un texte semi-bold sur l’onglet actif, et un padding bas plus généreux laisse la place à la barre système du téléphone.

Header fixe et prototypage dans Figma

Reste à figer ce qui doit rester visible pendant le défilement, le header et la barre d’onglets : c’est le rôle de la position fixed.

Le prototypage tient ensuite en trois réglages : on click, navigate to, écran de destination. Restent les animations, à choisir selon le geste.

La dernière action est la plus rentable : back. Reliée à la flèche de retour, elle ramène sur l’écran d’où vient l’utilisateur, quel qu’il soit, sans créer une liaison par point de départ.

Conclusion

Une maquette d’application mobile sur Figma repose sur quatre piliers : l’auto layout pour la structure, les styles locaux pour la cohérence, les composants et leurs propriétés pour la vitesse, le prototypage pour donner l’illusion d’une application qui tourne vraiment.