Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

Formation complète Figma : design, prototypage et IA Figma Make

44,50€
klarna-condensed
3 paiements de 14,83€ avec Klarna. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Cette formation couvre l'intégralité de l'écosystème Figma, du design d'interface jusqu'à la génération assistée par IA.
Figma n'est plus seulement un outil de maquettage : c'est devenu un hub réunissant le design, le dessin vectoriel avec Draw, le prototypage, le Dev Mode, la collaboration avec FigJam, la création de présentations avec Slides, les visuels sociaux avec Buzz, et désormais la création par intelligence artificielle avec Figma Make.

Vous partez des fondamentaux de l'interface pour aller progressivement vers les usages les plus avancés, à travers des chapitres théoriques et de nombreux exercices pratiques. Le cours est régulièrement enrichi de nouveaux chapitres, sans surcoût : la dernière mise à jour ajoute un module complet dédié à Figma Make et à ses limites réelles.

Un QCM valide vos compétences en fin de parcours, et une section entraide reste ouverte pour vos questions tout au long de la formation.

Ce que vous allez apprendre

  • Prendre en main l'interface UI3 de Figma, ses menus et ses préférences, en ligne comme hors ligne
  • Concevoir avec les outils de design et de dessin : formes, plume, dégradés, masques, auto layout, composants et variables
  • Créer wireframes et maquettes en appliquant la logique de l'atomic design
  • Construire des prototypes interactifs : triggers, actions, animations et lissage de vitesse
  • Exploiter Figma Draw pour l'illustration vectorielle et Dev Mode pour le passage au développement
  • Utiliser tout le hub : FigJam pour le collaboratif, Slides pour les présentations, Buzz pour les réseaux sociaux
  • Générer interfaces et composants avec Figma Make, et surtout comprendre où l'IA s'arrête

Une formation qui couvre tout le hub Figma

Figma a changé de nature. D'un éditeur de maquettes collaboratif, il est devenu une suite complète qui accompagne toute la chaîne de création web et produit. Cette formation suit cette logique : elle ne se limite pas au design d'interface, mais vous fait traverser l'ensemble des outils que Figma intègre aujourd'hui dans une seule plateforme.

Vous démarrez par les fondamentaux, l'interface et les menus, puis vous montez en compétence outil par outil. Chaque notion théorique est suivie d'exercices concrets : polyscape, effet de parallaxe, boutons, cards, formulaires, interfaces complètes, logos en mode Draw. Cette approche progressive du plus simple au plus complexe convient au débutant qui découvre Figma comme à l'utilisateur intermédiaire qui veut combler ses lacunes.

Du wireframe au prototype animé

Le cœur métier de Figma reste la conception d'interfaces. Vous apprenez à structurer un projet en partant du wireframe jusqu'à la maquette finalisée, en appliquant la méthode atomic design pour bâtir des systèmes cohérents et réutilisables. La partie prototypage vous fait ensuite donner vie à ces écrans : déclencheurs, actions, options d'animation, overlays, effets de parallaxe et transitions fluides, le tout illustré par des exercices guidés.

Le Dev Mode et l'export complètent ce parcours en préparant le passage de la maquette au développement, un point clé pour qui travaille en équipe avec des intégrateurs.

Figma Make : l'IA générative et ses limites

La dernière mise à jour de cette formation ajoute un chapitre entier consacré à Figma Make, l'assistant à intelligence artificielle intégré à Figma. Make est passé en disponibilité générale en août 2025 et fonctionne avec un système de crédits mensuels réservé aux comptes payants.

Le module ne se contente pas de montrer ce que Make sait faire. Il adopte une posture honnête et utile : générer une première page à partir d'un prompt détaillé, l'améliorer par itérations successives, créer un composant isolé plutôt qu'un site entier, intégrer un kit et un design system, attacher un design existant. Surtout, il montre où l'IA bloque, ce qu'elle interprète mal et ce qu'elle ne fera pas à votre place.

L'objectif est d'intégrer Make à votre process sans surestimer ce qu'il peut produire, une approche bien plus exploitable que les démonstrations idéalisées.

Un formateur certifié et reconnu

