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 incontournable des outils collaboratifs de conception et de prototypage de produits digitaux. En plaçant la collaboration au cœur de son approche, Figma permet aux designers, product owners, product managers, développeurs et utilisateurs finaux de concevoir et de travailler simultanément sur un même produit digital.

Conçue et animée par des experts et expertes OCTO Technology en design d'interface, cette formation, résolument orientée vers la pratique, permet une prise en main rapide, concrète et efficace de l'outil. Les participants apprendront non seulement à maîtriser les fondamentaux de Figma, mais aussi à exploiter ses fonctionnalités avancées, dont Figma Make, l'IA intégrée de Figma.

Dans le cadre de la formation, Figma Make sera utilisé comme un levier d'accélération et d'exploration, notamment pour la création de prototypes interactifs et la déclinaison d'écrans clés. Il permettra de générer, enrichir et itérer plus rapidement sur les parcours utilisateurs et les interactions.

À travers la réalisation de maquettes graphiques animées, chaque stagiaire pourra concrétiser ses idées, collaborer efficacement au sein d'une équipe et recueillir des retours utilisateurs pertinents sur son produit.

À l'issue des deux jours de formation, l'accent sera porté sur la conception d'un prototype interactif et animé, intégrant le travail de design mené par chaque stagiaire ainsi qu'une utilisation pertinente de l'IA de Figma au service de l'expérience utilisateur.

• Identifier et expliquer les possibilités offertes par Figma à chaque étape du processus de conception d'un produit digital.
• Utiliser l'environnement Figma et appliquer ses fonctionnalités essentielles pour créer des supports de conception.
• Concevoir et structurer des maquettes fonctionnelles et graphiques en respectant les bonnes pratiques de l'UI design.
• Formuler et tester des prompts efficaces avec Figma Make afin de générer, décliner et enrichir des interfaces lors d'un exercice pratique.
• Réaliser et optimiser un prototype interactif et animé, adapté à une démonstration ou à des tests utilisateurs.
• Mettre en œuvre plus rapidement des parcours expérientiels, grâce aux librairies partagées et aux ressources de 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 de design d'interfaces.
• Maîtriser des outils standards de création graphique.
• Connaître les notions de base en accessibilité numérique.
• Posséder un compte Figma (la version gratuite est suffisante pour les exercices pratiques 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)
• Bonnes pratiques de Figma (organisation des fichiers et des pages, raccourcis claviers et plugins complémentaires)

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
• Prise en main de Figma Make (présentation de l’outil, bonnes pratiques, rédaction de prompt)
• Déclinaison d’écrans du prototype avec Figma Make
• Animation du prototype sur Figma Make
• Présentation des travaux et échanges en groupe

CONCLUSION

• Revue des concepts clés abordés sur les deux journées
• Séance interactive de questions-réponses pour clarifier et approfondir les points abordés
• Clôture de la session et perspectives pour la mise en pratique