CATALOGUE Design et Infographie Formation Figma Atelier Figma - Design d'application Finalisation de l'Interface Utilisateur : Partie Basse et Timeline

Finalisation de l'Interface Utilisateur : Partie Basse et Timeline

Creation de la timeline de la carte
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€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
159,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Création et Gestion de la Timeline de Précipitation

Objectifs

Les objectifs de cette vidéo sont :

  • Apprendre à ajouter et à styliser des éléments interactifs dans une interface utilisateur
  • Découvrir comment utiliser des effets d'ombre et des techniques de centrage pour améliorer la lisibilité
  • Comprendre comment manipuler et distribuer des éléments horizontalement

Résumé

Apprenez à structurer la partie basse d'une interface utilisateur, en ajoutant des styles, des effets d'ombre et en distribuant des éléments horizontaux pour manipuler une timeline de précipitation.

Description

Dans cette leçon, nous allons aborder la finalisation de la partie basse d'une interface utilisateur, en y ajoutant une timeline pour manipuler la précipitation. La leçon commence par la création d'un rectangle blanc avec un petit radius de 5 et un effet d'ombre pour le distinguer visuellement. Ensuite, nous centrons une ligne sur la hauteur et la largeur du rectangle, et nous lui appliquons un style gris clair avec une largeur adéquate.

Ensuite, nous ajoutons des ronds interactifs qui permettent de manipuler la timeline. Le premier rond, en bleu foncé, est utilisé pour contrôler le déplacement de la précipitation. Nous utilisons des techniques de centrage et de regroupement pour aligner et distribuer horizontalement ces ronds. Enfin, nous ajoutons des textes représentant les heures en dessous des ronds, ajustant leur taille et leur style pour une meilleure lisibilité. Le tout est regroupé et centré par rapport au rectangle pour assurer un design homogène.

Nous concluons la leçon avec l'ajout de styles typographiques spécifiques, incluant des variantes en gras pour certains textes, et en ajustant finement l'ombre du rectangle pour un rendu optimal.

Voir plus

Questions - réponses

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 1 an
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 an
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!!
stephanehugon
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 !