Figma - du prototypage à l'animation

Objectifs

• Maîtriser les outils de base de Figma (frames, formes, outils de sélection)


• Créer et gérer des composants réutilisables et variants


• Utiliser les grilles, règles et contraintes pour des mises en page professionnelles


• Gérer les styles typographiques et colorimétriques


• Réaliser des prototypes interactifs et animés


• Appliquer Auto Layout pour des éléments responsives


• Exporter efficacement les projets selon les supports (web, mobile, print)


• Créer des animations dynamiques et effets de scroll

Programme de la formation

Module 1 – Bien démarrer avec Figma

• Présentation du cours et création de compte

• Découverte de l'interface (Drafts, outils de navigation)

Module 2 – Les outils de base

• Création de frames, rectangles, formes diverses

• Sélections, couleurs, images, dégradés

• Texte et typographie

• Outils plume et pencil

• Masques, contours, effets, Boolean tools

• Alignements, magnétisme, repères

• Exercices : logo Figma, plume, texte, alignement

• Exportation des fichiers

• Quiz – Les outils de base

Module 3 – Outils avancés

• Règles et grilles

• Contraintes (constraints)

• Styles de couleur et de texte

Module 4 – Auto Layout

• Théorie de l'Auto Layout

• Création de boutons et cards dynamiques

• Exercice pratique : carte Instagram

• Quiz – Outils avancés + Auto Layout

Module 5 – Composants et variants

• Création de composants (boutons, menus)

• Création de variants et gestion des propriétés (text, icônes, instance swap)

Module 6 – Prototypage et animations

• Création de prototypes interactifs

• Connexions, actions, transitions

• Animation slide, scroll, effets dynamiques

• Quiz – Composants + Prototypage

Module 7 – Création de boutons dynamiques

• Boutons : hover, fond animé, switch, like, burger

Module 8 – Atelier Créatif – Projet Nike

• Création du design Nike (dégradé, mise en page, menu, logo)

• Ajout de contenu structuré et du footer

Module 9 – Nike Interactif (animations avancées)

• Création de frames animées (basket, titre, fond, etc.)

• Mise en place des transitions animées et effets

Validation et sanction

Attestation de formation

Type de formation

Non certifiante

Sortie

Sans niveau spécifique