Module 1 : Introduction
- Évolution des logiciels de création d'interfaces web
- Figma Navigateur / Figma Logiciel / Figma Mirror
- L'interface Figma
- Les différents formats d'images pour le web (JPEG, PNG / PNG transparent, GIF) : comment choisir ?
- Le format SVG pour Figma
- Bien nommer ses fichiers pour le web et organiser ses plans de travail
- Design System & Atomic Design (initiation)
Module 2 : Outils les plus utiles
- Découverte de l'interface Figma et de ses principaux outils
- Utilisation des repères, des layouts/grids et règles
- Le zoom (votre meilleur allié dans Figma)
- Frames / Créer un espace de travail web efficace (12 colonnes)
- Layers : pages et calques
- Styles / Fill / Stroke / Shadows / Inner Shadows / Blurs
- Styles de texte
- Styles de couleurs et dégradés
- Composants, Auto-Layout, composants interactifs
- Différences entre Styles et Variables
- Formes vectorielles
- Figma Draw
- Alignements
- Les raccourcis clavier les plus utiles
- Dev Mode (initiation)
Module 3 : Les indispensables
- Créer un nouveau document
- Exporter pour le web - Export @1x, @2x, @3x / Preview
- Transform / Edit / Rotate
- Grouper / Dégrouper
- Alignement des artboards et des éléments graphiques
- Création de composants
- Assets - Design System
- Auto-Layout avancé
- Boolean
- Les contraintes
- Les variables (initiation)
- Library
- Les plugins utiles pour Figma : comment les installer, lesquels utiliser ?
- La communauté Figma
- L'IA dans Figma
- Initiation à Figma MCP et Claude Code via le terminal
- Figma et les Claude Skills
- La galaxie Figma : initiation à FigJam, Figma Slides, Figma Buzz, Figma Sites, Figma Make
Module 4 : Exercices pratiques
De nombreux exemples et exercices pratiques jalonnent l'ensemble de la formation.
1er projet - Création d'une landing page
- Version desktop et mobile
2e projet - Site web vitrine
Réalisation d'un projet complet intégrant l'ensemble des bonnes pratiques abordées en formation.
Conception d'un site web vitrine desktop et mobile (thème à définir).
- Wireframes
- Maquettes graphiques
- Prototypage Figma
3e projet - Site e-commerce
Réalisation d'un projet complet intégrant l'ensemble des bonnes pratiques abordées en formation.
Conception d'un site e-commerce desktop et mobile (thème à définir).
- Étude des différents gabarits de page e-commerce
- Analyse de sites e-commerce existants
- Wireframes
- Création des maquettes graphiques
- Prototypage Figma
4e projet - Figma Make
- Création d'un player audio
