Vous avez du mal à organiser vos images et niveaux dans vos designs mobiles.
Cela peut entraîner un manque de précision et un design peu professionnel.
Découvrez comment l’utilisation des masques dans Figma peut résoudre ces problèmes et améliorer vos designs.
Perfectionnez vos designs pour une expérience fluide sur Web et Mobile avec Figma
Pour cette avant-dernière page, comme d’habitude on se repère avec le wireframe et on commence par copier les textes dans notre frame.
Puis pour le bouton REJOINDRE, vous pouvez le récupérer dans les Assets dans la section mobile que nous avons créée.
Maintenant, arrêtez-vous ! Ne pensez surtout pas à juste copier et redimensionner l’image contenant les différents niveaux pour les aligner verticalement. Certes, c’est une méthode comme une autre, mais vous aurez moins de précision et ce n’est pas très recommandé.
Vous allez dans cet article apprendre à utiliser les masques pour résoudre notre problème.
C’est comme placer une photo dans un cadre pour n’afficher qu’une partie de la photo. Maintenant que vous savez c’est quoi un masque et à quoi ça sert, nous allons apprendre comment en créer directement avec notre projet.
Commençons par prendre le fond noir qu’on a créé sur le Niveau 5 que nous utiliserons en guise de cadre.
Copiez ensuite la photo et mettez-le au-dessus du cadre noir, il est très important de le mettre au-dessus du cadre.
Sélectionnez ensuite les deux éléments et cliquer sur Use a mask .
Vous pouvez redimensionner la taille du cadre afin qu’il s’adapte aux dimensions des niveaux et ajuster aussi l’emplacement de la photo.
Voilà ! vous avez créé votre premier masque dans Figma, vous voulez voir maintenant son utilité ? Dupliquer le masque que nous venons de créer et déplacer l’emplacement de la photo à l’intérieur du cadre pour pouvoir afficher le prochain niveau.
Faites de même pour les Niveaux 3 et 4.
Voilà la magie des masques !! On redescend maintenant un peu sur terre pour le dernier niveau en copiant celui de la version web.
- Designer le footer
Pour la dernière partie de ce chapitre, nous allons designer la page footer mobile en commençant par placer un fond noir comme celui de la version web.
Puis copier le titre et le texte et référer vous sur le wireframe pour la taille des polices.
Ajouter ensuite les logos à leurs tours.
Et terminer avec les boutons du footer mobile que vous pouvez récupérer dans les Assets.
Pour terminer, diminuez la longueur du frame si elle dépasse les contenus de la page footer. Mais attention à vérifier les constraints des éléments.
Ça sera tout pour le design de notre projet sur la version mobile, nous avons allégé le travail en copiant les éléments qu’on a déjà précédemment créés et en utilisant un masque. Dans le prochain chapitre, nous allons donner vie à tout cela pour que notre design soit interactif.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment créer un masque dans Figma ?
Pourquoi utiliser des masques dans Figma ?
Comment aligner les éléments verticalement dans Figma ?
Quelles sont les étapes pour designer un footer mobile ?
Comment rendre un design interactif après le design mobile ?
Conclusion
En maîtrisant l’utilisation des masques dans Figma, vous pouvez transformer vos designs mobiles avec précision et créativité. Quel sera votre prochain projet à intégrer cette technique ?
