A l'issue de cette formation, vous serez capable de :

• Créer des designs d'interfaces d'applications mobiles et de sites Web
• Appliquer les bonnes pratiques de la conception d'interfaces
• Travailler efficacement en équipe avec les outils collaboratifs
• Prototyper et tester des interfaces interactives
• Partager et exporter des projets pour les développeurs et les clients.

Jour 1

Introduction

• Qu'est-ce que Figma ?
• Les atouts et les enjeux
• Les logiciels de la création d'interface
• Les principes du design atomique
• Le design system
• Les dernières actualités du logiciel

Découvrir l'interface Figma

• Créer une Team et un projet
• Gérer les fichiers et les projets
• La barre de menu et panneau de propriété
• Créer des frames, des groupes et des sections
• Créer et organiser les calques

Exemple de travaux pratiques (à titre indicatif)

• Découvrir l'interface du logiciel

Manipuler les fonctionnalités de base

• Créer des frames
• Créer des formes vectorielles
• Importer et modifier des icônes
• Appliquer des couleurs et des effets
• Importer des images et des vidéos

Exemple de travaux pratiques (à titre indicatif)

• Créer des frames utilisant les fonctionnalités de base

Les styles et librairies

• Créer et éditer des styles de grilles et de textes
• Créer et éditer des styles de couleurs et d'effets
• Publier et gérer une librairie d'éléments UI
• Importer des librairies de kits UI (Material Design, iOS)

Designer une interface

• Créer des frames d'interface mobile (exemples : Launch Screens, Login)
• Mettre en place des grilles et des repères
• Gérer les contraintes de redimensionnement
• Utiliser les auto-Layouts

Créer des composants simples

• Créer et éditer les instances
• Créer des composants imbriqués

Exemple de travaux pratiques (à titre indicatif)

• Créer des composants simples

Prototyper

• Découvrir les caractéristiques des intéractions (déclencheur, action, animation)
• Utiliser les déclencheurs (After delay, On tap, While Hovering)
• Utiliser les actions (Navigate to, Overlay, Scroll to)

Exemples de travaux pratiques (à titre indicatif)

• Créer des interactions simples, les frames

Jour 2

Créer des composants avancés

• Créer des composants avec des variantes
• Manipuler les propriétés des composants
• Réaliser des composants interactifs

Exemples de travaux pratiques (à titre indicatif)

• Créer des composants : boutons avec des différents états
• Créer des composants : cards, header, form

Prototyper - Suite

• Utiliser les transitions Smart Animate
• Paramétrer et visualiser le prototype
• Visualiser sur l'application Figma Mirror

Exemple de travaux pratiques (à titre indicatif)

• Créer des interactions entre les frames

Collaborer et partager

• Gérer les droits d'accès (view, comment, edit)
• Sécuriser et partager le design et le prototype
• Commenter les designs

Collaborer avec les développeurs

• Découvrir le Dev Mode
• Inspecter les éléments (assets et codes)

Optimiser le workflow

• Installer les plug-ins pour améliorer la productivité
• Appliquer une bonne convention de nommage
• Epingler les fichiers dans vos projets

Présentation des nouvelles fonctionnalités de Figma

• Les principes des variables dans la conception
• Les tokens et les modes

Exemples de travaux pratiques (à titre indicatif)

• Créer des variables (color, string, number, boolean)
• Appliquer des variables à un composant
• Atelier : conception d'une interface
• Réaliser une interface Web ou un mobile à partir d'une bibliothèque d'éléments UI
• Créer des contenus Responsive
• Créer un prototype interactif
• Préparer le fichier pour l'exportation et intégration des assets
• Visualiser et tester le prototype
• Partager le prototype
• Présentation du prototype en fin de journée