Faire une maquette de site web dans Figma

Préparer son fichier Figma avant de dessiner

Le fichier se prépare en deux pages : une page ressources où tu déposes toutes les images du projet, une page maquette où tu travailles. Les allers-retours entre les deux se font au copier-coller, qui fonctionne aussi d’un fichier Figma à un autre.

Une maquette commence toujours par une frame. Le raccourci F ouvre l’outil et, plutôt que de tracer un écran au jugé, tu choisis un format préréglé dans la liste, un MacBook Pro 16 pouces par exemple. Renomme la frame tout de suite. Pour naviguer, commande et molette zooment, maj et molette déplacent la vue latéralement.

L’auto layout, la mécanique centrale de Figma

C’est l’outil qui remplace l’alignement à la main. Tu poses tes éléments approximativement, tu les sélectionnes, et maj + A crée une frame en auto layout autour d’eux. Restent trois réglages à comprendre :

• le gap, l’espace entre les éléments ;
• le padding, le rembourrage interne de chaque côté ;
• l’espacement réglé sur auto, qui pousse les éléments aux extrémités.

Construire les sections une par une

La navigation

Textes à 14 pixels, la police de la marque récupérée sur son site, les pictos importés depuis une librairie d’icônes. Un auto layout centré, un padding vertical, et la barre est finie en quelques minutes.

Le bouton pilule

1. Un texte. Le bouton part de son libellé.
2. Maj + A. Le texte est emballé dans une frame en auto layout.
3. Une couleur de fond, un padding réduit. La frame devient un bouton.
4. Un corner radius autour de 99. L’effet pilule ne demande rien de plus.

La hero

Une frame calée sur la largeur de la page, l’image posée en fond depuis l’ordinateur, puis le titre, le sous-titre et le bouton regroupés en auto layout vertical avec un gap serré. Détail utile : un texte aligné au centre se redimensionne à partir de son centre, ce qui évite de le recaler à chaque essai.

Les colonnes d’offres

Trois colonnes presque identiques se dupliquent plutôt qu’elles ne se refont. Pour que leurs boutons s’alignent malgré des textes de longueurs différentes, tu passes les cartes en fill container sur la hauteur et tu règles leur distribution sur space between.

Composants et variantes

Le bouton principal revient à plusieurs endroits de la page : c’est donc un composant. Créé une fois, il se glisse ensuite depuis le panneau Assets. Le composant principal se repère à son losange plein dans la hiérarchie, les instances à leur losange vide. Modifier le principal met à jour toutes les instances d’un coup, modifier une instance ne touche qu’elle.

Quand il te faut une déclinaison plus petite pour les cartes, tu n’en crées pas un second : tu ajoutes une variante, tu réduis sa taille de texte et son padding, et chaque instance choisit ensuite son état dans le panneau de droite.

Images, bento et vérification

Deux façons de redimensionner proportionnellement : maintenir maj en tirant une poignée, ou passer par l’outil Scale, raccourci K, qui met aussi le texte à l’échelle. Le recadrage se fait en double-cliquant sur l’image puis en choisissant crop.

Pour un bloc bento, les cartes doivent partager exactement les mêmes dimensions et les mêmes espacements, avec un corner radius commun. Trois détails font perdre du temps sur cette partie :

• le clip content, actif par défaut sur les frames, qui coupe ce qui dépasse et se désactive au besoin ;
• le copier-coller de texte, qui conserve le style mais aussi les retours à la ligne d’origine, à supprimer pour que le texte se réadapte à sa nouvelle largeur ;
• la vidéo en fond de section, réservée aux comptes payants, qu’une image remplace en attendant.

Dernier réflexe, sélectionner la frame de la page et lancer la preview : la maquette s’affiche mise en situation dans un écran, ce qui est déjà présentable à un client.

Conclusion

Construire une page complète dans Figma tient à quelques réflexes qui reviennent en boucle : une frame par section, l’auto layout pour tout aligner, un composant dès qu’un élément se répète. Le reste est de la répétition.