Formation Figma - Design d'interface - Prototypages, mockups, wireframes
Figma, concevoir des interfaces d'applications web & mobiles
Informations générales
Objectifs
Après ce cours, vous serez capable de :
- Créer des designs d'interfaces d'applications mobiles et de sites Web
- Appliquer les bonnes pratiques de la conception d'interfaces
- Travailler en équipe avec les outils collaboratifs
- Prototyper et tester des interfaces interactives
- Partager et exporter des projets pour les développeurs et les clients.
Public
Ce cours s'adresse avant tout aux personnes suivantes :
- Graphistes
- Webdesigners
- Toute personne devant créer des maquettes de sites web et d'applications mobiles et tablettes
Prérequis
Pour suivre ce cours, vous devez déjà posséder les connaissances suivantes :
- Avoir une bonne connaissance du web
- La connaissance de logiciel de PAO serait un plus.
Programme de la formation
Vous apprendrez à construire des interfaces mobiles et web selon les modalités de l’UX design avec FIGMA. Vous maîtriserez l’interface et les fonctionnalités. Vous pourrez créer des formes avec l’outil plume pour un graphisme approfondi, vous serez capable de gérer les outils de prototypage et d’export.
Les spécificités du logiciel
- Les principes du prototypage
- Les logiciels phares de la création d'interface
- Qu'est-ce que Figma ?
- Les atouts et les enjeux
- Figma App et Figma Cloud
- Les principes du Design atomique
Découvrir l'interface de FIGMA
- Barre d'outils et panneaux de propriété.
- Le plan de travail FIGMA.
- La superposition des calques.
- Travaux pratiques : Manipulation de l’interface
Préparer le maquettage pour le web avec la fonctionnalité FIGMA
- Présentation de la fonctionnalité FIGMA.
- Créer une Team et un projet
- Gérer les fichiers et les projets
Interface d'application mobile
- Créer une frame et des formes
- Ajouter et éditer du texte
- Manipuler et éditer des images
- Masquer des images et des formes
- Importer des icônes et des éléments vectoriels
- Ajouter des commentaires
- Travaux pratiques : Créer des frames utilisant les fonctionnalités de base
Créer des styles
- Créer et éditer des styles de couleurs, de textes et de grilles.
Créer des documents
- Créer et éditer des styles de couleurs, de textes et de grilles
- Travaux pratiques : Créer et gérer sa librairie d'assets pour un wireframe
Construction d'interface
- Mise en place des grilles et des repères
- Gérer les contraintes de redimensionnement
- Utiliser les Auto Layout pour créer des interfaces responsives
- Utiliser des ressources de Figma (templates)
Prototyper
- Créer des interactions entre les frames
- Utiliser les transitions Smart Animate
- Utiliser les options du scrolling (sticky scrolling...)
- Paramétrer et visualiser le prototype
- Visualiser sur l'application Figma Mirror
Collaborer et partager
- Partager les fichiers
- Gérer les droits d'accès (view, comment, edit)
- FigJam : collaborer en équipe
Exporter
- Enregistrer le fichier (.fig)
- Exporter les images et frames (jpg, pdf, png)
- Exporter les codes et les assets
- Découvrir les services d'exportation (Zeplin)
Optimiser du workflow
- Sélectionner les plug-ins pour Figma
- Appliquer une bonne convention de nommage
- Organisation des éléments
- Travaux pratiques : Conception d'une interface
Méthode pédagogique
Chaque participant travaille sur un poste informatique qui lui est dédié. Un support de cours lui est remis soit en début soit en fin de cours. La théorie est complétée par des cas pratiques ou exercices corrigés et discutés avec le formateur. Le formateur projette une présentation pour animer la formation et reste disponible pour répondre à toutes les questions.
Méthode d'évaluation
Tout au long de la formation, les exercices et mises en situation permettent de valider et contrôler les acquis du stagiaire. En fin de formation, le stagiaire complète un QCM d'auto-évaluation.
Suivre cette formation à distance
- Un ordinateur avec webcam, micro, haut-parleur et un navigateur (de préférence Chrome ou Firefox). Un casque n'est pas nécessaire suivant l'environnement.
- Une connexion Internet de type ADSL ou supérieure. Attention, une connexion Internet ne permettant pas, par exemple, de recevoir la télévision par Internet, ne sera pas suffisante, cela engendrera des déconnexions intempestives du stagiaire et dérangera toute la classe.
- Privilégier une connexion filaire plutôt que le Wifi.
- Avoir accès au poste depuis lequel vous suivrez le cours à distance au moins 2 jours avant la formation pour effectuer les tests de connexion préalables.
- Votre numéro de téléphone portable (pour l'envoi du mot de passe d'accès aux supports de cours et pour une messagerie instantanée autre que celle intégrée à la classe virtuelle).
- Selon la formation, une configuration spécifique de votre machine peut être attendue, merci de nous contacter.
- Pour les formations incluant le passage d'une certification la dernière journée, un voucher vous est fourni pour passer l'examen en ligne.
- Pour les formations logiciel (Adobe, Microsoft Office...), il est nécessaire d'avoir le logiciel installé sur votre machine, nous ne fournissons pas de licence ou de version test.
- Horaires identiques au présentiel.
Mis à jour le 06/11/2023