Figma : réaliser le prototypage ou la maquette graphique de ses interfaces utilisateur Mixte : présentiel / à distance

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

Reprenant les grands principes des principaux logiciels de création graphique, Figma permet aux designers de simuler l'expérience utilisateur de leurs produits ou services numériques, tout en facilitant la collaboration avec les autres membres de l'équipe produit.

Durant deux jours, au côté des experts OCTO Technology du design d'interface, l'accent sera mis sur la prise en main de l'environnement Figma et de ses grandes fonctionnalités, au travers de différents exercices, afin de faciliter le processus de création et valider l'orientation de son produit grâce à des prototypes complets.

• Découvrir l'UI design et sa place dans le processus de création d'un projet
• Appréhender l'environnement Figma et ses principales fonctionnalités
• S'approprier les outils de création de composants (Frames, groups, auto layouts)
• Personnaliser ses composants et les organiser pour se créer une bibliothèque réutilisable
• Créer un prototype interactif complexe à partir d'une page blanche
• Déployer rapidement un parcours expérientiel pour effectuer des tests utilisateur

• Designer ne connaissant pas ou peu Figma.
• Designer connaissant Figma et souhaitant maîtriser le logiciel
• Graphiste / Directeur artistique / Web designer souhaitant prendre en main ce logiciel
• Toute personne s'intéressant à l'UI design et à Figma et étant amenée à l'utiliser.

Avoir des notions en design d'interfaces.

Avoir une bonne maîtrise des outils standards de création graphique.

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

RAPPEL SUR LES BASES DE L'UI DESIGN

• Définition du design d'interface
• Présentation des grands principes régissant la discipline
• Clarification de la place qu'occupe l'UI dans une approche orientée produit
• Partage par les experts OCTO des bonnes pratiques de l'UI design

FAIRE SES PREMIERS PAS AVEC FIGMA

• Introduction à Figma
• Présentation de l'interface
• Focus sur les principales fonctionnalités de Figma
• Mise en pratique : “Créer ses premières feuilles de style”
• Bonnes pratiques de Figma présentées par les experts OCTO (raccourcis et plugins complémentaires)

FRAMES, GROUPS ET AUTO LAYOUTS

Frames et groups

• Présentation des frames : utilité et création
• Cas d'usages et avantages des frames et groups
• Gestion de la position des éléments dans une frame grâce aux contraintes
• Mise en pratique : "Manipuler un composant pour en comprendre les contraintes qui le régissent"

Auto layouts

• Présentation des auto layouts : utilité et création
• Paramétrage selon les cas d'usages
• Mise en pratique : “Manipuler une frame pour paramétrer ses règles d'application d'auto-layout”

REVUE DES CONCEPTS CLÉS ABORDÉS LORS DE LA JOURNÉE

Jour 2

LES COMPOSANTS

• Présentation des assets et de la bibliothèque de composants
• Clarification de ce qui définit un composant
• Les principales fonctionnalités de création de composant
• Mise en pratique : “Créer un composant de type bouton”
• Personnalisation d'un composant grâce aux propriétés
• Définition des variations de ses composants : états, comportements
• Nomenclature et librairie externe
• Mise en pratique : “Importer des composants d'une source externe”

LE PROTOTYPE

• Simulation du comportement de ses éléments sur différentes résolutions d'écran
• Création et paramétrage des interactions entre ses différents composants
• Prise en main des outils d'animation des composants
• Composants parents et composants interactifs : intérêts et cas d'usage
• Mise en pratique : ”Créer son premier prototype”

CRÉATION D'UNE PAGE D'ONBOARDING

• Conception d'une landing page, à partir d'un wireframe prédéfini, en appliquant les différents concepts vus sur l'ensemble des modules
• 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