La formation est animée par Olivier Krakus, formateur certifié Tuto.com depuis 2015, expert de la communauté Adobe et auteur d'ouvrages spécialisés chez Dunod et Eyrolles. Il intervient en design dans plusieurs écoles supérieures et a produit plusieurs centaines de formations sur les outils créatifs. Tous les fichiers sources Figma, images et vidéos sont fournis et réutilisables, et la section entraide permet de poser vos questions directement.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Introduction
Chapitre 2
Interface et menus
Chapitre 3
Les outils
Chapitre 4
Exercices pratiques
Chapitre 5
Mode draw
Chapitre 6
Exercices pratiques Draw
Chapitre 7
Wireframe et maquette

Table des matières

Chapitre 1 : Introduction
03m27
 
Leçon 1Introduction
Leçon 2Avant propos
Chapitre 2 : Interface et menus
35m26
 
Leçon 1Intro chapitre 1
Leçon 2C'est quoi Figma ?
Leçon 3Interface hors ligne
Leçon 4Interface hub
Leçon 5Interface design
Leçon 6Menu clic droit et option du fichier
Leçon 7Menus files/edit/view
Leçon 8Objet-text-arrange-vector
Leçon 9Aide et autre menus
Leçon 10Préférences
Chapitre 3 : Les outils
2h41
 
Leçon 1Introduction
Leçon 2Frame et section
Leçon 3Move, hand et scale
Leçon 4Grille
Leçon 5Lignes et colonnes
Leçon 6Règles
Leçon 7Calques et pages
Leçon 8Les zooms
Leçon 9Fonction recherche
Leçon 10Les formes
Leçon 11Plume
Leçon 12Pencil
Leçon 13Sélection de couleurs
Leçon 14Contraste
Leçon 15Dégradés
Leçon 16Photo et retouches
Leçon 17Vidéo
Leçon 18Contours
Leçon 19Masque
Leçon 20Le détourage
Leçon 21Pathfinder
Leçon 22Les effets
Leçon 23Les options de fusion
Leçon 24Outil de texte
Leçon 25Commentaire, annotation et mesure
Leçon 26Alignement
Leçon 27Auto layout
Leçon 28Auto layout - Grid
Leçon 29Tranche
Leçon 30Librairie
Leçon 31Style
Leçon 32Les composants
Leçon 33Les variables
Leçon 34L’exportation
Chapitre 4 : Exercices pratiques
1h15
 
Leçon 1Introduction chapitre 3
Leçon 2Polyscape
Leçon 3Parallaxe
Leçon 4Soleil
Leçon 5Bouton
Leçon 6Card
Leçon 7Formulaire
Leçon 8Interface boissons
Leçon 9Pop up vintage
Chapitre 5 : Mode draw
21m54
 
Leçon 1Introduction
Leçon 2Changement d’interface
Leçon 3Les outils
Leçon 4Contours dynamiques
Leçon 5Les brushes
Leçon 6Répetition
Leçon 7Motif
Chapitre 6 : Exercices pratiques Draw
50m56
 
Leçon 1Introduction
Leçon 2Logo cochon
Leçon 3Logo texte
Leçon 4Logo renard
Leçon 5Logo légume
Leçon 6Verre
Chapitre 7 : Wireframe et maquette
1h30
 
Leçon 1Introduction chapitre 6
Leçon 2Exemple de wireframe - one page
Leçon 3Maquette one page
Leçon 4Préparation et atomic design
Leçon 5Style projet 6
Leçon 6Atome
Leçon 7Molécule 1
Leçon 8Footer
Leçon 9Wireframe
Leçon 10Maquette
Chapitre 8 : Prototypage
24m13
 
Leçon 1Introduction chapitre 7
Leçon 2Menu prototype
Leçon 3Les triggers
Leçon 4Les actions
Leçon 5Option d'animation
Leçon 6Lissage de vitesse
Leçon 7Flow et scrolling
Chapitre 9 : Exercices pratiques prototypage
28m52
 
Leçon 1Introduction chapitre 8
Leçon 2Animation bouton
Leçon 3Pop up et tremblement
Leçon 4Canette et parallaxe
Leçon 5Parallaxe
Leçon 6Overlay
Leçon 7Composant et prototypage
Chapitre 10 : Dev mode
08m06
 
Leçon 1Introduction Dev mode
Leçon 2Les outils
Leçon 3Les options
Chapitre 11 : Communauté et plugins
27m44
 
