Créer une maquette d'interface et son prototype animé

Poser la structure du hero dans Figma

La maquette reproduit la page d’accueil de Netflix. Elle démarre par une frame MacBook Pro 16 pouces, soit 1728 pixels de large, passée aussitôt en autolayout vertical, gap et padding retirés : c’est ce qui garantit un alignement propre au fur et à mesure que les sections s’empilent.

À l’intérieur, une frame header en fill container sur la largeur et en hauteur fixe à 980 pixels. Le fond vidéo est une frame en position absolue à laquelle on applique un fill de type vidéo, disponible uniquement sur les forfaits payants de Figma, autour de 15 € par mois et par siège.

Une fois la vidéo posée, verrouille ce calque : tout le reste se construit par-dessus.

Construire le contenu du hero

Le contenu vit dans une frame alignée en bas, avec un padding bas de 150 pixels pour décoller le texte. Elle contient deux blocs en space between : le logo de la série et ses boutons à gauche, les informations à droite.

Les boutons

• Un groupe en autolayout horizontal, gap de 16 pixels.
• Un texte enveloppé dans une frame avec shift + A, padding 32 sur les côtés et 8 en hauteur, corner radius de 5.
• L’icône play dessinée à la main plutôt que cherchée en bibliothèque : un polygone pivoté à -90 degrés, avec un léger corner radius.
• Le bouton secondaire dupliqué et passé en gris, avec une icône info récupérée sur Lucide en copie SVG, à 20 pixels comme toutes les icônes de la maquette.

Le bloc de droite

L’icône de son est enveloppée dans une frame : un padding de 10, une bordure blanche et un corner radius très élevé suffisent à faire le cercle. Le label 16+ est une frame dont on isole la seule bordure gauche, avec un padding droit poussé à 50 pour l’étirer jusqu’au bord de l’écran.

Deux réflexes reviennent en boucle : fill container quand un bloc occupe la place disponible, hug content quand il s’ajuste à son contenu. Et pour réduire un élément qui contient du texte, la touche K active le scale, sinon le texte ne suit pas.

Superposer la navigation au header

La navigation est une frame sortie du flux et passée en position absolue pour se poser au-dessus du header. Autolayout horizontal, space between, 32 pixels de padding. À gauche, le logo puis une frame regroupant les liens à 14 pixels avec un gap de 16, séparée du logo par 32 pixels : c’est précisément pour obtenir deux écarts différents que les liens sont isolés dans leur propre frame. À droite, la loupe, un lien, la cloche de notifications et le profil avec son chevron.

La carte animée et son prototype

Le morceau intéressant, c’est la carte qui s’agrandit au survol et lance sa vidéo. On construit toujours l’état le plus complet en premier : la grande carte, avec sa ressource visuelle, ses boutons d’action, le titre de l’épisode et sa barre de progression (une frame grise de 3 pixels de haut contenant une frame rouge). La miniature est ensuite une duplication réduite à la touche K, dont on masque le contenu du bas au lieu de le supprimer.

L’animation

Dans l’onglet prototype, tu relies la variante miniature à la variante carte avec trois réglages :

• déclencheur : while hovering ;
• action : change to ;
• animation : smart animate, sur 300 ms.

La vidéo se lance au survol et se met en pause dès que la souris sort.

Les carrousels et les trois pièges de la preview

Chaque catégorie est une frame en autolayout vertical, padding 32, gap 16, avec un titre à 20 pixels et une rangée de six cartes espacées de 32 pixels. Le tout se duplique autant de fois qu’il y a de catégories, et comme les cartes sont un composant, seules les miniatures changent.

La première preview fait apparaître trois problèmes, et ce sont toujours les mêmes :

1. Les cartes agrandies sont coupées. Le clip content est actif par défaut sur les frames, il faut le désactiver à chaque niveau de la hiérarchie.
2. Les carrousels ne défilent pas. Dans prototype, l’overflow doit passer en horizontal, carrousel par carrousel.
3. La carte agrandie passe derrière la rangée du dessous. Figma n’a pas de z-index : on regroupe tous les carrousels dans une frame en autolayout et on bascule le canvas stacking sur first on top.

Dernière finition : remplacer l’overlay noir du hero par un dégradé, pour que la jonction avec le premier carrousel se fasse en fondu.

Conclusion

Une maquette animée dans Figma tient sur trois habitudes : tout envelopper dans des frames en autolayout, construire l’état le plus riche avant l’état de repos, et prévoir la zone de référence sans laquelle smart animate ne peut rien interpoler.