CATALOGUE Design et Infographie Formation Figma Atelier Figma - Design d'application Conception de la Barre des Heures Déroulante

Conception de la Barre des Heures Déroulante

Creation de la timeline du graphique
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

Création et Paramétrage de la Barre des Heures

Objectifs

À l'issue de cette vidéo, vous serez capable de concevoir et de paramétrer correctement une barre des heures déroulante, en assurant une meilleure usabilité pour les utilisateurs.

Résumé

Cette vidéo vous montre comment créer et paramétrer une barre des heures déroulante en respectant les principes d'usabilité et de design.

Description

Dans cette leçon, nous allons terminer l'écran en nous concentrant sur la création de la barre des heures déroulante. Vous apprendrez à créer un rectangle, à ajuster ses dimensions et son style pour garantir qu'il soit utilisable sur mobile. Nous détaillerons chaque étape, de l'affichage de la grille à la duplication des formes et l'application des styles nécessaires. Nous nous assurerons que chaque élément est bien calibré, et nous montrerons comment ajouter des éléments de texte et les aligner horizontalement. De plus, nous aborderons l'ajout d'une pastille rouge pour indiquer la sélection et l'application de drop shadows pour améliorer la visibilité de la barre. Finalement, la leçon terminera par des ajustements mineurs pour affiner le design avant de vous inviter à passer à la vidéo suivante pour la réalisation d'un composant réutilisable.

Voir plus

Questions fréquentes

Pourquoi est-il important de calibrer le rectangle par rapport à la grille ?
Afin de garantir une disposition cohérente et bien alignée des éléments sur l'interface, ce qui améliore l'usabilité et l'esthétique.
Quelle est la fonction de la pastille rouge dans le design de la barre des heures ?
La pastille rouge sert à indiquer la sélection actuelle sur la barre, améliorant ainsi la visibilité pour l'utilisateur.
Comment l'ajout d'une ‘drop shadow’ améliore-t-elle la barre des heures ?
Une drop shadow ajoute de la profondeur et distingue la barre des autres éléments de l'interface, la rendant plus visible et interactive.

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 !