FIGMA : du Prototypage à l'Animation
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO FIGMA : du Prototypage à l'Animation

Romain Duclos
24,99€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Voici une formation complète à Figma, logiciel d'UX et UI Design qui vous permettra de créer vos prototypes et webdesign de sites Internet et d'applications web ou mobiles. La formation vous accompagne dans l'acquisition des compétences, de la phase de prototypage à l'animation de vos interfaces et leur export.

Au programme de cette formation FIGMA : du Prototypage à l'Animation

  • 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.

Je reste disponible pour répondre à toutes vos questions ! 
Bonne formation !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Présentation Figma
Chapitre 2
Les outils de bases
Chapitre 3
Outils plus avancés
Chapitre 4
Auto Layout
Chapitre 5
Les composants
Chapitre 6
Prototypage et animation
Chapitre 7
Creation de boutons

Plan détaillé du cours

Chapitre 1 : Présentation Figma
09m17
 
Leçon 101-presentation-du-cours.
Leçon 202-creer-votre-compte.
Leçon 303-se-connecter-avec-son-compte.
Leçon 404-presentation-de-l-interface-draft.
Chapitre 2 : Les outils de bases
1h22
 
Leçon 101-creer-vos-premieres-frames.
Leçon 202-faire-un-rectangle
Leçon 303-plus-d-option-du-rectangle.
Leçon 404-les-autres-formes.
Leçon 505-comment-selectionner-des-elements.
Leçon 606-importer-une-image.
Leçon 707-mettre-de-la-couleur.
Leçon 808-exercice-logo-figma.
Leçon 909-correction-de-l-exercice.
Leçon 1010-outils-plume-et-pencil.
Leçon 1111-exercice-plume-enonce.
Leçon 1212-exercice-plume-solution.
Leçon 1313-bien-utiliser-le-texte.
Leçon 1414-plus-d-option-de-texte.
Leçon 1515-exercice-figma-enonce.
Leçon 1616-exercice-firma-solution.
Leçon 1717-grouper-et-mise-a-l-echelle.
Leçon 1818-le-mode-masque.
Leçon 1919-booelan-tools.
Leçon 2020-les-degrades.
Leçon 2121-les-contours.
Leçon 2222-les-effets.
Leçon 2323-alignement-avec-les-reperes-et-magnetisme.
Leçon 2424-alignement-plus-d-option.
Leçon 2525-exercice-alignement-et-autres.
Leçon 2626-exercice-alignement-correction.
Leçon 2727-export.
Chapitre 3 : Outils plus avancés
16m13
 
Leçon 101-utiliser-les-regles.
Leçon 202-les-grilles.
Leçon 303-les-contraintes.
Leçon 404-les-styles-de-couleurs.
Leçon 505-style-de-texte.
Chapitre 4 : Auto Layout
17m20
 
Leçon 101-la-theorie-de-l-auto-layout.
Leçon 202-creer-un-simple-bouton.
Leçon 303-fenetre-flottante.
Leçon 404-a-vous-de-jouer.
Leçon 505-correction-de-la-card-instagram.
Chapitre 5 : Les composants
16m39
 
Leçon 101-creer-un-bouton-avec-les-composants.
Leçon 202-creer-des-variants.
Leçon 303-afficher-ou-non-les-icones.
Leçon 404-instance-swap.
Leçon 505-propriete-text.
Chapitre 6 : Prototypage et animation
21m32
 
Leçon 101-prototypage-de-base.
Leçon 202-presentation-de-l-exercice-prototypage.
Leçon 303-correction-de-l-exercice
Leçon 404-les-animations-de-base.
Leçon 505-animation-type-slide.
Leçon 606-les-actions.
Leçon 707-creer-un-effet-de-scroll.
Chapitre 7 : Creation de boutons
23m13
 
Leçon 101-bouton-survol.
Leçon 202-bouton-avec-fond-anime.
Leçon 303-bouton-switch.
Leçon 404-bouton-like.
Leçon 505-bouton-burger.
Chapitre 8 : Atelier NIKE
21m30
 
Leçon 101-presentation-atelier-nike.
Leçon 202-creation-du-degrade-de-fond.
Leçon 303-mettre-en-place-la-basket-et-le-titre-nike.
Leçon 404-creation-du-logo-nike.
Leçon 505-creation-du-menu.
Leçon 606-ecriture-colonne-de-gauche.
Leçon 707-footer-avec-les-couleurs.
Chapitre 9 : Nike Interaction
17m53
 
Leçon 101-presentation-de-l-interaction-nike.
Leçon 202-interface-editeur-de-la-creation.
Leçon 303-creation-de-la-frame-basket.
Leçon 404-creation-de-la-frame-titre.
Leçon 505-creation-de-la-frame-green-placement-des-elements.
Leçon 606-creation-de-l-animation.
Leçon 707-creation-de-la-frame-blue.
Leçon 808-autre-animation-possible.
Chapitre 10 : Design system - Plugin
41m39
 
Leçon 101-design-system-c-est-quoi.
Leçon 202-exemple-de-design-system.
Leçon 303-figma-community.
Leçon 404-les-plugins.
Leçon 505-presentation-de-notre-design-system.
Leçon 606-definir-le-texte.m
Leçon 707-definir-les-couleurs.
Leçon 808-les-icones.
Leçon 909-creer-les-styles-de-texte.
Leçon 1010-pourquoi-utiliser-les-styles-de-texte.
Leçon 1111-editer-les-couleurs.
Leçon 1212-transformer-les-icones-en-composant.
Leçon 1313-creer-la-propriete-instance-swap.
Leçon 1414-creation-du-bouton-ajout-titre.
Chapitre 11 : 11-Atelier Creatif - Application Music
39m24
 
Leçon 101-presentation-de-l-application.
Leçon 202-creation-des-covers.
Leçon 303-crer-les-proprietes-titre-et-sous-titre.
Leçon 404-creation-des-boutons-de-la-cover.
Leçon 505-mise-en-place-des-photos.
Leçon 606-ajouter-le-scroll-vertical.
Leçon 707-mettre-les-noms-des-artistes.
Leçon 808-comment-l-ecran-lecture.
Leçon 909-mettre-les-icones.
Leçon 1010-creation-des-premiers-elements-de-la-frame-3.
Leçon 1111-les-derniers-elements.
Leçon 1212-creation-de-la-barre-player.
Leçon 1313-ajouter-l-effet-scroll-et-sticky.
Leçon 1414-mise-en-place-du-prototypage.

Aperçus

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Payer plus tard

Prix d'achat : 24,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1437 tutos gratuits

Notre politique de protection des données