Conception de mouvement avec Figma : Animations, Graphiques en mouvement, UX/UI

Rejoignez notre cours de conception de mouvement pour acquérir l'expertise qui vous distinguera des autres designers, augmentera votre notoriété en tant que créateur élite, et vous permettra de facturer des tarifs premium pour vos compétences.

Nous ne vous suggérons pas de rivaliser pour des offres à 5 $/heure en concevant des logos sur diverses plateformes de freelance.

Après avoir complété ce cours, vous pourrez exiger au moins 10 à 20 fois ce tarif.

Vous apprendrez la conception de mouvement dans une communauté dynamique.

En vous inscrivant dès aujourd'hui, vous aurez accès à notre salle de classe communautaire en ligne exclusive, où vous collaborerez avec des milliers d'étudiants, d'anciens élèves, de mentors, d'assistants et d'instructeurs.

Vous apprendrez de Daniel, un professionnel du design chevronné avec une expérience pratique en tant que designer produit principal pour des entreprises mondiales de premier plan.

Ce cours vous dotera des dernières méthodologies en matière de conception de mouvement, d'interface utilisateur (UI) et d'expérience utilisateur (UX), en mettant l'accent sur des compétences pratiques pour créer des interactions, animations et graphiques en mouvement époustouflants pour vos projets web et applications mobiles.

Nous utiliserons Figma et Figma Smart Animate, les meilleurs outils préférés par les designers modernes, car ils remplacent les options obsolètes comme Adobe After Effects.

De plus, vous recevrez tous les fichiers Figma, des modèles de design premium et des ressources de ce cours à utiliser pour vos futurs projets clients !

Voici ce que vous apprendrez pour devenir un expert en conception de mouvement

Ce programme est pratique. Daniel vous guidera étape par étape, de novice à héros en conception de mouvement, vous permettant de créer vos propres projets éclatants et professionnels.

1. Commencer avec Figma - Découvrez les composants essentiels de Figma et ce dont vous avez besoin pour commencer votre parcours. Nous couvrirons chaque détail pour éliminer toute confusion.

• Commencer avec Figma
• Présentation de Figma
• Tableau de bord Figma
• Outils Figma
• Couches + Pages
• Fonctions de la barre supérieure
• Propriétés de design
• Prototypage dans Figma
• Exercice : Création d'une mise en page réactive

2. Les bases de Figma Smart Animate - Le Smart Animate de Figma est révolutionnaire. Vous apprendrez à ajuster ses différentes propriétés et à appliquer cette compréhension pour créer des prototypes simples.

• Échelle
• Position
• Opacité
• Rotation
• Remplissage
• Exercice : Création d'éléments interactifs
• Exercice : Navigation dans l'animation
• Exercice : Développement d'un prototype plus grand

3. Créer une application d'inspiration photo - Vous commencerez votre premier projet en utilisant les ressources fournies et les concepts appris pour développer votre prototype d'une application mobile d'inspiration photo.

• Conception d'actifs
• Filtrage par catégorie
• Transitions d'écran + Interactivité par glisser-déposer
• Micro-interactions simples

4. Importance du mouvement - Découvrez comment le mouvement’améliore considérablement l’ergonomie des produits, raconte des histoires et soutient les modèles mentaux.

• Malentendus communs sur la conception de mouvement
• Le rôle du mouvement dans l'ergonomie
• Récit & Modèles mentaux

5. Principes de la conception de mouvement - Cette section couvre les principes fondamentaux de la conception de mouvement et leur importance critique pour réussir en design.

• Introduction aux principes de conception de mouvement
• Techniques d'assouplissement
• Décalage & Délai
• Éléments parentés
• Techniques de transformation
• Changements de valeurs
• Techniques de masquage
• Effets de superposition
• Méthodes de clonage
• Techniques d'obscuration
• Effets de parallaxe
• Techniques dimensionnelles
• Effets de Dolly & Zoom

6. Création de mouvement dans Figma - Alliez théorie et pratique en plongeant à nouveau dans Figma pour concevoir des prototypes plus petits. Daniel vous guidera à chaque étape.

• Exercice : Transitions de navigation fluides
• Exercice : Effets de défilement
• Exercice : Mécaniques de pagination
• Exercice : Actions de glisser
• Exercice : Création de micro-interactions
• Exercice : Effets enchanteurs

7. Flux de travail en conception de mouvement - Apprenez à intégrer la conception de mouvement dans le processus de design typique. Daniel décrira son approche pour identifier les stratégies de mouvement optimales pour les besoins des utilisateurs.

