Figma - Design d'interface - Prototypages, mockups, wireframes
Proposé par
M2I
Prérequis
Public admis
- Salarié en Poste
- Entreprise
Demandeur d'emploi et Etudiant non admis
Financement
- Votre OPCO
- Financement personnel
Financement CPF non pris en charge
Modalités
- En centre
- À distance
Objectifs pédagogiques
A l'issue de cette formation, 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 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.
Programme de la formation
Introduction
- 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 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
- Gérer les fichiers et les projets
Manipuler les fonctionnalités de base
- Créer une frame
- Créer 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
Exemples de travaux pratiques (à titre indicatif)
- 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 composants
- Créer des composants simples
- Créer et éditer les instances
- Créer des overrides et des composants imbriqués
- Créer des variants de composants
- Découvrir les options avancées des variants
Exemples de travaux pratiques (à titre indicatif)
- 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
Exemples de travaux pratiques (à titre indicatif)
- 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
Proposé par
M2I
"Un leadership dans le domaine de la formation"
Proposé par
M2I
