Et maîtresse de Figma : créer des animations professionnelles de l'UI pour les utilisateurs
Skillademia Academy, Creative Skills for the Future
Regardez ce cours et des milliers d'autres
Regardez ce cours et des milliers d'autres
Leçons de ce cours
-
-
1.
: ce que vous allez construire.
1:51
-
2.
Qu'est-ce que Figma Motion ?
3:33
-
3.
Comment le mouvement s'intègre dans le flux de travail de la conception
5:23
-
4.
: vous naviguer dans l’interface et configurer le fichier de projet.
8:14
-
5.
Concevoir les composants de l'interface
8:27
-
6.
Organiser des couches pour l'animation
3:28
-
7.
Créer votre première animation
3:41
-
8.
Animer la position, l'échelle et l'opacité
5:10
-
9.
Le rythme, la durée et l'accélération
9:46
-
10.
Séquencer plusieurs éléments
9:06
-
11.
Organiser le calendrier
8:38
-
12.
Animations en boucle
8:39
-
13.
Utiliser des cadres-clés
8:19
-
14.
Erreurs courantes de conception d'animation
8:01
-
15.
Exporter en tant que GIF, MP4, WebM et SVG
9:09
-
16.
Animer un cercle de chargement
11:34
-
17.
Avancé : Animer une fenêtre de progression
23:39
-
18.
Projet de cours : créez votre propre interface utilisateur animée
1:29
-
19.
Félicitations ! Et ensuite ?
1:19
-
-
- --
- Niveau débutant
- Niveau intermédiaire
- Niveau avancé
- Tous niveaux
Généré par la communauté
Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.
--
apprenants
--
À propos de ce cours
Une bonne conception d'interface ne concerne pas seulement l'apparence d'un produit, mais aussi la façon dont il se déplace.
Un mouvement réfléchi peut guider l'attention, communiquer les changements, fournir un retour d'information et donner aux produits numériques un aspect plus soigné et intuitif. Dans ce cours, vous apprendrez à donner vie à des interfaces statiques à l’aide de Figma Motion et à développer des compétences en animation pratiques spécifiquement pour la conception UI et UX.
Nous commencerons par explorer ce qu'est Figma Motion et la place qu'occupe l'animation dans un flux de travail de conception professionnelle. Vous apprendrez à naviguer dans l'interface, à configurer votre projet correctement et à préparer les composants et les calques de l'interface utilisateur avant de commencer à animer.
À partir de là, vous créerez votre première animation et apprendrez les principes de base du mouvement d'interface. Nous travaillerons la position, l'échelle et l'opacité avant d'aborder le minutage, la durée et l'assouplissement, ces détails qui peuvent faire la différence entre une animation mécanique et une animation fluide et intentionnelle.
Au fur et à mesure de votre développement de vos compétences, vous apprendrez à séquencer plusieurs éléments, à organiser des animations plus complexes sur la ligne de temps, à créer des boucles et à travailler avec des images clés pour un meilleur contrôle de vos mouvements. Nous examinerons également les erreurs courantes de la conception de mouvements et nous discuterons de la manière d'éviter les animations gênantes, incohérentes ou inutilement compliquées.
Vous apprendrez ensuite à exporter vos animations dans des formats pratiques, notamment GIF, MP4, WebM et SVG, pour pouvoir utiliser votre travail dans des prototypes, des portfolios, des présentations, des sites Web et d'autres projets.
Enfin, nous aborderons des exemples plus avancés, notamment un cercle de chargement animé et une fenêtre de progression, avant d'appliquer tout ce que vous avez appris à votre propre projet d'interface utilisateur animée.
À la fin de ce cours, vous comprendrez le flux de travail technique ainsi que les principes de conception qui sous-tendent une animation efficace de l'interface utilisateur, ce qui vous donnera les compétences nécessaires pour transformer des interfaces statiques en expériences soignées et engageantes.
Ce que vous apprendrez
- Comprendre Figma Motion et son rôle dans la conception UI/UX
- Intégrer le mouvement dans un flux de travail de conception professionnelle
- Configurer correctement les fichiers de projet Figma Motion
- Préparer les composants de l'interface pour l'animation
- Organiser les couches pour une animation efficace
- Créer votre première animation d'interface utilisateur
- Animer la position, l'échelle et l'opacité
- Contrôler la synchronisation et la durée de l'animation
- Dans l'animation pour créer un mouvement plus naturel ?
- Le séquençage de plusieurs éléments animés
- des animations complexes, toutes en plus, sur la ligne de temps.
- Créer des animations en boucle
- Travailler avec les images-clés
- Identifier et éviter les erreurs courantes de conception de mouvements
- Exporter des animations aux formats GIF, MP4, WebM et SVG
- Créer des indicateurs de chargement animés
- Créer des animations de progression plus avancées
- Concevoir et animer votre propre expérience d'interface utilisateur
Exigences
- Une connaissance de base de Figma
- Un compte Figma
- Accès aux outils utilisés dans le cours pour Figma Motion
- Un ordinateur avec une connexion Internet
- Aucune expérience préalable en conception ou en animation n'est requise.
À QUI S'ADRESSE CE COURS
- Les concepteurs d'interface utilisateur et d'UX qui souhaitent ajouter du mouvement à leur éventail de compétences.
- Les utilisateurs de Figma sont prêts à aller au-delà de la conception d'interfaces statiques
- Les concepteurs de produits intéressés par les expériences interactives
- Concepteurs de sites Web et d'applications
- Pour les débutants en conception d'animation intéressés par l'animation des interfaces utilisateur
- Créateurs indépendants cherchant à étendre leurs services
- Aux concepteurs qui souhaitent concevoir des projets de portfolio plus intéressants
Rencontrez votre enseignant·e
NEW CLASS: Figma Motion Masterclass: Create Professional UI Animations
A great interface shouldn't just look good. It should feel good to use.
Our new Figma Motion class is all about taking your static UI designs and bringing them to life with purposeful, professional animation.
You'll learn how to animate position, scale, and opacity, work with timing and easing, sequence multiple elements, use keyframes, build loops, and organize your animation timeline.
We'll also create practical UI animations like loading indicators and progress states before you design and animate an interface of your own.
If you already use Figma and want to add motion design to your UI/UX skill set, this class gives y... Voir le profil complet
Projet de cours pratique
Créez votre propre interface utilisateur animée à l'aide des techniques de mouvement couvertes tout au long du cours.
Vous pouvez créer un écran d'application mobile, une section de site Web, un composant de tableau de bord, l'expérience d'intégration, l'état de chargement ou toute autre interface de votre choix.
Vous allez :
- Concevez ou sélectionnez l'interface que vous souhaitez animer
- Préparer et organiser vos couches
- Animer des propriétés telles que la position, l'échelle et l'opacité
- Appliquer un rythme et des atténuations appropriées
- Utilisez des images clés pour contrôler votre animation.
- Séquencer plusieurs éléments le cas échéant
- Affiner votre mouvement pour qu'il semble lisse et intentionnel
- Exporter votre animation terminée
L’objectif n’est pas de créer l’animation la plus compliquée possible. Concentrez-vous plutôt sur l'utilisation du mouvement dans un objectif précis et créez une expérience naturelle et qui favorise l'interface.
Déposez votre animation finie dans la galerie de projets comme vidéo supportée, GIF ou présentation de votre résultat final. Vous pouvez également inclure une courte explication de votre conception et des décisions de mouvement que vous avez prises.
Notes attribuées au cours
Pourquoi s'inscrire à Skillshare ?
Suivez des cours Skillshare Original primés
Chaque cours comprend de courtes leçons et des travaux pratiques
Votre abonnement soutient les enseignants Skillshare
Apprenez, où que vous soyez
Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.