• Découverte & Recherche Partie 1
• Découverte & Recherche Partie 2
• Fondamentaux du design & Storyboarding
• Techniques de prototypage
• Protocoles de test
• Astuces utiles

8. Projet : Carrousel National Geographic - Découvrez comment créer des effets de carrousel simples et complexes dans Figma.

• Carrousel de page d'accueil rapide et facile
• Création d'un complexe effet de parallaxe et d'image 3D

9. L'art des micro-interactions - Plongez dans l'importance des micro-interactions. Créez votre propre animation dans Figma avec le plugin Figmotion avec Daniel.

• Comprendre les micro-interactions
• L'importance des micro-interactions
• Figmotion : Partie 1
• Figmotion : Partie 2

10. Projet : Application mobile pour maison intelligente - Alors que la technologie des maisons intelligentes gagne en popularité, apprenez à concevoir un écran d'accueil basique et à l'animer avec Figma. Suivez Daniel alors qu'il illustre une interaction complexe de réglage de température.

• Conception de l'écran d'accueil
• Création d'interactions de bascule
• Techniques de réglage de température

11. Retour d'expérience efficace - Comprenez les meilleures stratégies pour donner et recevoir des retours constructifs sur vos designs.

• L'importance des retours de design
• Offrir un retour constructif sur le design

12. Projet : Page d'accueil de rénovation de maison - Avez-vous toujours voulu concevoir une page d'accueil engageante avec des éléments animés ? Voici votre opportunité. Rejoignez Daniel qui vous guide à travers la déconstruction d'une page d'accueil en plusieurs prototypes.

• Conception de la page d'accueil
• Prototypage de la page d'accueil
• Effets de parallaxe : Partie 1
• Conception de carrousel
• Effets de parallaxe : Partie 2
• Conception de galerie

13. Projet : Formulaire de rénovation de maison - Les formulaires sont souvent négligés, mais appliquer le mouvement peut grandement aider les utilisateurs dans des tâches essentielles. Daniel vous montrera comment incorporer des animations subtiles dans les interactions de formulaire pour une meilleure utilisabilité.

• Incorporation du mouvement dans les éléments de formulaire
• Dynamique de progression du formulaire
• Animation du contenu de formulaire
• Entrées & Boutons : Partie 1
• Entrées & Boutons : Partie 2
• Entrées & Boutons : Partie 3
• Entrées & Boutons : Partie 4
• Amélioration avec des infobulles
• Entrées de carrousel

14. Projet : Application mobile de livraison de nourriture - Maîtrisez comment créer des interactions accrocheuses à l'aide de techniques de masquage, suivies par la création d'un prototype complexe de progression de commande alors que Daniel vous guide à travers.

• Introduction au projet
• Utiliser le parallaxe pour attirer l'attention
• Transitions dans les listes
• Techniques de superposition alternatives
• Techniques de masquage et de superposition
• Micro-interactions et boutons d'action flottants
• Progression de la commande : Partie 1
• Progression de la commande : Partie 2

15. Présenter votre travail - Vous avez développé divers prototypes, mais comment les présenter dans votre portfolio ? Nous explorerons plusieurs options d'enregistrement pour Mac et Windows afin de présenter vos prototypes dans votre format préféré.

• Utiliser Kap pour Mac
• Directives d’utilisation de Kap
• Intégrer des GIFs Kap dans Figma
• Screenity pour Chrome & Windows
• Directives d’utilisation de Screenity
• Intégrer des GIFs Screenity dans Figma

Quelle est la conclusion finale ?

Ce cours n'est pas simplement regarder passivement des vidéos tutorielles.

Nous vous encourageons à passer d'un novice complet en conception de mouvement à quelqu'un considéré parmi les 10 % supérieurs des concepteurs de mouvement 💪.

Comment pouvons-nous être si confiants ?

Des milliers de diplômés de Zero To Mastery ont obtenu des emplois chez des leaders de l'industrie comme Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, Shopify, et plus encore.

Ils réussissent en tant que meilleurs freelances et profitent d'opportunités à distance à travers le monde.

Peu importe votre âge, origine, ou expérience—beaucoup de nos étudiants ont commencé en tant que nouveaux venus.

Vous pouvez en faire partie aussi.

Il n'y a rien à perdre ; commencez à apprendre aujourd'hui, et si notre cours ne répond pas à vos attentes, vous pouvez demander un remboursement complet dans les 30 jours. Sans tracas, sans questions posées.