FIGMA : du Prototypage à l’Animation

Objectifs

Maîtriser les Outils Fondamentaux de Figma : Permettre aux participants de comprendre et d’utiliser efficacement les outils de base, comme les frames, les formes, et les outils de sélection.

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.

Programme de la formation

1- Bien commencer votre formation

1. Présentation du cours
2. Créer votre compte FIGMA
3. Se connecter avec son compte
4. Présentation de l’interface Draft

2- Les outils de bases

1. Créer vos premières frames
2. Faire un rectangle
3. Plus d’option du rectangle
4. Les autres formes
5. Comment sélectionner des éléments
6. Importer une image
7. Mettre de la couleur
8. Exercice – Logo Figma
9. Correction de l’exercice
10. Outils plume et pencil
11. Exercice Plume – énoncé
12. Exercice – Plume – Solution
13. Bien utiliser le texte
14. Plus d’option de texte
15. Exercice Figma – Enoncé
16. Exercice Figma – Solution
17. Grouper et mise a l’échelle
18. Le mode masque
19. Booelan tools
20. Les dégradés
21. Les contours
22. Les effets
23. Alignement avec les repères et magnétisme
24. Alignement plus d’option
25. Exercice alignement et autres
26. Exercice alignement – Correction
27. Export

3- QUIZ « Les outils de bases »

 

4- Outils plus avancés

1. Utiliser les règles
2. Les grilles
3. Les contraintes
4. Les styles de couleurs
5. Les styles de texte

5- Auto Layout

1. La théorie de l’auto Layout
2. Créer un simple bouton
3. Fenêtre flottant
4. A vous de jouer
5. Correction de la Card Instagram

6- QUIZ « Outils avancés » + « Autolayout »

 

7- Les composants

1. Créer un bouton avec les composants
2. Créer des variants
3. Afficher ou non les icônes
4. Instance Swap
5. Propriété Text

8- Prototypage et animations

1. Prototypage de base
2. Présentation de l’exercice Prototypage
3. Correction de l’exercice
4. Les animations de base
5. Animation type slide
6. Les actions
7. Creer un effet de scroll

9- QUIZ « Composants » + « Prototype »

 

10- Création de boutons

1. Bouton survol
2. Bouton avec fond animé
3. Bouton switch
4. Bouton like
5. Bouton burger

11- Atelier Créatif – Nike

 

1. Présentation Atelier Nike
2. Création du dégradé de fond
3. Mettre en place la basket et le titre NIKE
4. Création du logo Nike
5. Création du menu
6. Ecriture colonne de gauche
7. Footer avec les couleurs

12- Atelier Créatif – Nike Intéractif

 

1. Présentation de l’interaction Nike
2. Interface Editeur de la création
3. Création de la frame basket
4. Création de la frame TITRE
5. Création de la frame Green – Placement des éléments
6. Création de l ‘animation
7. Création de la Frame BLUE
8. Autre animation possible

Modalités d’évaluation des acquis

Quiz 

Public concerné

Tout public qui chercher à ce former sur l’animation 

Prérequis

Aucune