Formation Figma Complète

Vous souhaitez apprendre l'UX/UI Design et la conception de maquettes avec Figma ? Cette formation ultra complète a été pensée pour vous permettre d'apprendre et de progresser rapidement sur Figma par la pratique au travers de projets concrets.

Figma est un outil de prototypage qui vous permet de concevoir des maquettes interactives (Site web, logiciel, application mobile, visuels...). Vous allez découvrir le design et la conception d'interfaces utilisateurs ainsi que le prototypage au travers de maquettes interactives.

Offert avec ce cours : Mon design system Figma + Mon plugin Figma boosté à l'IA générative pour créer facilement le contenu de vos maquettes + 1 cours Adobe XD !

15 heures de contenu Niveau : débutant à avancé Certificat inclus

Créé par Anthony Cardinale Ingénieur en informatique, Expert IA générative & Développement

Acheter sur Udemy

Cette formation comprend :

✓ 15 heures de vidéo à la demande
✓ Design system Figma offert
✓ Plugin IA exclusif inclus
✓ Formation Adobe XD bonus
✓ Projets pratiques
✓ Certificat de fin de formation
✓ Accès à vie
✓ Support de l'instructeur
✓ Garantie 30 jours

Contenu du cours

18 sections • 76 sessions • 15h de contenu

1. Introduction à Figma, l'outil de design/prototypage ultime

Présentation du contenu de cette formation Figma

Création d'un compte et téléchargement du logiciel

Prise en main du lecteur vidéo d'Udemy pour apprendre efficacement

2. Découverte de Figma et de son interface

La page d'accueil de Figma et la liste des projets / templates

Découvrez la nouvelle interface de Figma suite à la refonte graphique de l'UI

Tableau comparatif ancienne interface vs nouvelle interface de Figma

L'interface principale du logiciel et les zones de travail

Naviguer dans un projet et s'organiser correctement

3. Les outils de base et premières manipulations sous Figma

Les principaux outils de Figma pour concevoir des maquettes

Les opérations booléennes pour créer des formes complexes

4. Mini ateliers : Créer des composants et des illustrations

Créer un composant bouton avec des variantes pour une charte graphique

Créer une illustration / image / icône avec Figma et l'exporter

Faire du "pixel art" avec Figma et sa grille aimantée

5. Prototyper, créer des animations et transitions

Créer des animations intelligentes avec Figma

Créer un prototype interactif avec des transitions entre les pages

Tester une maquette sur un émulateur ou sur un téléphone réel

Créer un composant type "Card" pour afficher un profil utilisateur

Utiliser des templates / wireframes pour prototyper plus vite

6. Créer des prototypes et des interactions avancées

Mettre en place des popups / overlays sur un prototype interactif

Les principaux types de transitions / animations

Créer un scroll et gérer le contenu en dehors d'un frame

7. Testez vos connaissances

Quiz de mi-parcours

8. Les variables avec Figma

Créer et utiliser des variables

9. Création d'un design system avec Figma

Qu'est-ce qu'un design system ? A quoi ça sert ?

Définir la typographie de notre charte graphique

Trouver des couleurs exceptionnelles pour le design system

Définir les espacements dans la charte graphique

Création des boutons primaires et secondaires

Création des champs inputs pour les formulaires

Création d'un système de tabs / d'onglets

Design d'une maquette d'exemple avec notre design system

10. Projet : Création d'une maquette pour un site e-commerce

Présentation du projet "Maquette site e-commerce"

Création de la barre d'infos en haut de la page web

Création du titre / logo principal de la page d'accueil

Design du menu principal

Création des catégories de la boutique

Design de la zone des témoignages des clients

Conception de la zone des offres d'abonnement

Finalisation du wireframe et du footer

Exporter et partager une maquette Figma

Ajouter des icônes / illustrations sur les catégories

Intégration des visuels (photos / images) sur notre maquette

Ajout des interactions en mode prototype

Découverte du mode développeur pour l'intégration

Télécharger le projet Figma complet

11. Utiliser l'intelligence artificielle générative pour créer des visuels UX/UI

Présentation de PlaygroundAI et de l'IA générative d'image

Les outils pour écrire de bons prompts et parler à une IA

Découverte d'Adobe Firefly, l'intelligence artificielle d'Adobe

Présentation de Midjourney, l'IA intégrée à Discord

Créer des icônes par IA pour une maquette

Générer un exemple de Template web grâce à l'IA

Prise en main de BlueWillow, une autre IA génératrice d'images

Installer Stable Diffusion en local

Utiliser Google Bard/Gemini pour générer du texte par IA

Utiliser Llama en local pour générer du texte hors ligne

Aller plus loin avec Llama et activer l'API REST

12. Installer et utiliser des plugins pour décupler les capacités de Figma

Rechercher des plugins, les activer et les utiliser

Créer des animations avancées grâce à un plugin ultra complet

13. Créez vos présentations avec Figma

Prise en main de Figma Slides pour créer des présentations interactives

14. Trouver des idées de maquettes et de designs à réaliser

Mes conseils pour pratiquer et vous améliorer sur Figma

Exercice pratique : Reproduire une maquette de Portfolio / CV

Trouver des idées grâce aux tendances UX/UI Design

Exercice pratique : Création d'une maquette "Bento Grids Design"

Atelier : Implémentation du "Glass Effect" sur des Cards

Atelier : Créer un effet de texte animé

15. Fonctionnalités de Figma Pro, Organisation & Entreprise

Utiliser le système de variables et gérer les états

Utiliser le système de mode des variables pour créer un "Dark Mode"

16. Vendre ses maquettes, plugins, icônes en ligne

Comment gagner de l'argent grâce à vos compétences d'UX/UI Designer

17. Développer des plugins pour Figma

Présentation de cette section "création de modules Figma"

Remise à niveau HTML

Remise à niveau CSS

Remise à niveau JavaScript

Créez votre tout premier plugin pour Figma !

Atelier : Création d'un plugin boosté à l'IA (Partie 1/2)

Atelier : Création d'un plugin boosté à l'IA (Partie 2/2)

Télécharger les sources de mon plugin exclusif FigmAI

18. Conclusion sur la formation FIGMA

Merci d'avoir suivi cette formation Figma !