# Apprendre à designer un site web ou une application avec Figma

> Cours Figma pour apprendre à concevoir une interface, de la première maquette au prototype interactif.

- Adresse : https://espritacademique.com/formations/apprendre-a-designer-un-site-web-ou-une-application-avec-figma/
- Thématique : Design & Création
- Formateur : Alan
- Durée : 2 heures
- Nombre de leçons : 19
- Prix à l'unité : 39,00 € (accès à vie, certificat PDF de fin de formation)
- Prérequis : Pas de prérequis - ouvert à tous niveaux
- Dernière mise à jour : 06/2025
- Note des apprenants : 4,8/5 sur 8 avis

## Présentation

Créez les maquettes de votre site web ou de votre application avec Figma : mises en page en Auto Layout, composants réutilisables, styles et variables, puis prototype interactif à transmettre aux développeurs.

Cette formation Figma vous mène de vos premiers écrans au prototype interactif, sans expérience préalable en design.

Figma sert à dessiner les écrans d'un site ou d'une application avant leur développement. Vous apprenez d'abord à vous repérer dans l'interface et à organiser vos ressources, puis à construire des mises en page qui s'adaptent à la taille de l'écran avec l'Auto Layout et les grilles.

Vous créez ensuite vos propres icônes à partir de formes et d'opérations booléennes. Vous posez aussi les bases d'un Design System : styles de texte et de couleur, composants avec variantes, variables pour gérer un thème clair et un thème sombre.

Vient enfin le prototype : vous reliez les écrans et vous animez les transitions avec Smart Animate. Vous voyez aussi comment centraliser les retours, préparer le transfert aux développeurs et monter une présentation avec Figma Slides.

**Public cible :** Pour les designers débutants, les chefs de projet, les développeurs et toute personne qui veut apprendre le design d'interface. Aucun prérequis.

## À l’issue de cette formation Figma, vous pourrez

- **Maîtriser les bases de Figma :** apprenez à vous orienter dans l’interface et organisez vos ressources afin de préparer des exports propres pour le web, le mobile ou vos présentations.
- **Construire des mises en page responsives :** maîtrisez l'Auto Layout et les grilles de structure pour créer des interfaces qui s'adaptent automatiquement à toutes les tailles d'écrans.
- **Gérer les éléments visuels et icônes :** composez avec des formes et des images tout en utilisant les opérations booléennes pour créer vos propres icônes vectorielles éditables.
- **Mettre en place un Design System :** définissez des styles de texte et de couleur cohérents afin de bâtir des composants réutilisables et d'assurer l'unité visuelle de vos projets.
- **Utiliser les variables et tokens :** installez des thèmes clair/sombre et standardisez vos espacements pour piloter les modifications de vos interfaces en un clic.
- **Prototyper et animer vos maquettes :** reliez vos écrans et utilisez Smart Animate pour simuler des micro-interactions proches du comportement d’une application réelle.
- **Collaborer et livrer vos projets :** centralisez les retours et préparez un transfert (handoff) clair pour les développeurs, incluant toutes les spécifications techniques.
- **Présenter avec Figma Slides :** devenez autonome pour construire des présentations directement depuis vos maquettes et raconter vos parcours utilisateurs.

## Programme

### Figma : formation complète pour maîtriser l’essentiel

- Tour complet de l’interface et des panneaux
- Frames : bases et bonnes pratiques
- Formes essentielles : dessin et transformation
- Créer un composant à partir d’une forme
- Grille et composants : méthode propre (extrait gratuit)
- Outils clés : plume, texte, images
- Dessiner vite avec les opérations booléennes
- Boutons modernes : états, variantes, variables
- Organisation des formes : groupes & alignements
- Maîtriser la grille avec un pixel art
- Prototyper : transitions & Smart Animate
- Aller plus loin : animation avancée
- Zones scrollables et comportements d’écran
- Interactions de navigation avec le scroll
- Bien utiliser les variables en projet
- Hiérarchie typographique & lisibilité
- Boîte à outils plugins : icônes, contenus, dev
- De la maquette au diaporama avec Slides
- Partir d’un kit UI : méthodes et pièges

## Voir aussi

- [Toutes les formations Figma](https://espritacademique.com/catalogue-de-formations/design/figma/)
- [Parcours Graphiste & designer d'interface](https://espritacademique.com/parcours-metiers/graphiste/) : 6 formations, 249,00 €