Figma - niveau 1

Objectifs

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.

Programme de la formation

Maquetter avec Figma

• Premier pas dans l'UI Design
  
  
  
  • Présentation des métiers de la production web : UI Design, UX Design, Intégration HTML/CSS et Javascript
  
  
  • Découverte des composants d'interface
  
  
  
  


• Découverte de l'Atomic Design
  
  
  
  • Introduction à l'Atomic Design
  
  
  • Différencier les éléments de type atomes, molécules et organismes
  
  
  • Découvertes des outils pour concevoir en Atomic Design
  
  
  
  


• Maquettage d'une page web
  
  
  
  • Premier pas sur Figma
  
  
  • Principes de la mise en page : Direction, Padding, Espacement, Alignement
  
  
  • Découverte de la base 4
  
  
  • Mise en place d'une grille
  
  
  • Découverte de l'auto-layout
  
  
  • Création du guide de styles
  
  
  • Création des premiers composants UI (atomes, molécules et organismes)
  
  
  
  

• Conception en responsive design
  
  
  
  • Comprendre les différentes grilles responsive : Grille statique, Grille fluide, Grille adaptative, Grille responsive
  
  
  • Création d'un responsive design fluide
  
  
  • Mise en place des bonnes pratiques pour les projets ambitieux
  
  
  
  


• Prototypage et animation
  
  
  
  • 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
  
  
  • Exemples de micro-interactions efficaces
  
  
  • Les règles à respecter pour la création de micro-intéractions
  
  
  
  


• Export et partage
  
  
  
  • Apprendre à collaborer avec les autres designers
  
  
  • Apprendre à collaborer avec les développeurs (utilisation du Dev Mode)
  
  
  
  


• Plugins et Community
  
  
  
  • Découverte des plugins Figma
  
  
  • Aller plus loin avec les fichiers de la Community Figma
  
  
  
  

Validation et sanction

Attestation de formation

Type de formation

Non certifiante

Sortie

Sans niveau spécifique