HELLAPAYE

FIGMA : du Prototypage à l'Animation

E- learning

Si aucune session n'est programmée ou si vous désirez une formation en INTRA, vous pouvez nous faire part de votre besoin en cliquant sur le bouton ci-dessous.

DEMANDE DE DEVIS

OBJECTIFS, APTITUDES ET COMPÉTENCES

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

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

MÉTHODES MOBILISÉES (MOYENS PÉDAGOGIQUES ET TECHNIQUES)

Apprentissage Progressif : La formation est conçue pour accompagner les apprenants du niveau débutant aux techniques avancées, permettant une maîtrise complète de Figma.

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.

MODALITES D'ÉVALUATIONS DES ACQUIS

Quiz 

PUBLIC CONCERNÉ

Tout public qui chercher à ce former sur l'animation 

PRÉREQUIS

Aucun

SANCTIONS VISÉES

Aucune 

NATURE DE LA FORMATION

Actions de formation

SPECIALITÉ

Non renseigné