Figma - avancé

Objectifs

- Comprendre et maîtriser les variables
- Créer et manipuler des composants complexes
- Concevoir des interfaces responsives
- Optimiser et structurer le travail de design
- Améliorer la collaboration et la transmission du travail de design
- Gérer des librairies partagées et optimiser son workflow
- Créer des prototypes animés et avec variables et conditions

Programme de la formation

Jour 1 : Maîtriser les variables
- Créer les fondations de son Design System en créant et utilisant des variables
- Structuration du travail de Design : appréhender les conventions de nommage.
- Utilisation de Librairies Partagées : Comprendre les avantages et les inconvénients de One library vs Split libraries. Être capable de créer sa librairie from scratch, gérer une librairie existante.
- Scinder une librairie en 2 : Déplacer des éléments d'une librairie à une autre sans casser les liens dans ses fichiers design
- Administration d'une équipe dans Figma : gestion des droits, partage et autorisations, identification des points de vigilance.
Jour 2 : Structuration et techniques avancées
- Conception Responsive : développer une compréhension approfondie des Auto-layouts et des Constraints pour une conception responsive efficace.
- Variants : maîtriser les bonnes pratiques lors de la création de ses variants
- Components properties : définir des propriétés à ses composants (text, boolean,swap)
- Interactive components : appliquer des comportements interactifs à ses variants
- Collaboration et Transmission du Travail de Design : Apprendre à collaborer efficacement à travers le feedback et les Design Critique, ainsi que les intégrations dans Figma.
- Optimisation du Workflow dans Figma : Maîtriser des astuces, raccourcis et plug-ins pour optimiser le workflow dans Figma.
- Introduction au Dev Mode et bonne pratiques designers / devs : S'initier aux meilleures pratiques pour une collaboration efficace entre designers et développeurs.
Jour 3 : Prototypage
- Maîtriser l'interpolation d'image : Comprendre et maîtriser Smart Animate pour créer des animations dans ses prototypes.
- Prototyper en utilisant les variables : utiliser les variables dans ses prototypes (text, number, boolean)
- Utiliser les Multiple actions et Conditionals : gérer des résultats multiples ou différents au sein d'une même interaction. Multiple actions : Empilez un nombre illimité d'actions sur le même déclencheur. Conditionals : Vérifier si une condition est remplie avant d'effectuer une action en utilisant une instruction conditionnelle if/else.

Validation et sanction

Attestation de formation

Type de formation

Non certifiante

Sortie

Sans niveau spécifique