Formation Figma : niveau 1
Concevoir et réaliser des prototypes d'interfaces interactives
Le design UX/UI est aujourd’hui une étape incontournable de la conception web. Ces dernières années, les outils de design d’interface ont considérablement évolué, devenant plus simples d’utilisation, plus performants et surtout plus adaptés aux besoins des professionnels : création de prototypes interactifs, gestion du responsive design, ajout d’animations, génération de code, CSS, industrialisation de la déclinaison graphique, création de design system…
Figma répond à toutes ces attentes et bien plus encore, faisant de Figma l’un des leaders sur le marché des outils de design d’interface.
Que vous soyez graphiste, directeur artistique, chef de projet, product owner ou encore développeur web : développez vos compétences en design d’interface et gagnez en productivité avec notre formation "Figma : niveau 1" d'une durée de deux jours.
- Définir le rôle de Figma dans la conception ergonomique
- Concevoir des livrables opérationnels pour le web : maquettes graphiques responsive, librairie de composants, prototype interactif
- Partager son travail avec les parties prenantes d’un projet web
- Maîtrise de l’Atomic Design
- Maîtrise de Figma
- Maquettage de pages web en responsive design
- Création d’une librairie de composants
- Prototypage et création de micro-interactions
- Partage de livrables exploitables aux développeurs
- Graphistes, designers et directeurs artistiques souhaitant se former au design d’interface
- Chefs de projet et développeurs web souhaitant améliorer leur productivité et leur collaboration avec les designers d’interface
- Avoir une bonne connaissance web
- Avoir une expérience en conception, développement ou gestion d’un projet web
- Avoir une sensibilité au graphisme et à l’ergonomie
Maquetter avec Figma
- Premier pas sur Figma
- Présentation des métiers de la production web
- Découverte de la suite d’outils Figma
- Prise en main des fonctionnalités de base de Figma
- Créer un guide de style
- Utiliser les styles de Figma
- Mettre en place les propriétés : couleurs, typographies, grilles et les espacements
- Maquettage d’une page web
- Principes de la mise en page : Direction, Padding, Espacement, Alignement
- Découverte de l’auto-layout
- Création d'une bibliothèque de composants
- Introduction à l’Atomic Design
- Création des premiers composants UI (atomes, molécules etorganismes)
Responsive et prototypage
- Conception en responsive design
- Comprendre comment fonctionne le responsive
- Création d’une section responsive
- Prototypage
- Découvertes des différents états des composants
- Comprendre les caractéristiques des micro-intéractions : le déclencheur, les règles, le retour d’information, les boucles et modes
- Les règles à respecter pour la création de micro-intéractions
- Prendre en main l’outil Figma Make
- Méthodologie et Collaboration :
- Organiser son fichier Figma efficacement
- Exporter et partager des ressources ou des fichiers
- Apprendre à collaborer avec les autres designers
- Apprendre à collaborer avec les autres designers
- Plugins et Community
- Découverte des plugins Figma
- Exploitation des ressources de la communauté Figma
Plusieurs dispositifs de financement sont accessibles via les OPCO (Opérateurs de Compétences), organismes agréés par le ministère du Travail dont le rôle est d’accompagner, collecter et gérer les contributions des entreprises au titre du financement de la formation professionnelle.
Pour plus d’information, une équipe de gestionnaires SKOLAE Formation spécialisée vous accompagne dans le choix de vos formations et la gestion administrative.
Modalités d'évaluation - évaluation en 3 phases :
Pendant la formation : un bilan journalier effectué par l'intervenant.
À chaud : à la fin de la formation, un bilan qualité pour mesurer l’atteinte des objectifs.
À froid : à J + 3 mois, une évaluation du transfert des acquis en situation professionnelle.
Matériel et logiciels nécessaires pour suivre cette formation :
Formation en présentiel : les ordinateurs sont équipés des logiciels nécessaires au suivi de cette formation.
Formation en distanciel : il est recommandé de se munir d'un double écran. S'il y a lieu, des accès à Figma pourront être créés par Pyramyd et vous seront communiqués en formation.
Formation en intra-entreprise : il est recommandé de se munir d'un double écran. Installer Figma au préalable.
Équipe pédagogique et techniques pédagogiques :
Un consultant expert de la thématique et une équipe pédagogique en support du stagiaire pour toute question en lien avec son parcours de formation.
Alternance de théorie, de démonstrations par l’exemple et de mise en pratique grâce à de nombreux exercices individuels ou collectifs.
Exercices, études de cas et cas pratiques rythment cette formation.
Ressources pédagogiques :
Un support de formation présentant l'essentiel des points vus durant la formation et proposant des éléments d'approfondissement est téléchargeable sur notre plateforme.
L'outil indispensable pour les designers d'interfaces modernes est Figma. Depuis sa première version (en 2012), ce logiciel a vite pris la place de référence en matière de conception d'interfaces utilisateur grâce à ses fonctionnalités collaboratives et intuitives. Cet outil s'adresse aux graphistes, aux chefs de projet et même aux développeurs. La maîtrise de Figma permet d'optimiser son travail et d'améliorer la qualité des projets créés. Pourquoi est-il nécessaire d'utiliser Figma ? Et comment une formation dédiée peut vous aider à exploiter pleinement ses capacités ? La réponse, ci-après.
Investir dans une formation Figma pour optimiser vos compétences en design UI / UX
Figma s'impose clairement dans les logiciels de design à connaître dans le monde du travail. À tel point que l'entreprise a failli être rachetée par le géant Adobe, projet annulé depuis, pour des raisons de monopole. Au-delà de ça, cela montre notamment cette place importante que le logiciel prend, et qui oblige à se former pour bien le maîtriser. Il est nécessaire de suivre des formations complètes, telles que celle de PYRAMYD, qui permettent d'acquérir les compétences clefs sur cet outil de design. Avec ces nouvelles connaissances, il est possible de réaliser des maquettes bien plus pertinentes et efficaces, à travers de nombreux points. On peut intégrer des micro-interactions, réaliser des prototypes interactifs, ou avancer bien plus rapidement avec la collaboration en temps réel. Ces différents points ne sont pas à négliger dans le choix des outils à offrir en interne aux employés. Et ceux-ci doivent donc être formés pour les utiliser judicieusement.
Pourquoi Figma est-il indispensable pour les designers UI ?
Figma : un outil révolutionnaire pour les designers UI
Figma se distingue par son interface simple et par de puissantes fonctionnalités collaboratives. Ce logiciel permet aux équipes de travailler ensemble, en temps réel. Cela facilite grandement la création et la gestion de projets de design complexes. Les designers peuvent utiliser Figma pour créer des prototypes interactifs. Mais cela va jusqu'aux maquettes graphiques responsives, ou à des bibliothèques de composants.
Les avantages collaboratifs de Figma
L'un des plus grands atouts de Figma est donc sa facilité à la collaboration. Les équipes peuvent travailler simultanément sur le même fichier, ce qui élimine les contraintes liées aux multiples versions d'un même projet. Les développeurs, designers et autres acteurs peuvent partager et commenter le travail en temps réel. Cela optimise les flux de travail et la qualité du produit final in fine.
La création de prototypes interactifs
Avec Figma, créer des prototypes interactifs devient un jeu d'enfant. Cet outil permet de simuler les interactions et les transitions entre les pages d'une maquette de site web par exemple. Cela offre une vision claire du produit final, avant même de commencer le développement technique. Les fonctionnalités de prototypage de Figma aident à visualiser et à tester ces micro-interactions. Cela améliore ainsi l'expérience utilisateur et la conception globale du projet.
La gestion de bibliothèques de composants
Figma permet de gérer des bibliothèques de composants réutilisables. C'est essentiel pour maintenir la cohérence et l'efficacité dans les projets de design. Les composants peuvent être partagés entre différents projets. Cela simplifie les mises à jour des éléments graphiques. Ainsi, l'uniformité visuelle est assurée, à travers les différentes interfaces créées. C'est très utile dans le cas de l'application d'une charte graphique sur plusieurs pages d'un site Web. Ce ne seraient pas des plus cohérents d'avoir un bouton d'une couleur différente par page…
L'intégration avec d'autres outils
Figma s'intègre parfaitement avec d'autres outils populaires de design et de développement. C'est le cas d'Adobe et Sketch par exemple. Cette compatibilité assure une transition fluide et une collaboration sans heurts entre ces différentes plateformes. Quelque part, même si vous utilisez déjà d'autres logicielles, la transition peut se faire plus facilement. Cela optimise le flux de travail général et les pipelines de process. Les fonctionnalités d'export et d'import de fichiers rendent ainsi Figma extrêmement flexible et adaptable aux besoins spécifiques de chaque projet.
Les avantages professionnels de la maîtrise de Figma
Amélioration de l'efficacité et de la productivité
La maîtrise de Figma permet aux designers d'améliorer leur efficacité et leur productivité. Le logiciel propose une interface utilisateur intuitive. Elle facilite clairement la prise en main rapide, et ce même pour les débutants. L'utilisation de Figma permet aux designers de créer des maquettes graphiques et des prototypes interactifs très rapidement. Les fonctionnalités d'auto-layout et de responsive design aident à optimiser le processus de création, et donc la rapidité que l'on évoque. Cela permet de gagner du temps sur des tâches qui sont habituellement très répétitives. De plus, il est possible de créer et de gérer des bibliothèques de composants réutilisables comme nous l'évoquions plus tôt. Cela contribue à standardiser les éléments de design entre les maquettes d'un même projet d'ensemble. Cela réduit ainsi les erreurs de design et assure une cohérence visuelle à travers tous les projets.
Facilitation de la collaboration et de la communication
Figma transforme la manière dont les équipes de designer et de développement collaborent. Les fonctionnalités collaboratives en temps réel permettent aux membres de l'équipe de travailler simultanément sur le même fichier. Cela permet ainsi d'échanger des idées ou d'apporter des modifications instantanément. Cette capacité de partage en temps réel élimine des retards, potentiels, ou des malentendus souvent associés à la gestion des multiples versions de fichiers. Les commentaires intégrés et les annotations permettent une communication claire et directe. Pas besoin de détailler dans un mail le point que l'on souhaite faire changer, en expliquant bien l'élément à modifier. Là, le commentaire s'appose sur l'élément "indésirable", ce qui facilite la vie. Cela améliore la qualité du travail et accélère le processus de validation / rectification. Figma aide ainsi les équipes à rester alignées sur les objectifs du projet, et à livrer des produits de haute qualité plus rapidement. Par ailleurs, cela peut surprendre, mais cela contribue à la déconnexion des employés. Ceux-ci ne recevront pas multiples, mails, messages… pour obtenir des retours, mais simplement des commentaires sur leur travail dans Figma. Ils n'auront pas le besoin de répondre au mail en traitant rapidement les modifications demandées, mais naturellement, cela s'intègre à leur travail, directement sur leur outil phare.
Optimisation de la création de prototypes et de micro-interactions
Figma est particulièrement puissant pour la création de prototypes et de micro-interactions. Les designers peuvent utiliser cet outil pour simuler les comportements des utilisateurs et tester les interactions avant de commencer le développement. Cette fonctionnalité est indispensable pour identifier et résoudre les problèmes d'ergonomie et d'expérience utilisateur en amont. Cela évite ainsi des modifications coûteuses en phase de développement. Les prototypes interactifs, réalisés avec Figma donc, sont partageables avec les autres acteurs du projet. Cela permet d'ailleurs des démonstrations en direct. On a ainsi des retours immédiats et on peut ajuster le design en conséquence. Cette approche itérative améliore la qualité du design. Mais elle permet aussi de ne pas négliger l'engagement des parties prenantes tout au long du projet. Par ailleurs, ces fonctionnalités peuvent s'inscrire dans des méthodes courantes de travail en entreprise, type Agile. Celles-ci reprennent ce principe de méthode agile, où il s'agit plus de prototyper son travail au fur et à mesure, pour faire des retours rapides. On contrôle ainsi la trajectoire globale du concept, tout en se posant les bonnes questions au fur et à mesure pour savoir comment aller plus vite ou rendre des projets de meilleure qualité.
Valorisation des compétences sur le marché du travail
La maîtrise de Figma est clairement devenue une compétence recherchée sur le marché du travail. Tout le monde en parle, car de plus en plus de personnes l'utilisent. Les entreprises adoptent largement le logiciel, pour leurs projets de design. Elles reconnaissent les avantages des fonctionnalités collaboratives et de prototypage. Les designers ont ainsi tout intérêt à acquérir une expertise approfondie de Figma, pour améliorer leur productivité déjà. Mais cela servira aussi à augmenter la qualité de leur travail, tout en les rendant plus attractifs après de leur employeur. Les compétences en Figma sont un réel atout, donc, pour plusieurs profils. Cela concerne des designers UI et UX, assez logique, mais aussi les développeurs front-end. Si ceux-ci sont formés sur ce type d'outil, ils seront plus à même de faire des retours critiques et pertinents sur le travail de leurs collègues. En somme, investir dans une formation Figma peut donc ouvrir de nouvelles opportunités professionnelles. Et surtout, pour une utilisation au sein d'une entreprise, cela favorise la montée en compétences, et ainsi une progression de carrière rapide.