Formation Figma : Concevoir des maquettes UX/UI à l'aide du logiciel Figma

Dédié à la conception d'interfaces et d'écosystèmes applicatifs, le logiciel Figma se distingue par la capacité qu'il offre à travailler avec des équipes sur des projets grâce à des modifications en temps réel via un navigateur web. Qu'il s'agisse de créer des sites web, des applications ou des interfaces utilisateurs, Figma a été conçu dans l'esprit d'un Design System, partageable par une équipe de designers.

Initialement lancé en 2016, l'outil se positionne aujourd'hui comme un concurrent direct de Skecth et d'Adobe XD. Cette formation Figma vous apprendra à identifier et à utiliser les différents outils proposés par Figma afin de pouvoir l'utiliser en toute autonomie.

Objectif opérationnel :

Savoir concevoir des maquettes UX/UI à l'aide du logiciel Figma.

Objectifs pédagogiques :

À l'issue de cette formation Figma, vous aurez acquis les connaissances et compétences nécessaires pour :

• Identifier et utiliser les outils de Figma
• Designer des formes pour des interfaces web/app
• Savoir construire des fichiers
• Savoir exporter et partager vos projets UX/UI Design

Public :

Ce cours Figma s'adresse aux graphistes, webdesigners, UI Designer, UX Designer, chefs de projet et plus globalement à toute personne devant utiliser Figma dans le cadre de la conception et création d'interface.

Prérequis :

Aucun préquis technique n'est nécessaire pour suivre cette formation. Tout au plus est-il conseillé d'avoir une bonne connaissance du web et de maîtriser son environnement informatique.

Découvrir Figma

Décrire le logiciel Figma et ses principaux usages : illustration vectorielle, UX Design (wireframe), UI Design
Identifier les fonctionnalités phares du logiciel Figma, ses spécificités par rapport aux autres solutions
Découvrir les dernières actualités du logiciel Figma

Prendre en main le logiciel Figma

Nommer et explorer les différentes zones de l’interface Figma
Connaître les conventions d’usage dans les outils de design
Mémoriser les raccourcis principaux
Ajuster les préférences

Designer des formes pour des interfaces web/app

Créer des espaces de travail (frames) et des calques
Insérer des formes prédéfinies, créer des formes personnalisées
Sélectionner, positionner, transformer, supprimer des éléments : taille, couleurs fond et contours, dégradés, motifs, transformation, rotation…
Ajouter des effets : ombre interne ou externe, flou
Maîtriser et modifier les courbes de Bézier
Utiliser les opérations booléennes (union, subtract, intersect, exclude)
Utiliser les masques
Ajouter et agencer des titres, des paragraphes
Importer et éditer des éléments vectoriels (logo, icône, illustration…) et matriciels (image)

Acquérir une méthodologie optimisée dans la construction de fichiers .fig

Organiser son projet de l’UX à l’UI : web design vs app mobile
Acquérir une bonne convention de nommage (fichiers, pages, frames, calques, styles, composants…)
Mettre en place des grilles (grid, columns, rows) et des repères
Mettre en place des styles de forme, de texte, d'effets, de grille partagés
Créer des composants et exploiter les fonctionnalités de l’override (textes, images, composants imbriqués)
Exploiter les contraintes de redimensionnement
Ajouter et gérer des librairies partagées par plusieurs documents
Organiser ses composants
Profiter des ressources et modèles externes spécifiques à Figma
Profiter des plugins et services complémentaires indispensables spécifiques à Figma

Créer un prototype avec des animations de transition

Définir la première frame du prototype
Créer des connexions entre les différents écrans
Maîtriser les différentes possibilités d'interactions et d'animations
Ajouter un lien externe

Exporter et partager son projet Figma

Visionner ses écrans sur un mobile
Exporter ses écrans en fichiers pdf, jpg et png
Partager ses écrans sur le cloud
Exporter les éléments pour la production (code et assets)