Figma en deux jours : les fondamentaux du design UI/UX appliqué

• Découverte de l'utilisation de FIGMA
• Utilisation de FIGMA, FigJam, Figma Slides, Figma IA et Dev Mode (ainsi que Zeplin au besoin).
• Mise en page Mobile, Tablettes et Desktop (Mobile First)
• Protypages
• Comment améliorer vos design UI à l'aide de Figma
• Comprendre les contraintes liées au web
• Savoir produire des fichiers pour l'écran
• Concevoir des interfaces web (UI) à destination des développeurs web, à l'aide de Zeplin.

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

• Web designer
• Designer UI et UX
• Community manager
• Responsable de communication
• Chef de projet web
• Personnes intéressées par le design et la création d'interfaces web

• Le stagiaire est familiarisé avec l'utilisation du web
• Connaissance de Photoshop et XD serait un plus.
• Connaissance des principaux réseaux sociaux (Facebook, X, Linkedin, Instagram...)
• Un sensibilité avec la mise en page, la typographie et la photo serait également un plus.

• Feuilles de présence
• Auto-positionnement en début et fin de formation par les stagiaires
• Questions orales ou écrites
• Mise en situation
• Formalisation à l'issue de la formation : Une attestation de fin de formation est délivrée à l'issue de la formation

Modalité d'accès : Nous contacter : contact@mill-forma.fr

Accessibilité des personnes en situation de handicap : Nous contacter en cas de besoin d'accessibilité particulier pour un participant