Avant de dessiner le moindre écran, il faut comprendre l'espace dans lequel vous travaillez. Ouvrez Figma et créez un nouveau fichier de conception (bouton Design file). Vous arrivez sur un canevas infini entouré de trois zones essentielles : à gauche le panneau des calques (Layers), au centre le canevas, à droite le panneau des propriétés qui change selon ce que vous sélectionnez.
Le premier réflexe à adopter : ne jamais dessiner directement sur le canevas sans contenant. Tout dans Figma commence par une frame (cadre). C'est elle qui définit la taille d'un écran, son fond, et plus tard son comportement responsive. Pour en créer une, appuyez sur la touche F, puis choisissez un préréglage dans le panneau de droite, par exemple « iPhone 14 » (375 x 812) pour du mobile ou « Desktop » (1440 x 1024) pour du web.
Les gestes à maîtriser dès maintenant
- F : créer une frame
- R : créer un rectangle
- T : créer un texte
- Ctrl/Cmd + D : dupliquer un élément sélectionné
- Ctrl/Cmd + G : grouper plusieurs éléments
Une fois votre frame créée, renommez-la immédiatement dans le panneau des calques : double-cliquez sur son nom et tapez quelque chose de clair, comme « Écran Accueil ». Ce nommage systématique vous évitera de vous perdre dès que votre fichier comptera plus de cinq écrans, ce qui arrive très vite.
Créez ensuite trois frames côte à côte sur votre canevas : « Écran Connexion », « Écran Accueil » et « Écran Profil », toutes en format mobile. Espacez-les d'au moins 100 pixels pour garder de la lisibilité. Cette organisation en ligne horizontale est une convention largement adoptée : elle permet de visualiser un parcours de gauche à droite, un peu comme une bande dessinée.
Piège à éviter : beaucoup de débutants dessinent des rectangles en guise d'écran, sans jamais utiliser de vraie frame. Résultat, impossible d'exporter proprement, impossible de prototyper, impossible d'appliquer un redimensionnement automatique. La frame n'est pas un détail esthétique, c'est la fondation technique de tout votre travail dans Figma.
💡 Conseil de pro : activez l'affichage des règles (Shift + R) et habituez-vous à vérifier la taille exacte de vos frames dans le panneau de droite (champs W et H). Une frame mobile mal dimensionnée produit des maquettes qui ne correspondent à aucun appareil réel, ce qui complique tout le travail de développement par la suite.
Mini-exercice : créez un nouveau fichier Figma, ajoutez trois frames mobiles nommées « Connexion », « Accueil » et « Profil », alignez-les horizontalement avec un espacement régulier, et vérifiez dans le panneau de droite que chacune affiche bien 375 x 812 pixels.