Formation Figma Initiation

Programme de notre formation Figma Initiation

[Jour 1 – Matin]

Premiers pas dans l’UI Design et découverte de Figma

• Comprendre les métiers autour de l’UI Design : UI designer, UX designer, product designer, intégrateur et développeur front-end
• Découvrir la suite Figma : Figma Design, FigJam, Dev Mode, Community et plugins
• Prendre en main l’interface de Figma Design : fichiers, pages, frames, calques, panneaux et outils principaux
• Manipuler les formes, les outils vectoriels, les groupes, les frames et les premiers éléments d’interface
• Créer un premier style guide : couleurs, typographies, grilles, espacements et principe de base 4
• Atelier pratique : créer des grilles Desktop et Mobile, manipuler les shapes et vectors, puis concevoir des icônes simples dans Figma

[Jour 1 – Après-midi]

Auto-layout, espacements et contraintes

• Comprendre le rôle de l’auto-layout dans la conception d’interfaces modernes
• Manipuler les propriétés d’auto-layout : direction, alignement, gap, padding, hug contents et fill container
• Construire des containers adaptatifs et des éléments de remplissage cohérents
• Gérer les contraintes à l’intérieur d’un container parent : left, top, center, scale et redimensionnement
• Structurer des listes, cartes et éléments répétables avec des paddings homogènes
• Atelier pratique : créer des boutons adaptatifs, des containers responsives et des listes structurées avec auto-layout et paddings

Composants, Atomic Design et premiers éléments réutilisables

• Comprendre les principes de l’Atomic Design : atomes, molécules, organismes, templates et pages
• Créer ses premiers composants Figma et comprendre la logique d’instances
• Utiliser les variants, propriétés de composants et états simples
• Structurer une bibliothèque d’éléments UI réutilisables et maintenables
• Appliquer les styles de couleurs, typographies, radius et effets aux composants
• Atelier pratique : concevoir un formulaire complet avec text field, textarea, bouton, alert message et variantes de composants

[Jour 2 – Matin]

Composants complexes et organisation d’un fichier Figma

• Créer des composants complexes à partir d’éléments simples et réutilisables
• Organiser les pages, frames, sections, calques et composants dans un fichier Figma professionnel
• Approfondir les styles : typographies, couleurs, shadows, radius, espacements et hiérarchie visuelle
• Construire une interface cohérente à l’échelle d’une page complète
• Appliquer les bonnes pratiques de nommage, rangement et documentation du fichier
• Atelier pratique : créer une page de blog avec plusieurs articles, composants réutilisables et styles graphiques harmonisés

[Jour 2 – Après-midi]

Responsive Design et adaptation mobile

• Comprendre les principes du responsive design dans Figma
• Adapter une interface Desktop vers un format Mobile en conservant la cohérence visuelle
• Utiliser l’auto-layout, les contraintes et les grilles pour faciliter les adaptations responsive
• Identifier les différences entre grille fixe, fluide, adaptative et responsive
• Optimiser la lisibilité, les espacements et la hiérarchie des contenus sur mobile
• Atelier pratique : transformer la page de blog Desktop en version Mobile avec auto-layout, contraintes et composants réutilisables

Prototypage, micro-interactions et collaboration

• Créer un prototype interactif avec navigation entre pages, liens, transitions et interactions au clic
• Concevoir différents états de composants : hover, actif, checkbox, toggle, message et pop-up
• Découvrir les micro-interactions : déclencheurs, feedback, délais, animations et comportements utilisateurs
• Utiliser les interactions avancées comme after delay, overlays, splash-screen et modales simples
• Collaborer efficacement avec les designers et développeurs grâce au partage, aux commentaires et au Dev Mode
• Atelier pratique : prototyper un parcours complet avec navigation, états de composants, pop-up, after delay et préparation au partage développeur