JOUR 1 : INTRODUCTION FIGMA & ATOMIC DESIGN
__ Matin __
Introduction
- Décrire le logiciel Figma et ses principaux usages
- Identifier les fonctionnalités phares
- L’interface Figma
- Les raccourcis
- Les préférences / paramètres
Design d’interface
- Définir l’atomic design (comprendre les principes de l’atomic design )
- Créer des interfaces avec des frames, calques, masques et éléments vectoriels et matriciels (images)
- Générer des effets graphiques
- Gérer la mise en page : ajouter et agencer des titres, des paragraphes et des styles
Mise en pratique & évaluation des connaissances 1/4
__ Après-midi __
Créer une interface selon les principes de l’atomic design
- Prise de connaissance du projet fil rouge
- Créer des composants (atomes / molécules / organismes)
- Reproduire une interface du projet fil rouge sur la base de l’atomic design (concevoir)
Q&A + évaluation des connaissances 2/4
_____________________________________
JOUR 2 : MÉTHODOLOGIE & PROTOTYPAGE DU PROJET FIL ROUGE
__ Matin __
Optimiser sa méthodologie de conception d’interfaces
- Mettre en place l’architecture d’un projet et l’interface finale
- Mettre en place des grilles & des styles
- Prendre en compte le responsive design
Savoir utiliser un design system, les librairies et les plugins (aperçu)
- Ajouter et gérer des librairies partagées par plusieurs documents
- Organiser et nommer ses composants
- Profiter des ressources et modèles externes (plugins)
Mise en pratique & évaluation des connaissances 3/4
__ Après-midi __
Créer un prototype
- Créer des connexions entre les différents écrans
- Maîtriser les différentes possibilités d’interactions et d’animations
- Ajouter des liens externes
Exporter et partager son projet Figma
- Exporter ses écrans en fichiers (pdf, jpg…) & les éléments de production (code et assets)
- Visionner ses écrans sur un mobile
- Partager ses écrans et prototypes
Mise en application sur le projet fil rouge
Q&A + évaluation des connaissances 4/4