Création d'un Welcome Screen avec Figma
Découvrez comment créer un Welcome Screen pour l'application RainAlert en utilisant Figma.
1
Installation de Figma
2
Découverte de l'interface
3
Refonte de l'application météo "Rain Today"






















4
Prototypage de l'app
5
Pour aller plus loin / Bonus







Détails de la leçon
Description de la leçon
Dans cette leçon, vous apprendrez à concevoir le Welcome Screen pour l'application RainAlert en utilisant Figma. Nous verrons comment :
- Créer une nouvelle frame correspondant à un iPhone 11 Pro
- Importer et intégrer des éléments dans cette frame
- Organiser et renommer les calques pour une meilleure gestion
- Créer et utiliser des composants (ou symboles) pour standardiser les éléments réutilisables
- Gérer les alignements, les textes et les couleurs
- Utiliser des repères et des grilles pour une mise en page précise
Nous explorerons les fonctionnalités de Figma pour s'assurer que chaque élément est parfaitement placé et que les composants peuvent être modifiés globalement de manière efficace.
Objectifs de cette leçon
À la fin de cette vidéo, vous serez capable de :
- Créer un Welcome Screen professionnel pour une application
- Utiliser et gérer les frames et calques dans Figma
- Appliquer des composants et symboles réutilisables
- Aligner et organiser correctement les éléments graphiques
Prérequis pour cette leçon
Avant de commencer cette vidéo, il est recommandé d'avoir :
- Une compréhension de base de Figma
- Des compétences élémentaires en design graphique
- Le logiciel Figma installé sur votre ordinateur
Métiers concernés
Ce sujet est pertinent pour les métiers suivants :
- Designer UX/UI : Concevoir des interfaces utilisateur intuitives
- Développeur Front-End : Comprendre les conceptions pour l'implémentation
- Chef de Projet Digital : Gérer et superviser la création d'applications
- Graphiste : Créer des éléments visuels adaptés aux interfaces numériques
Alternatives et ressources
Il existe d'autres outils pour le design d'interfaces utilisateur, tels que :
- Sketch
- Adobe XD
- InVision
- Axure RP
Cependant, Figma offre des avantages uniques pour la collaboration en temps réel et la gestion des composants.
Questions & Réponses
Les éléments principaux du Welcome Screen sont un texte, un logo et une image d'arrière-plan.
Renommer les calques régulièrement aide à s'organiser et à éviter de se perdre parmi les différents éléments.
Pour vérifier qu'une image est bien intégrée à une frame, il faut s'assurer qu'elle apparaît en dessous du calque de la frame dans la liste des calques.
Acheter maintenant
Je m'abonne
Formation ajoutée au panier

Atelier Figma - Design d'application
Formateur expert
Accès sur tous vos appareils
Fichiers de travail téléchargeables