Figma : concevoir des maquettes et des prototypes collaboratifs Mixte : présentiel / à distance

En matière d'UI Design, Figma s'est imposé ces dernières années comme un standard indétrônable des outils collaboratifs de prototypage de produits digitaux. 

Poussant la collaboration à son plus haut niveau, Figma permet aux Designers, POs, PM, développeurs et utilisateurs finaux, de concevoir et travailler en même temps sur leur produit digital.

Conçue et animée par des experts et expertes OCTO Technology du design d'interface, cette formation est majoritairement basée sur la pratique de l'outil pour une prise en main rapide et efficace. 

En réalisant des maquettes graphiques animées, chaque stagiaire sera capable de concrétiser ses idées de solution pour collaborer au sein de son équipe et recueillir des feedbacks utilisateurs sur son produit.

À l'issue des deux jours, l'accent sera mis sur la réalisation d'un prototype interactif et animé sur la base des maquettes conçues par chaque stagiaire.

• Identifier les possibilités offertes par Figma aux différentes étapes de la conception d'un produit digital
• Appréhender l'environnement Figma et ses principales fonctionnalités
• Concevoir des maquettes fonctionnelles et graphiques de qualité
• Réaliser un prototype interactif pour une démonstration ou un test utilisateurs
• Déployer rapidement un parcours expérientiel pour effectuer des tests utilisateur
• Gagner un temps précieux en utilisant les librairies partagées et les ressources mises en ligne par la communauté Figma

• UX / UI / Product Designer ne connaissant pas ou peu Figma.
• UX / UI / Product Designer connaissant Figma et souhaitant maîtriser le logiciel
• Graphiste / Directeur artistique / Web designer souhaitant prendre en main ce logiciel
• PO, PM, développeur, équipe marketing, étant amenée à modifier et créer des maquettes avec Figma

Avoir des notions en design d'interfaces.

Avoir une bonne maîtrise des outils standards de création graphique.
Posséder un compte Figma (la version gratuite suffit pour les mises en pratique déroulées lors de la formation).

Cette formation est dispensée par un·e ou plusieurs consultant·es d'OCTO Technology ou de son réseau de partenaires, expert·es reconnus des sujets traités.

Le processus de sélection de nos formateurs et formatrices est exigeant et repose sur une évaluation rigoureuse leurs capacités techniques, de leur expérience professionnelle et de leurs compétences pédagogiques.

L'évaluation des acquis se fait tout au long de la session au travers des ateliers et des mises en pratique.

Afin de valider les compétences acquises lors de la formation, un formulaire d'auto-positionnement est envoyé en amont et en aval de celle-ci.

En l'absence de réponse d'un ou plusieurs participants, un temps sera consacré en ouverture de session pour prendre connaissance du positionnement de chaque stagiaire sur les objectifs pédagogiques évalués.

Une évaluation à chaud est également effectuée en fin de session pour mesurer la satisfaction des stagiaires et un certificat de réalisation leur est adressé individuellement.

Jour 1

OUVERTURE DE SESSION

• Accueil des stagiaires et tour de table des attentes
• Présentation du déroulé de la formation

INTRODUCTION À FIGMA

• Utilisation de Figma tout au long du processus de conception
• Principes basiques en UI design

FAIRE SES PREMIERS PAS AVEC FIGMA

• Présentation de l'interface (pages, layers, assets, librairies, bottom bar, volets design et prototypes)
• Présentation des styles de couleurs et des textes
• Bonnes pratiques de Figma (organisation des fichiers et des pages, raccourcis claviers et plugins complémentaires)
• Mise en pratique : "Créer ses premières feuilles de style"

VARIABLES

• Présentation des variables
• Utilisation des modes pour gagner en efficacité
• Mise en pratique : "Créer ses variables"

FRAMES, GROUPS ET AUTO LAYOUTS

Frames et groups

• Présentation des frames et des groupes : utilisation et propriétés
• Gestion de la position des éléments grâce aux contraintes
• Mise en pratique : "Tester les contraintes"

Auto layouts

• Définition du padding, du spacing, des margins
• Présentation des auto layouts
• Paramétrage des auto layouts selon les cas d'usages
• Mise en pratique : "Construire une carte complexe responsive avec l'auto layout"

Jour 2

Rappel des fonctionnalités clés abordées lors de la journée précédente

LES COMPOSANTS

• Définition d'un composant et des instances
• Présentation de propriétés (variants, booleans, instance swap, text property)
• Mise en pratique : "Créer un composant et lui attribuer des propriétés"

LE PROTOTYPE

• Choix du device et du format
• Création et paramétrage des interactions entre les différents composants
• Prise en main des outils d'animation
• Composants parents et composants interactifs : intérêts et cas d'usages
• Mise en pratique : "Créer son premier prototype"

MISE EN PRATIQUE : CRÉATION D'UN PROTOTYPE DE PARCOURS D'ONBOARDING

• Conception de différentes pages d'onboarding, d'une page d'accueil et d'un menu, à partir de wireframe prédéfinis
• Utilisation de toutes les fonctionnalités et application des bonnes pratiques fonctionnelles et UI
• Animation du prototype
• Présentation des travaux et échanges en groupe

CONCLUSION

• Revue des concepts clés abordés sur les deux journées
• Séance de questions et réponses
• Clôture de la session