Figma avancé, design system et passage au développement

$599.00

À grande échelle, la cohérence d’un produit repose sur un design system : des bibliothèques publiées, des variables et des thèmes, et une remise claire aux développeurs. Cette formation avancée d’une journée montre comment bâtir et entretenir un design system, puis préparer ses maquettes pour le développement à l’aide du Dev Mode. À l’issue du cours, le participant sait structurer un système cohérent et organiser la collaboration avec les développeurs.

6 h (1 jour), 100% en ligne

Session

Effacer

Description

Durée

6 h · 1 jour

Mode

100% en ligne

Participants

10 maximum

À qui s’adresse cette formation ?

Designers expérimentés, responsables de design ou de produit, et toute personne chargée de maintenir la cohérence d’un produit à l’échelle d’une équipe.

Prérequis : Maîtriser les composants, les variantes, les styles et l’Auto Layout. Une expérience de la conception d’interfaces complètes est nécessaire.

Ce qui distingue cette formation

Méthode pour bâtir un design system réutilisable
Utilisation des variables et des thèmes pour gérer la cohérence
Organisation des bibliothèques partagées en équipe
Remise aux développeurs structurée avec le Dev Mode
Petits groupes, avec travail sur un système concret

Objectifs de la formation

Permettre au participant de bâtir et d’entretenir un design system avec Figma. Développer sa capacité à organiser des bibliothèques partagées et des variables. L’amener à préparer ses maquettes pour une remise claire aux développeurs.

Compétences acquises

Structurer un design system à partir de composants et de styles
Définir des variables et des thèmes (par exemple clair et sombre)
Publier et organiser des bibliothèques partagées en équipe
Documenter les éléments pour en faciliter la réutilisation
Préparer la remise aux développeurs à l’aide du Dev Mode
Maintenir la cohérence d’un système au fil des mises à jour

Programme détaillé (6 h, 4 modules)

1Fondations d’un design system1 h 30

Comprendre les principes d’un design system et organiser ses composants et ses styles en un ensemble cohérent. Atelier « Structure du système » : le participant organise ses composants et ses styles en un système cohérent.

2Variables et thèmes1 h 30

Mettre en place des variables et des thèmes pour gérer la cohérence, par exemple un mode clair et un mode sombre. Atelier « Thèmes » : le participant met en place des variables et un thème clair et sombre.

3Bibliothèques partagées et collaboration1 h 30

Publier des bibliothèques, les rendre utilisables par l’équipe et documenter les éléments. Atelier « Bibliothèque d’équipe » : le participant publie une bibliothèque et documente quelques éléments.

4Remise aux développeurs1 h 30

Préparer la remise aux développeurs à l’aide du Dev Mode et clarifier les spécifications. Atelier « Préparer la remise » : le participant prépare un écran pour la remise aux développeurs avec le Dev Mode.

Approche pédagogique

Le cours combine apports de méthode et travail sur un système concret, en petit groupe et en classe virtuelle synchrone, avec l’accompagnement du formateur. Chaque module fait progresser le design system du participant.

30 % théorie

70 % pratique