CATALOGUE Design et Infographie Formation Figma Atelier Figma - Design d'application Concevoir une Application Météo avec Figma : Étude de Cas RainAlert

Concevoir une Application Météo avec Figma : Étude de Cas RainAlert

Présentation de l'application
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Atelier Figma - Design d'application
Revoir le teaser Je m'abonne
4,5
Transcription
159,00€ 95,40€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
159,00€ 95,40€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction à l'Application RainAlert

Objectifs

Les objectifs de cette vidéo sont d'enseigner aux utilisateurs comment :

  • Créer une application de météo avec Figma.
  • Définir et utiliser les styles de couleur et de typographie.
  • Structurer efficacement une charte de styles.
  • Gagner en efficacité et en cohérence dans la conception de design multi-écrans.

Résumé

Découvrez comment utiliser Figma pour concevoir une application de météo, en apprenant à créer des styles de couleur et de typographie pour un design efficace et homogène.

Description

Dans cette leçon, nous nous concentrons sur l'application RainAlert, une application permettant de consulter la météo et de savoir s'il va pleuvoir dans l'heure suivante. Nous avons conçu un écran d'accueil et deux sections distinctes : une partie prévision avec des chiffres et graphiques, et une partie carte en temps réel des précipitations. Cette vidéo montre également comment créer et gérer les styles de couleur et de typographie dans Figma pour gagner du temps lors de la conception d’écrans multiples. L’utilisation de frames dédiées aux styles permet de structurer efficacement votre design systématique avec Figma. Cela inclut la création de styles pour des couleurs et des textes afin d’assurer une cohérence visuelle à travers toutes les interfaces de l’application.

Nous abordons les différentes étapes de définition des couleurs (hexadécimaux) pour des éléments comme le bleu foncé, le bleu clair, le blanc, l’orange, et le rouge, ainsi que l'application des styles de texte avec différentes tailles et polices (black 20, black 30, black 15, roman 15). Chaque style créé est ensuite ajouté à une charte pour être réutilisable facilement. Enfin, nous discuterons comment réutiliser et appliquer ces styles dans les futures phases de la conception de l'application pour optimiser le processus de design.

Voir plus

Questions fréquentes

Quel est le premier écran que nous avons imaginé pour l'application RainAlert?
Le premier écran imaginé pour l'application RainAlert est le 'welcome screen', l'écran d'accueil visible au lancement de l'application sur le téléphone.
Quels types de données sont affichés dans la partie prévision de l'application?
La partie prévision de l'application affiche des chiffres et des graphes relatifs aux prévisions météorologiques.
Pourquoi est-il important de créer des styles de couleur et de typographie en amont dans Figma?
Créer des styles de couleur et de typographie en amont permet d'assurer une cohérence visuelle et de gagner du temps lors de la déclinaison de divers écrans au sein de l'application.

Programme détaillé

8 commentaires
4,5
8 votes
5
4
3
2
1
pa12
Il y a 1 an
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 2 ans
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 2 ans
Bien pour apprendre les bases, mais manque les nouveautés de 2022.
nicolas.dessis
Il y a 2 ans
Merci !
pioupiou06
Il y a 2 ans
Super formation ! très bien expliquée !
pulpozien
Il y a 2 ans
Très bonne formation.
Trop de "du coup" et du coup ça agace mais sinon super
maellechancerelle
Il y a 3 ans
Super formation!!
Millenium
Il y a 3 ans
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 !