FIGMA : du Prototypage à l’Animation
Objectifs de la formation : Maîtriser les Outils Fondamentaux de Figma : Permettre aux participants de comprendre et d’utiliser efficacement […]
Description du cours
Objectifs de la formation :
Créer et Gérer des Composants Réutilisables : Former les apprenants à concevoir des composants, créer des variants, et gérer les instances pour maintenir la cohérence et l’efficacité dans leurs projets.
Appliquer des Techniques Avancées de Mise en Page : Enseigner l’utilisation d’Auto Layout, des grilles, et des contraintes pour créer des mises en page dynamiques et responsives.
Concevoir des Prototypes Interactifs : Apprendre aux participants à créer des prototypes animés et interactifs pour simuler l’expérience utilisateur et tester les concepts de design.
Maîtriser la Gestion des Styles : Développer la capacité des apprenants à créer et gérer des styles de texte et de couleur pour garantir la cohérence visuelle dans tous leurs projets.
Exporter des Designs de Manière Optimale : Former les participants à exporter leurs projets dans différents formats et résolutions, en fonction des besoins spécifiques du web, du mobile, ou du print.
Développer des Compétences en Animation : Enseigner aux apprenants comment créer des animations de base et des effets de scroll pour enrichir l’interaction et l’engagement des utilisateurs dans leurs designs.
Les points forts de la formation :
Pratique Guidée : Chaque chapitre est accompagné d’exercices pratiques et de corrections détaillées pour renforcer l’apprentissage par la pratique.
Focus sur les Composants : La formation met un fort accent sur l’utilisation des composants et des variants, éléments essentiels pour créer des designs réutilisables et cohérents.
Prototypage Interactif : Les participants apprennent à créer des prototypes interactifs et animés, essentiels pour la présentation et la validation des concepts de design.
Outils Avancés : La formation couvre des outils avancés comme Auto Layout, Boolean Tools, et les styles de texte et de couleur, qui permettent de créer des designs sophistiqués et flexibles.
Techniques d’Alignement Précis : Une attention particulière est portée à l’alignement, aux grilles, et au magnétisme pour garantir des mises en page professionnelles et structurées.
Gestion des Couleurs et du Texte : Les apprenants découvrent comment utiliser et créer des styles de couleur et de texte pour assurer la cohérence et la rapidité d’exécution dans leurs projets.
Création de Boutons Dynamiques : La formation inclut des modules spécifiques pour créer des boutons interactifs, animés, et réactifs, enrichissant l’expérience utilisateur.
Exportation Optimisée : Les apprenants apprennent à exporter leurs designs efficacement, en tenant compte des différents formats et résolutions requis pour le web, les applications, et le print.
Contenu de la formation :
- Videos pour vous apprendre la manipulation des outils
- Quiz pour valider vos acquis
- Ateliers Créatifs pour mettre en situation vos connaissances et les outils appris
Programme de formation :
1- Bien commencer votre formation
- Présentation du cours
- Créer votre compte FIGMA
- Se connecter avec son compte
- Présentation de l’interface Draft
2- Les outils de bases
- Créer vos premières frames
- Faire un rectangle
- Plus d’option du rectangle
- Les autres formes
- Comment sélectionner des éléments
- Importer une image
- Mettre de la couleur
- Exercice – Logo Figma
- Correction de l’exercice
- Outils plume et pencil
- Exercice Plume – énoncé
- Exercice – Plume – Solution
- Bien utiliser le texte
- Plus d’option de texte
- Exercice Figma – Enoncé
- Exercice Figma – Solution
- Grouper et mise a l’échelle
- Le mode masque
- Booelan tools
- Les dégradés
- Les contours
- Les effets
- Alignement avec les repères et magnétisme
- Alignement plus d’option
- Exercice alignement et autres
- Exercice alignement – Correction
- Export
3- QUIZ « Les outils de bases »
4- Outils plus avancés
- Utiliser les règles
- Les grilles
- Les contraintes
- Les styles de couleurs
- Les styles de texte
5- Auto Layout
- La théorie de l’auto Layout
- Créer un simple bouton
- Fenêtre flottant
- A vous de jouer
- Correction de la Card Instagram
6- QUIZ « Outils avancés » + « Autolayout »
7- Les composants
- Créer un bouton avec les composants
- Créer des variants
- Afficher ou non les icônes
- Instance Swap
- Propriété Text
8- Prototypage et animations
- Prototypage de base
- Présentation de l’exercice Prototypage
- Correction de l’exercice
- Les animations de base
- Animation type slide
- Les actions
- Creer un effet de scroll
9- QUIZ « Composants » + « Prototype »
10- Création de boutons
- Bouton survol
- Bouton avec fond animé
- Bouton switch
- Bouton like
- Bouton burger
11- Atelier Créatif – Nike
- Présentation Atelier Nike
- Création du dégradé de fond
- Mettre en place la basket et le titre NIKE
- Création du logo Nike
- Création du menu
- Ecriture colonne de gauche
- Footer avec les couleurs
12- Atelier Créatif – Nike Intéractif
- Présentation de l’interaction Nike
- Interface Editeur de la création
- Création de la frame basket
- Création de la frame TITRE
- Création de la frame Green – Placement des éléments
- Création de l ‘animation
- Création de la Frame BLUE
- Autre animation possible