Installation de Figma
Découverte de l'interface
Refonte de l'application météo "Rain Today"
Prototypage de l'app
Pour aller plus loin / Bonus
Détails de la leçon
Description de la leçon
Dans cette vidéo, nous nous intéressons à la partie structurelle de notre listing de recherche sur Figma. Vous apprendrez à créer un fond blanc et des boutons de commande pour annuler ou activer une recherche. Nous commencerons par dupliquer un écran existant, puis le renommer et ajuster les styles des éléments. Par exemple, vous verrez comment appliquer un style noir à une loupe ou ajuster les styles des curseurs de géolocalisation.
Ensuite, nous créerons deux boutons, l'un pour annuler la recherche et l'autre pour l'activer. Ces boutons seront agrémentés de couleurs spécifiques pour les différencier facilement : bleu foncé pour le bouton d'annulation et bleu clair pour le bouton d'activation. Vous apprendrez aussi à aligner et centrer ces boutons correctement par rapport à votre fenêtre de recherche.
Tout au long de cette leçon, vous découvrirez les fonctionnalités avancées de Figma qui vous permettront de gagner du temps lors de la création de vos interfaces. Enfin, dans la vidéo suivante, nous nous concentrerons sur le listing des résultats de recherche, en explorant davantage de fonctionnalités pour optimiser vos processus de travail. Cette vidéo est essentielle pour quiconque souhaite améliorer ses compétences en design UI sur Figma.
Objectifs de cette leçon
Les objectifs de cette vidéo sont de :
- Maîtriser la structure d'une interface de recherche sur Figma.
- Apprendre à créer et personnaliser des boutons de commande.
- Découvrir des fonctionnalités avancées pour optimiser votre workflow.
Prérequis pour cette leçon
Pour suivre cette vidéo, il est recommandé d'avoir :
- Des notions de base en design UI/UX.
- Une connaissance des fondamentaux de Figma.
Métiers concernés
Les professionnels utilisant ces techniques peuvent inclure :
- Designer UI/UX
- Développeur Front-end
- Chef de projet digital
Alternatives et ressources
En alternative à Figma, vous pouvez utiliser des logiciels tels que Sketch, Adobe XD, ou InVision Studio.
Questions & Réponses
Je m'abonne