Formation Maquette graphique Web et Figma
18 avril 2025 - 24 avril 2025
|Formation récurrent (Voir toutes les dates)
Un événement le 7 août 2025 à 9h00
Un événement le 17 décembre 2025 à 9h00
Objectifs : Utilisation de Figma dans la conception de Web design responsive. Concevoir des wireframes pour applications mobiles et tablettes. Cette formation vous permettra d’identifier les spécificités et les contraintes du Digital en vue de réaliser des maquettes graphiques responsive
Formation disponible
présentiel, individuel
Formation disponible présentiel, individuel.
Un événement le 7 août 2025 à 9h00
Un événement le 17 décembre 2025 à 9h00
Un événement le 7 août 2025 à 9h00
Un événement le 17 décembre 2025 à 9h00
Un événement le 7 août 2025 à 9h00
Un événement le 17 décembre 2025 à 9h00
Un événement le 7 août 2025 à 9h00
Un événement le 17 décembre 2025 à 9h00
Un événement le 7 août 2025 à 9h00
Un événement le 17 décembre 2025 à 9h00
Un événement le 7 août 2025 à 9h00
Un événement le 17 décembre 2025 à 9h00
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
Un événement le 7 août 2025 à 9h00
Un événement le 17 décembre 2025 à 9h00
Un événement le 7 août 2025 à 9h00
Un événement le 17 décembre 2025 à 9h00
Un événement le 7 août 2025 à 9h00
Un événement le 17 décembre 2025 à 9h00
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
Un événement le 7 août 2025 à 9h00
Un événement le 17 décembre 2025 à 9h00
Un événement le 7 août 2025 à 9h00
Un événement le 17 décembre 2025 à 9h00
Un événement le 7 août 2025 à 9h00
Un événement le 17 décembre 2025 à 9h00
Le Design
• Identifier les contraintes liées aux différents périphériques
• Identifier et décrire les règles de design visuel sur écran
• Décrire les principes du responsive design
• Savoir nommer les zones et éléments d’interface et identifier les parties statiques et dynamiques
• Les règles typographiques des différents périphériques
• Utilisation des Frames, Auto Layouts, composants, et contraintes responsives dans Figma
• Préparation des assets dans Figma pour exportation (SVG, PNG, JPEG)
• Collaboration en temps réel avec Figma (partage et édition simultanée)
• Accès et utilisation des ressources dans la Figma Community
• Rangement, gestion des composants, classement, dénomination et exportation des éléments
Les grilles
• Les grilles du Print vers le Web
• Gestion des grilles et guides dans Figma
Réaliser des Wireframes et des maquettes
• Créer un zoning
• Passer d’un zoning à un wireframe
• Intégrer de l’interactivité pour finaliser sa maquette
• Les outils utiles à la création de maquette
• Utilisation d’Auto Layout pour structurer les wireframes
Automatisation
• Création et gestion des composants réutilisables dans Figma
• Utilisation des variantes pour les états d’interaction (hover, clic)
• Accélération du travail grâce aux plugins utiles pour Figma (exemple : Unsplash, Iconify)
Exportation
• Optimisation des images pour le Web (taille, définition...)
• Paramètres d’exportation
Maquetter la version « aperçu mobile » de votre site
• Les outils de création de formes vectorielles
• La grille fluide
• Le design d’éléments d’interfaces
• Activité : Concevez la maquette « aperçu mobile » de votre site
• Savoir reconnaître les tendances et les styles
• Utiliser un mood board pour définir ses choix graphiques
• Mettre en place des pistes de recherche.
• Activité : Utilisation des styles de texte et de couleurs dans Figma
Enrichissez votre version « aperçu desktop »
• Activité : Concevez la maquette « aperçu desktop »
• Activité : Créer un prototype fonctionnel
Figma
• Qu’est-ce que Figma ?
• Les atouts et enjeux du logiciel dans un environnement collaboratif
Le prototypage
• Les étapes de conception
• Le design d’interface
• L’architecture de l’information
• Les tendances du design
• Création de prototypes interactifs dans Figma : transitions, overlays, animations
découvrir l’interface de Figma
• L’écran d’accueil
• Barre de menus et barre d’outils
• Les panneaux de propriétés
• Moodboard
Les plans de travail et repères
• Ajouter et gérer les plans de travail
• Manipuler les grilles et les repères
Les formes
• Créer des formes simples
• Créer des éléments vectoriels avec l’outil Plume
• Créer une icône
Les textes
• Saisir du texte
• Importer des fichiers textes
• Gérer les styles de textes
Les images
• Importer des images
• Créer des masques
Les couleurs
• Utiliser et gérer les couleurs
• Créer des dégradés de couleurs
• Générer des couleurs
Symboles et kit UI
• Créer et manipuler des composants
• Sélectionner et utiliser des ressources de la communauté Figma
• Créer deux écrans d’application mobile (connexion/inscription)
Réaliser un écran d'accueil d'application mobile
• Conception d'une version papier ou maquette filaire détaillée
• Réalisation de l'interface sous Figma
Symboles et kit UI
• Créer et manipuler les symboles
• Sélectionner et utiliser des kits UI
• Créer deux écrans d'application mobile (connexion/inscription)
Prototyper
• Créer des interfaces responsives
• Définir un parcours utilisateur
• Créer les liens d’interactions
• Prévisualiser l’interface
• Gestion des interactions par prototypes dans Figma
Partager
• Créer des liens de partage
• Déposer des commentaires
• Partage d’un prototype sur le web
• Partager les spécifications techniques (style guide)
Tester
• Tester directement dans Figma ou via l’application mobile
Les Plug-Ins
• Téléchargements et installations de plug-Ins
