Objectifs pédagogiques
- Créer des designs d'interfaces d'applications mobiles et de sites Web
- Appliquer les bonnes pratiques de la conception d'interfaces
- Travailler efficacement en équipe avec les outils collaboratifs
- Prototyper et tester des interfaces interactives
- Partager et exporter des projets pour les développeurs et les clients.
Niveau requis
Avoir de bonnes connaissances de l'environnement Web, et des connaissances de base du logiciel Adobe Photoshop. Avoir une première expérience en design d'interface et des notions d'ergonomie.
Public concerné
Webmasters, graphistes, directeurs artistiques, responsables de communication, chefs de projets, cadres, consultants, chefs de projets en Maîtrise d'Ouvrage (MOA) et Maîtrise d'Oeuvre (MO).
Programme
Introduction
- Les principes du prototypage
- Qu'est-ce que Figma ?
- Les atouts et les enjeux
- Figma App et Figma Cloud
- Les logiciels phares de la création d'interface
- Les principes du Design atomique
Le processus du design
- Le processus de conception
- Les tendances du design
Découvrir l'interface Figma
- Découvrir l'interface
- La barre de menu
- Les panneaux d'outils, calques, pages...
Créer un projet
- Créer une Team et un projet
- Importer des fichiers Sketch
- Utiliser des templates
- Gérer les fichiers et les projets
Manipuler les fonctionnalités de base
- Créer une frame
- Créer des formes
- Importer des images
- Masquer des images et des formes
- Importer des icônes et des éléments vectoriels
- Ajouter et éditer du texte
- Importer de la Data
- Ajouter des commentaires
Les styles
- Manipuler les couleurs
- Travailler avec les styles et les effets
- Créer des styles de couleurs, de textes et de grilles
Les composants
- Créer des composants simples
- Manipuler les instances
- Créer des overrides et des composants imbriqués
- Gérer les contraintes de redimensionnement
- Comprendre et manipuler les Auto Layouts
- Créer des variants de composants
Prototyper
- Créer des interactions entre frames
- Utiliser les transitions Smart Animate
- 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
- Exporter le fichier .fig
- Préparer le fichier pour l'exportation des assets
- Utiliser Inspect Mode pour l'intégration
- Les services pour l'exportation (Avocode, Zeplin...)
Optimiser votre workflow
- Appliquer une bonne convention de nommage
- Appliquer les grilles et des repères
- Organisation des éléments
- Installer et utiliser les principaux plug-ins
- Utiliser du faux contenu
Exemples de travaux pratiques (à titre indicatif)
- Atelier : conception d'une interface
- Réaliser une interface Web ou une application mobile à partir d'un kit UI fourni
- Présentation et partage du prototype en fin de journée
Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.
Modalités d’évaluation des acquis
- En cours de formation, par des productions
- Et, en fin de formation, par un questionnaire d'auto-évaluation ou une certification (M2i ou éditeur)