Bienvenue dans cette formation en ligne dédiée à l'outil de création d'interfaces et de prototypes : Figma.
Figma est un des outils les plus plébiscités ces dernières années dans la création d'interfaces d'applications et de sites Internet. C'est également et un des principaux concurrents d'Adobe XD.
Dans ce cours en vidéo, je vous invite à découvrir à travers une série de chapitres, les différents outils du logiciel qui touchent à la création graphique. Vous y retrouverez une partie théorique vous présentant les différents outils, puis, une partie pratique dans laquelle vous serez invité à réaliser de nombreux exercices de design de pictogrammes, d'applications ou d'éléments d'interfaces.
La formation traitera également de la partie prototypage.
Enfin, 2 chapitres vous permettront de découvrir les outils d'exportation mais aussi les plugins indispensables de Figma.
Figma de A à Z - La formation complète
Dans cette formation Figma en vidéo, vous découvrirez :
- L'interface,
- Les calques,
- Les actifs, les composants,
- Le prototypage,
- Les outils de dessin,
- Les outils d'export et de partage,
- Les options de mise en page,
- L'export de votre travail,
- Les plugins qui vous feront gagner du temps !
Ce cours se veut évolutif. De ce fait, suivant vos besoins et les améliorations de Figma, de nouvelles vidéos seront mises en ligne dans les prochains mois.
Je reste à votre disposition pour toutes questions dans la section entraide.
Vous pourrez également m'y demander des nouvelles vidéos afin de compléter vos connaissances. Un QCM vous permet de valider vos connaissances en fin de formation.
Table des matières de cette formation Figma, UX (durée : 6h20m)
-
Introduction
- Introduction gratuit 00:01:23
- Avant propos gratuit 00:01:43
-
Les outils
- Introduction gratuit 00:01:24
- Interface gratuit 00:02:07
- Interface ouverture document 00:06:33
- Team project 00:02:26
- Interface design 00:01:29
- Menu File et View 00:04:36
- Les menus d'aide 00:02:04
- Les plans de travail 00:04:59
- Grille 00:03:30
- Ligne et colonne 00:02:05
- Les régles 00:03:12
- Calque et page 00:03:08
- Les formes 00:07:20
- La plume 00:04:11
- Outil pencil 00:01:26
- Edition d'objet 00:04:02
- Fond et couleur 00:05:18
- Les dégradés 00:03:44
- Style et nuancier 00:04:24
- Contours 00:04:49
- Exercice de plume 00:04:59
- Les masques d'écrétage 00:04:24
- Pathfinder 00:03:43
- Outil Image 00:04:32
- Crop ou Redimension 00:02:21
- Retouche photo 00:02:39
- Effect 00:03:16
- Option de fusion 00:02:24
- Format GIF 00:01:33
- Les outils de texte 00:09:09
- Main et commentaire 00:02:10
- Outil d'alignement 00:04:23
- Menu Arrange 00:01:20
- Les contraintes 00:06:11
- Auto layout 1 00:04:17
- Auto layout 2 00:06:19
- Les tranches 00:01:50
- Librairie 00:01:26
- Les Composants 00:06:44
- Propriété composant 00:07:30
- Menu edit 00:03:19
- Menu objet 00:04:16
- Menu clic droit 00:02:05
- Menu inspection 00:02:45
-
Exercice de Design
- Introduction 00:01:23
- Pictogramme Pastèque gratuit 00:08:07
- Pictogramme ordinateur 00:08:50
- Logo facebook 00:07:42
- Element flou 00:09:05
- Wireframe 00:06:24
- Design de la page d'accueil 00:14:49
- Déclinaison 00:11:38
- Creation d'un pop up 00:08:48
- Parallaxe 00:12:05
-
Le prototypage
- Introduction gratuit 00:00:53
- Le prototypage c'est quoi ? 00:01:42
- Les déclencheurs 00:06:15
- Les actions 00:05:04
- Animation et flow 00:04:27
-
Exercice de Prototypage
- Introduction gratuit 00:01:08
- Animation d'un loader 00:05:12
- Animation d'un coeur 00:04:22
- Animation d'un pop up 00:06:05
- Animation du site 00:04:44
- Paralaxe 00:04:28
-
Export et partage
- Intro 00:00:54
- Partager 00:02:23
- Export 00:04:41
-
Plugins de Figma
- Intro gratuit 00:00:55
- Menu plugin 00:02:51
- Plugin 3D 00:05:29
- Plugin ressource graphique 00:05:33
- Plugin accessibilité 00:04:04
- Plugin motion 00:05:33
- Outil widget 00:03:59
-
FigJam
- Interface d'ouverture 00:03:06
- Interface 00:01:37
- Crayons 00:02:24
- Formes 00:03:55
- Alignement 00:01:45
- Post it 00:01:53
- Lien 00:02:51
- Texte 00:02:15
- Sticker 00:01:59
- Menus 00:05:14
- Image 00:01:31
- Partage et export 00:04:11
- Section 00:01:50
- Widget et plugin 00:05:19
-
Conclusion
- Conclusion 00:01:42
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Olivier Krakus
-
Tuto complet mais pas assez approfondi pour un usage professionnel. Cela permet une première approche, mais il manque une partie prototypage plus dense pour un projet pro type création d'app ou de site web complet. Il y a également beaucoup d'approximation et de "problème de connexion" pour un tuto professionnel ce qui est un peu dommage. En revanche le prix est tout à fait abordable et correspond à un tuto de cette qualité, dans l'ensemble c'est un bon tuto pour démarrer Figma, merci.
-
Trop bien je recommande les yeux fermés
-
Très bonne formation et merci Olivier pour cette qualité
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés