Figma - Niveau 1

Objectifs pédagogiques 

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

‍

JOUR 1

Découverte de Figma

• Les origines de Figma et des logiciels de création d’interfaces
• Les grands principes de conception sur écran
• Figma pour qui ? pour quoi ?
• Découverte de l’interface Figma (outils, pages, frames, calques, paramétrages, vocabulaire, etc…)

‍

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
• Gestion des couleurs

‍

Objectifs Opérationnels : Pouvoir être à l’aise avec l’interface, comprendre les fonctions de base, créer ses premiers éléments de design

‍

Moyen d’évaluation : Exercice pratique - Créer plusieurs écrans wireframe d’application mobile

‍

JOUR 2

Introduction au design d’interface UI

• Introduction au design d’interface UI :
• Les bases de la direction artistique
• La couleur
• La typographie
• L’iconographie
• Le “blanc”

‍

Dynamiser ses maquettes

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

‍

Prototypage simple

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

‍

Objectifs Opérationnels : Appréhender les bases du design d’interface et maîtriser les fonctions élémentaires de Figma

Moyen d’évaluation : Exercice pratique - Transformer les écrans wireframe en prototype UI

‍