Formation Figma

Préambule et prise en main de Figma

• Présentation de Figma
• Création d’un compte et les divers forfaits
• Les 2 types de fichiers : Design File et FigJam File
• Découverte de l’interface et des raccourcis clavier
• Découvrir les divers outils
• Le panneau de configuration de gauche : calques et composants
• Le panneau de configuration de droite : onglet design et onglet prototype

CRÉER SA PREMIÈRE MAQUETTE DYNAMIQUE

Les démarches avant-projet

• Premier rendez-vous client : croquis sur papier
• Création du cahier des charges et spécifications fonctionnelles

Préparer son fichier Figma

• Choisir une équipe et créer son projet (un seul avec la version gratuite)
• Créer un fichier Design File (3 fichiers avec la version gratuite)
• Créer 3 pages : Charte graphique – Wireframe – Maquette

Charte graphique

• Création d’un moodboard et installation d’un premier plugin
• Créer la palette des couleurs et ajouter les premiers styles
• Choisir les polices de caractères et les ajouter aux styles
• Importer un logo et créer un frame
• Exporter la charte graphique au format PDF

Wireframe

• Découvrir les kits et la communauté Figma pour accroitre sa productivité
• Distinguer les différents éléments dans les calques : composants, instances…
• Utiliser les grids pour harmoniser la composition
• Comprendre et paramétrer l’auto layout

Maquette dynamique

• Utiliser les assets et les styles créées en amont
• Créer la barre de navigation et ajouter des icônes
• Créer et regrouper les composants
• Importer des images
• Gérer les contraintes
• Ajouter des variants à un composant
• Découvrir et installer divers plugin
• Créer des animations
• Partager la maquette dynamique