CATALOGUE Design et Infographie Formation Figma Atelier Figma - Design d'application Création d'un Welcome Screen avec Figma

Création d'un Welcome Screen avec Figma

Création des layers et de l'écrans Welcome

Vidéo non disponible ! Réessayez plus tard

3h 8min

42 leçons

4,5

Transcription

159,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

DescriptionProgrammeAvis

3h 8min

42 leçons

4,5

159,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

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

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é

Accueil de la formation

Module 1 - Installation de Figma

Présentation de Figma 01:16

L'installation de Figma - Online & desktop 00:35

Accueil de Figma 04:21

Création d'un document 00:36

Module 2 - Découverte de l'interface

Menu et interface Figma 00:43

Barre d'outils 15:08

Menu layers & assets 06:00

Menu design & prototype - Les grands principes 02:14

Menu design & prototype - Démonstration de chaque feature 10:27

Module 3 - Refonte de l'application météo "Rain Today"

Présentation de l'application 12:03

Création des layers et de l'écrans Welcome 14:30

Du wireframe au design d'interface UI 01:56

Les goutières et les colonnes 02:07

Fond en dégradé 02:24

Elements et composants externes 03:14

Position des éléments de structure et application des styles 10:03

Créer une ombre 03:09

Element de base du graphique 05:57

Positionnement des axes 02:42

Courbe dégradée 10:11

Creation de la timeline du graphique 04:09

Barre de navigation 05:54

Cloner d'un écran 04:00

Utilisation du masque et création de la carte 03:42

Pictogramme de la carte 03:52

Creation de la timeline de la carte 06:44

Zone de précipitation 05:22

Ecran de recherche 03:00

Fonctionnalité des listes 04:47

Dupplication et intégration d'un composant externe 02:48

Export d'éléments d'un projet Figma 02:09

Module 4 - Prototypage de l'app

Introduction au prototypage et 1ère animation 04:20

Prototypage des écrans et test 05:54

Autres animations & conseils 02:27

Partage de prototypes 00:37

Module 5 - Pour aller plus loin / Bonus

Faire évoluer votre designs dans le temps - passage en dark mode 02:54

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

pa12

Il y a 1 year

Commentaire

Je viens de débuter la formation mais quel dommage de ne pas avoir le fichier de travail avec... Une grosse perte de temps pour les images, les icones...etc. Pouvez-vous svp ajouter ce fichier à télécharger?

jc.mosca

Il y a 1 year

Commentaire

Comme dit plus haut, mise à part les centaines de "du coup" et "en fait" plutôt agaçants, c'est comme d'habitude chez Elephorm une formation enrichissante. J'ai mis seulement 4 étoiles car il manque la démonstration des overlays, des contraintes, des listes à puces et pas mal d'autres. Ce serait bien qu'Elephorm fasse des mises à jour de ses formations.

ousmane.ndia

Il y a 1 year

Commentaire

Bien pour apprendre les bases, mais manque les nouveautés de 2022.

nicolas.dessis

Il y a 1 year

Commentaire

Merci !

pioupiou06

Il y a 2 years

Commentaire

Super formation ! très bien expliquée !

pulpozien

Il y a 2 years

Commentaire

Très bonne formation.
Trop de "du coup" et du coup ça agace mais sinon super

maellechancerelle

Il y a 3 years

Commentaire

Super formation!!

stephanehugon

Il y a 3 years

Commentaire

Cette formation est vraiment au top ! Je ne connaissais rien de Figma (étant "seulement" développeur à la base) et j'ai appris beaucoup de choses, je recommande donc cette formation; le formateur est très sympathique et professionnel dans sa pédagogie, c'est très agréable à suivre. Je recommande par contre d'avoir au moins deux écrans (voir trois) pour suivre la vidéo et pratiquer/prendre des notes en même temps.

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 !