Formation Figma Perfectionnement : concevoir un produit digital ergonomique.
Score de satisfaction : 4.54/5
Durée :
3 jours
15/01/2025 à Paris
numero vert : 0805 950 800 (service et appel gratuits)
Figma Perfectionnement : concevoir un produit digital ergonomique
à partir de
2100 €HT

Référence :
SF33798
Durée :
3 jours

Réservez vos places pour la session du
Vous souhaitez une session sur-mesure (intra) ?
Ce stage comprend
 21 heures de formation
Support de cours numérique
Pauses et snacks à volonté
Prise en charge OPCO possible
Disponible à distance

Formation Figma Perfectionnement : concevoir un produit digital ergonomique.

Maîtrisez l'utilisation de Figma grâce à 3 jours de formation intensifs !

Cette formation Figma Perfectionnement vous offre une immersion dans la création et la gestion d'interfaces digitales web et mobiles. Conçue pour les professionnels ayant des connaissances de base en UX/UI Design, cette formation vous permettra de maîtriser les principaux aspects du design system et de l'architecture de l'information avec l'outil Figma. Grâce à un enseignement axé sur l'expérience pratique, vous aurez l'opportunité de travailler sur des cas réels et de participer à la conception d'une version mobile pour une application web existante. Inscrivez-vous maintenant et prenez une longueur d'avance dans le monde du design digital.

Objectifs pédagogiques.

1Maquetter une interface digitale web ou mobile en basse/haute fidélité avec Figma

2S'approprier les bases de l'utilisation et de la conception d'un design system

3Maîtriser l'architecture de l'information pour proposer des maquettes respectant les bonnes pratiques ergonomiques

Prérequis : Des connaissances de base sur l'UX et l'UI Design. Une première expérience avec Figma est un bon plus.
Partagez cette formation

Programme de formation Figma Perfectionnement : concevoir un produit digital ergonomique.

PDF

Introduction à la formation Figma Perfectionnement : architecture de l’information

Inventaire des contenus : cartographier la navigation avec un site map
Navigation horizontale : concevoir un menu principal avec la méthode du tri par carte
Navigation verticale : page de premier niveau, boites de dialogues et popups
Notion de zoning : placer et dimensionner, hiérarchie visuelle, ligne de flottaison et notion de dévoilement progressif
Présentation et découverte de Figma : pages et layers, outils de dessin, formes contours et effets
Notion de composant et d’instance dans Figma
Création d’un composant pour un bloc d’information
Exemple de cas pratique : reproduire avec Figma le zoning de la page d’accueil de l’application web de référence et hiérarchiser l’information

UI Design en basse fidélité

Présentation des principaux composants graphiques
Notion de variant et de propriétés : création d’un composant Bouton avec un propriété primaire/secondaire
Overlay : maquettage du menu principal, des boites de dialogues et des popups
Responsive design : contraintes et autolayouts
Exemple de cas pratique : maquettage basse fidélité d’une nouvelle version de la page d’accueil
pour mobile en responsive design

UI Design en haute fidélité

Design visuel : historique et tendances
Brief graphique
Notion d’affordance
Charte graphique : palette de couleurs, iconographie et illustrations
Notion de plugin : utilisation d’icône (Iconify) et d’image (unsplash)
Les styles dans Figma : styles typographiques et styles de couleurs
Exemple de cas pratique : extraction de la charte graphique depuis la page d’accueil actuelle

Utiliser et concevoir un design system

Qu’est-ce qu’un Design system ?
Les principaux composants graphiques
De la charte graphique à la charte ergonomique
Les différences entre la charte graphique, les UI kit et les design system
Atomic Design : atome, molécules, organismes, templates, page
Présentation de quelques Design system
Exemple de cas pratique : création d’un embryon de design system pour l’application mobile

UX Writing : la gestion des contenus textuels

Glossaire métier
Micro rédaction : boutons, messages d’erreurs, aide en ligne
Typographie : police, taille, style
Lisibilité : l’importance du contraste, normes WCAG
Hiérarchie visuelle et échelle typographique
Contenus textuels : accroche, pyramide inversée.
Notion de styles typographiques dans Figma
Exemple de cas pratique : conception et ajout au design system d’une échelle typographique

Maquettage en co-conception avec les utilisateurs

Les principaux outils de maquettage
Préparer un atelier d’idéation : phase de divergence puis de convergence
Préparer un cycle de maquettage : recrutement du groupe utilisateur, préparation et animation d’un atelier de conception
Faire un prototype interactif avec Figma : transitions entre écrans et variants, réalisation d’animation
Exportation et partage d’un prototype
Collaboration entre utilisateurs, développeurs et designers
Exemple de cas pratique : réalisation d’un prototype interactif de l’application mobile et simulation
d’une présentation

Notre charte qualité et éthique.

A travers sa Charte Engagement Qualité, Sparks s’engage à tout mettre en œuvre pour que chaque session de formation soit un succès et que votre satisfaction soit totale.

Amandine de Sparks
Des chiffres étincelants.
19 années
à vos côtés
+ de 1000
sujets de formation
8155
stagiaires formés en 2023
238
formateurs actifs en 2023
97,9%
de stagiaires satisfaits
24622
heures de formation réalisées en 2023
HAUT