Leçon 1Community et plugins
Leçon 2Plugin de ressources
Leçon 3Plugin de textes
Leçon 4Plugin de couleurs
Leçon 5Plugin de mock up et wireframes
Leçon 6Plugin Animation
Chapitre 12 : Figjam
20m20
 
Leçon 1Introduction
Leçon 2L'interface
Leçon 3Outil de dessin
Leçon 4Post it
Leçon 5Forme
Leçon 6Texte, table et stamp
Leçon 7Template et widget
Leçon 8Timer et musique
Chapitre 13 : Slide
19m13
 
Leçon 1Introduction slide
Leçon 2Nouveau document
Leçon 3Organisation et ajout de slide
Leçon 4Paramétrage de fond
Leçon 5Les outils
Leçon 6Live interaction et note
Leçon 7Animation
Leçon 8Présentation
Chapitre 14 : Buzz
09m44
 
Leçon 1Introduction
Leçon 2Nouveau document
Leçon 3Les outils
Chapitre 15 : Figma Make
40m45
 
Leçon 1Introduction
Leçon 2Le principe de base
Leçon 3Comprendre l'interface base
Leçon 4Restaurant sushi v1
Leçon 5Restaurant sushi et - Resultat et interface
Leçon 6Restaurant sushi v2 et v3
Leçon 7Restaurant sushi V4 - Limite de l'IA
Leçon 8Kit et skill
Leçon 9Test de composant
Leçon 10Intégration depuis Design
Chapitre 16 : Conclusion
01m26
 
Leçon 1Conclusion

Aperçus

Avis des apprenants

Détail des avis
112
Apprenants
1
Commentaire
5/5
Note moyenne
5/5
1
4/5
0
3/5
0
2/5
0
1/5
0
Benoit Breton
Publié le 17/09/2025
Bonne vue d'ensemble pour débuter sur Figma

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Avec ce cours, pourrai-je concevoir de bout en bout une maquette interactive sur Figma et générer des variantes à l’aide de l’IA ?

À l’issue de la formation, vous serez en mesure de structurer un projet Figma en partant de l’interface jusqu’au wireframe, de réaliser des maquettes complètes avec gestion de composants, puis d’animer des prototypes (déclencheurs, actions, animations, overlays). Vous verrez également comment générer des interfaces ou des composants grâce à Figma Make et sa logique de crédits, en comprenant les limites concrètes de cette IA.

Quels usages avancés ou outils du hub Figma sont explicitement montrés dans le tutoriel ?

Le tutoriel détaille l'utilisation de Figma Draw (dessin vectoriel), Dev Mode (export et préparation du passage au développement), FigJam (collaboration et tableaux blancs), Slides (présentations), Buzz (supports pour réseaux sociaux) et Figma Make (IA générative). Chaque outil fait l’objet d’exercices concrets pour illustrer leur application.

Quels sont les prérequis techniques ou conditions d’accès pour utiliser Figma Make avec l’IA générative ?

L’utilisation de Figma Make, le module d’IA, requiert un compte payant (Pro ou Étudiant) et fonctionne sur un système de crédits mensuels. Certaines fonctionnalités d’animation avancée ou d’export peuvent aussi dépendre de la version du logiciel installée et des droits associés à votre licence.

Ce tutoriel permet-il de réaliser des workflows de développement, d’automatisation ou de batch ?

Le tutoriel présente le passage de la conception au développement grâce au Dev Mode et à l’export, mais n’aborde pas la création de pipelines, de traitements batch ou d’automatisations avancées. Ces usages relèvent d’outils ou de modules non couverts ici.

Puis-je obtenir le remboursement si le tutoriel ne correspond pas à mes attentes ?

La plateforme tuto.com applique une garantie « satisfait ou remboursé » sous certaines conditions. Vous pouvez consulter la politique détaillée directement sur le site avant ou après achat.

Payer plus tard ou en 3x

Prix d'achat : 44,50 €
Pour payer plus tard ou en plusieurs versements échelonnés, 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 plus tard ou en plusieurs fois

3 paiements de 14,83 €
klarna
tous les mois, sans intérêts
Total : 44,50 €
Afficher les conditions : Klarna
Klarna : conditions d'utilisation du paiement différé en 3 échéances.

Attendez ! 🤗

Accédez à plus de 1405 tutos gratuits

Notre politique de protection des données