La formation en détail

Objectifs

• Maîtriser les bases de l’outil
• Réaliser des wireframes
• Réaliser des maquettes UI
• Dynamiser les maquettes en prototype simple

Programme

MODULE 1

A. Découverte de figma

• Tour de table
• Les origines de Figma et des logiciels de création d’interfaces
• Les grands principes de conception sur écran :
• Lois de la Gestalt
• Les critères heuristiques de Nielsen
• Les résolutions et définitions
• Figma pour qui ? pour quoi ?
• Découverte de l’interface Figma :
  • Les outils : formes, frames, Grid, Calques, Texte
  • Les paramétrages
  • Le vocabulaire

B. Créer son premier wireframe simple et bien structuré

• Le but d’un wireframe
• Les outils simples :
  • Formes : créer des formes simples et complexes, fill, stroke, combinaisons, etc
  • Frames : disposition, taille, espacement éléments, etc
  • Grid : plan de travail multi-dimension, règles et grid
  • Calques : attributs, modification et action (rotation, scale, alignements, etc…)
  • Texte : taille, espace inter caractères / ligne, fill, etc
• Les raccourcis clavier à connaître
• La gestion des couleurs

Exercice pratique : Créer plusieurs écrans wireframe d’application 
Objectifs Opérationnels : Faire connaissance avec l’outil, comprendre ces fonctions de bases, créer ses premiers éléments design
Moyen d’évaluation : QCM

---

MODULE 2
A. Les bases de l’UI

• Les bases de la direction artistique :
  • La couleur
  • La typographie
  • L’iconographie
  • Les angles
  • Grille et espaces

B. Dynamiser ses maquettes

• Les bases de l’auto-layout
• Les bases des styles
• Les bases des composants

C. Prototypage simple

• Les bases du prototypage
• Paramétrage du prototype
• Navigation au clic
• La création d’overlays

Exercice pratique : Transformer les écrans wireframe en prototype UI animé
Objectifs Opérationnels : Faire connaissance avec l’outil, comprendre ces fonctions de bases, créer ses premiers éléments design
Moyen d’évaluation : QCM

Pré-requis

Débutant