CATALOGUE
Design et Infographie
Formation
Figma
Atelier Figma - Design d'application
Création d'un Welcome Screen avec Figma
DescriptionProgrammeAvis
Introduction à la création d'un Welcome Screen
Objectifs
À 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
Résumé
Découvrez comment créer un Welcome Screen pour l'application RainAlert en utilisant Figma.
Description
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.
Questions - réponses
Questions réponses
Quels sont les éléments principaux du Welcome Screen dans cette leçon ?
Les éléments principaux du Welcome Screen sont un texte, un logo et une image d'arrière-plan.
Pourquoi est-il important de renommer les calques dans Figma ?
Renommer les calques régulièrement aide à s'organiser et à éviter de se perdre parmi les différents éléments.
Comment peut-on vérifier qu'une image est bien intégrée à une frame dans Figma ?
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.
Programme détaillé
Module 1 - Installation de Figma
Module 2 - Découverte de l'interface
Module 3 - Refonte de l'application météo "Rain Today"
Fond en dégradé
02:24
Créer une ombre
03:09
Positionnement des axes
02:42
Courbe dégradée
10:11
Barre de navigation
05:54
Cloner d'un écran
04:00
Pictogramme de la carte
03:52
Zone de précipitation
05:22
Ecran de recherche
03:00
Module 4 - Prototypage de l'app
Module 5 - Pour aller plus loin / Bonus
Plug in Morph
02:25
Glass effect
03:54
Neumorphism
03:25
Content Reel
02:44
Mapsicle
01:50
Brandfetch
01:47
8 commentaires
4,5
8 votes
5
4
3
2
1
Trop de "du coup" et du coup ça agace mais sinon super
Seul bémol par contre, pitié Elephorm, mettez les fichiers de travail avec la formation... (Ce n'est pas la seule sur laquelle il manque les fichiers d'ailleurs); mais mettez-les, ça évite d'aller chercher à droite et à gauche des SVG que l'on doit convertir, des images, etc...
A part ça, super formation !