Vous souhaitez maitriser Figma, le logiciel de référence pour les Designer UI & Web Designer ? Alors cette formation complète est conçue spécialement pour vous.
Mises à jour Continues - Un Cours Dynamique
Avant de plonger dans le programme, il est essentiel de souligner que ce cours bénéficie régulièrement de nouvelles vidéos et de mises à jour substantielles - pas de simple changement de mots dans une description pour donner l'impression que le cours est mis à jour ;-).
Dans ce cours vous apprendrez à utiliser les nombreux outils qu'offre Figma. Pour cela j'ai découpé le cours en 6 parties :
1ère partie : Les Bases de Figma
Découvrez les outils fondamentaux de Figma, incluant les formes, l'outil plume, la gestion du texte, les masques, et le système de composants, etc
Cette partie vise à vous donner des bases solides pour la suite.
A la fin de ce chapitre vous serez déjà à l'aise avec Figma et nous réaliserons 4 exercices pour bien assimiler les notions vu précédemment.
2ème partie : Les Outils Avancés
Ca y est, vous comprenez le fonctionnement de Figma mais maintenant on va aller encore plus loin avec des outils plus élaborés. On va apprendre à utiliser :
le système de grille;
les contraintes;
les autolayouts;
le travail collaboratif;
les plugins;
les styles;
les variants et propriétés des composants (outil récemment introduit par Figma);
Etc.
A la fin, un exercice complet vous attend pour mettre en pratique ces nouvelles compétences.
3ème partie : Le Prototypage
Ici il s'agira de rendre vivante nos interfaces, c'est ce que l'on appelle le prototypage. Cela permettra entre autre de pouvoir présenter un prototype de site web, application ou autre à un client. On y verra tous les types d'animation possible avec Figma, notamment les composants interactifs qui est un outil très puissant de ce dernier. Nous pratiquerons ce que nous avons vu dans un projet complet qui correspond à la 4ème partie.
4ème partie : Fonctionnalités Figma Pro (Version payante de Figma)
Cette formation se voulant complète, on explorera également les fonctionnalités avancées de la version payante de Figma, y compris les modes et le prototypage avancé.
5ème partie : Réalisation d'un site One Page sur le thème du Fitness
J'ai profiter de mettre à jour le cours pour créer entièrement un nouveau projet. Il s'agit d'un site One Page sur le thème du Fitness. On verra ainsi la création d'un Design System dans le but de réutiliser les composants créés et les couleurs qu'on aura choisis au préalable. On en profitera pour utiliser la puissance du prototypage de Figma en créant par exemple un bandeau avec une animation de défilement infini.
5ème partie (ARCHIVE) : Réalisation d'une Application de Messagerie
Au lieu d'un simple exercice sur le prototypage, j'ai choisi de vous impliquer dans un projet complet qui révisera l'ensemble des concepts abordés dans le cours.. On réalisera ainsi une application de messagerie en se rapprochant au maximum des méthodes que l'on utilise pour réaliser des maquettes professionnelles, prêtes à être présentées à des clients.. Nous utiliserons donc un Design System propre à l'application, qui facilitera la modification (si le client veut un changement par exemple) et favorisera le travail collaboratif.
6ème partie (la plus fun) : BONUS - Le Laboratoire
Une partie bonus qui vise à repousser les limites de Figma et appliquer tout ce que l'on a vu précédemment de manière créative. On réalisera un loader avec effet liquide, un dégradé complexe et animé, un effet de suivi de curseur et j'en passe. Cette section s'enrichira régulièrement. Utilisant Figma au quotidien, je partagerai sous forme de tutoriels toute création nouvelle et captivante que je jugerai "Fun" et digne d'intérêt ;-)
À la fin de ce cours, Figma n'aura plus aucun secret pour vous. Ce cours, en constante évolution, couvrira également les futures fonctionnalités de Figma.
Je suis impatient de partager avec vous ma passion pour Figma et le Design d'interface, mon outil de design de prédilection, et de vous retrouver dans ma formation pour une aventure enrichissante.
1. Présentation du projet Maquette site e-commerce
00:07:092. Création de la barre d'infos en haut de la page web
00:12:483. Création du titre logo principal de la page d'accueil
00:07:044. Design du menu principal
00:09:355. Création des catégories de la boutique et d'un texte descriptif
00:13:006. Design de la zone des témoignages des clients
00:09:247. Conception de la zone des offres d'abonnement
00:15:188. Finalisation du wireframe et du footer
00:08:269. Les différentes possibilités pour exporter et partager une maquette Figma
00:05:1810. Ajouter des icônes illustrations sur les catégories (+ découverte Photopea)
00:14:2111. Intégration des visuels (photos images) sur notre maquette
00:10:1712. Ajout des interactions en mode prototype
00:15:4513. Découverte du mode développeur pour aider à l'intégration de la maquette
00:07:371. Présentation de PlaygroundAI et de l'IA générative d'image
00:22:152. Les outils à maîtriser pour écrire de bons prompts et pour parler à une IA
00:11:333. Découverte d'Adobe Firefly, l'intelligence artificielle d'Adobe
00:10:414. Présentation de Midjourney, l'IA intégrée à Discord
00:06:075. Créer des icônes par IA pour une maquette
00:09:456. Générer un exemple de Template web grâce à l'IA
00:03:147. Prise en main de BlueWillow, une autre IA génératrice d'images
00:05:008. Installer Stable Diffusion en local pour générer des images hors ligne
00:14:519. Utiliser Google BardGemini pour générer du texte par IA pour une maquette
00:07:0310. Utiliser Llama en local pour générer du texte hors ligne
00:08:2711. Aller plus loin avec Llama et activer l'API REST
00:14:531. Créer des animations intelligentes avec Figma
00:12:442. Créer un prototype interactif avec des transitions entre les pages
00:08:473. Tester une maquette sur un émulateur ou sur un téléphone réel via l'application
00:04:534. Créer un composant type Card pour afficher un profil utilisateur
00:11:215. Utiliser des templates wireframes pour prototyper plus vite
00:08:481. Qu'est-ce qu'un design system A quoi ça sert Pourquoi en créer un
00:08:152. Définir la typographie de notre charte graphique (titres textes)
00:08:413. Trouver des couleurs exceptionnelles pour le design system
00:14:174. Définir les espacements dans la charte graphique
00:07:015. Création des boutons primaires et secondaires de notre design system
00:09:136. Création des champs inputs pour les formulaires
00:07:298. Design d'une maquette d'exemple de démo avec notre design system
00:10:48
1.8
Figma le cours complet de l'UX Designer