Figma est l’outil collaboratif de référence pour concevoir des interfaces web et mobiles. Cette formation couvre le design d’écran, les grilles, le zoning, les wireframes, les maquettes mobile et desktop, les composants et le prototypage, jusqu’au partage avec les développeurs, ainsi que les nouvelles fonctions d’IA de Figma. Prérequis : bonne connaissance du web et pratique d’un logiciel de dessin vectoriel ou bitmap.
Objectifs :
• Comprendre les contraintes des écrans et les principes du design responsive.
• Structurer une interface avec frames, grilles, auto layout et contraintes.
• Passer du zoning au wireframe puis à la maquette.
• Créer des composants, des variantes, des styles et des variables réutilisables.
• Réaliser des maquettes mobile et desktop et un prototype interactif.
• Partager, tester et transmettre ses maquettes aux développeurs.
Formation disponible
présentiel, individuel
Formation disponible présentiel, individuel.
Comment souhaitez vous suivre cette formation ?
Cette formation est disponible en présentiel, à distance ou en cours individuels. Suite aux changements récents du fonctionnement des comptes CPF, si nos liens CPF renvoient sur une erreur temporaire, merci de nous contacter au 04 42 31 43 55
Comment souhaitez vous suivre cette formation ?
Cette formation est disponible en présentiel, à distance ou en cours individuels. Suite aux changements récents du fonctionnement des comptes CPF, si nos liens CPF renvoient sur une erreur temporaire, merci de nous contacter au 04 42 31 43 55
Découvrir Figma
• Atouts de Figma en environnement collaboratif
• Interface : fichiers, pages, barre d’outils, panneaux de propriétés
• Ressources de la communauté Figma
Le design pour écrans
• Contraintes des périphériques et règles de design visuel
• Principes du responsive et nommage des zones
• Typographie adaptée aux écrans
Grilles et mise en page
• Des grilles du print aux grilles web
• Grilles, repères, contraintes et auto layout
Formes, textes, images et couleurs
• Formes et outil Plume ; création d’icônes
• Styles de texte et de couleur ; dégradés et palettes
• Images et masques
Du zoning à la maquette
• Zoning, wireframe et maquette
• Moodboard, tendances et pistes graphiques
• Maquette mobile puis maquette desktop
Composants et automatisation
• Composants, variantes et états d’interaction
• Variables (couleurs, espacements, modes clair et sombre)
• Kits d’interface : écrans de connexion et d’inscription
• Plug-ins utiles
Prototypage
• Liens d’interaction, transitions, superpositions, animations intelligentes
• Parcours utilisateur et test sur mobile
Partage et export
• Liens de partage et commentaires
• Mode Dev et spécifications pour les développeurs
• Export des éléments (SVG, PNG, JPEG, WebP) et optimisation
Ouverture aux outils d’IA
• Fonctions d’IA de Figma : premier jet d’interface, prototypage rapide, aperçu de la publication de sites
• Garder la maîtrise de la conception et de l’accessibilité
