Figma, concevoir un design system
De la maquette au design system : structurez vos interfaces dans Figma, du web au mobile !
Vue d'ensemble
Connaissances de base en UX/UI design, ou avoir suivi une formation d’initiation à l’UX design.
Une première prise en main de Figma est recommandée.
Objectifs pédagogiques
Programme détaillé
Architecture de l’information avec Figma
Cartographier la navigation : sitemap, pages de niveaux, boîtes de dialogue et popups, tri par cartes pour concevoir un menu principal
Zoning : placement et dimensionnement, hiérarchie visuelle, ligne de flottaison, dévoilement progressif
Prise en main de Figma : pages et calques, outils de dessin, formes, contours, effets
Zoning dans Figma : placement absolu, grilles de mise en page, défilement
Composants et instances dans Figma
Reproduire le zoning de la page d’accueil de l’application de référence et hiérarchiser l’information
UI Design en basse fidélité
Enjeux du responsive design
Contraintes (constraints)
Auto-layout
Tour d’horizon des composants graphiques
Variants et propriétés
Plugins
Maquettage basse fidélité d’une version mobile responsive de la page d’accueil
Création d’un composant bouton et d’un composant barre d’outils
UI Design en haute fidélité
Design visuel : repères, tendances, notion d’affordance
Charte graphique : couleurs, iconographie, illustrations
Styles de couleurs et variables
Design tokens : conventions de nommage, variables primitives/sémantiques, dimensions et espacements (tailles “T-Shirt”)
Décliner un design en thèmes : exemple du dark mode
Images & iconographie : exemples (Unsplash, Iconify)
Extraire une charte graphique à partir de la page d’accueil existante
Utiliser et concevoir un design system
Définition d’un design system
Différences entre charte graphique, UI kit et design system
Atomic Design : atomes, molécules, organismes, templates, pages
Exemples de design systems
Figma et design system : librairies, publication, versioning, structuration et bonnes pratiques
Créer un embryon de design system pour l’application mobile
UX Writing : gestion des contenus textuels
Vers un guide de style
Typographie : police, taille, graisse…
Microcopie : libellés de boutons, erreurs, aide en ligne
Hiérarchie visuelle et échelle typographique
Contenus : accroche, pyramide inversée
Styles typographiques dans Figma
Concevoir une échelle typographique et l’intégrer au design system
Maquettage en co-conception avec les utilisateurs
Préparer un cycle de maquettage : recrutement, préparation et animation d’atelier
Idéation avec FigJam : divergence puis convergence
Outils clés de maquettage
Figma : repères sur l’historique et l’adoption
Prototypage interactif : transitions, variants, animations, overlays
Export et partage d’un prototype
Collaboration designers / développeurs / utilisateurs
Vers le Design Ops avec le Dev Mode
Réaliser un prototype interactif de l’application mobile et partager des scénarios d’usage
Prochaines sessions
27 juil. 2026
Distance - Français
27 juil. 2026
Grenoble - Français
27 juil. 2026
Toulouse - Français
27 juil. 2026
Aix-en-Provence - Français
27 juil. 2026
Lyon - Français
7 sept. 2026
Paris - Français
7 sept. 2026
Distance - Français
7 sept. 2026
Lille - Français
7 sept. 2026
Nantes - Français
13 oct. 2026
Grenoble - Français
13 oct. 2026
Aix-en-Provence - Français
13 oct. 2026
Toulouse - Français
13 oct. 2026
Distance - Français
13 oct. 2026
Lyon - Français
23 nov. 2026
Paris - Français
23 nov. 2026
Distance - Français
23 nov. 2026
Lille - Français
23 nov. 2026
Nantes - Français
15 déc. 2026
Lyon - Français
15 déc. 2026
Distance - Français
15 déc. 2026
Grenoble - Français
15 déc. 2026
Toulouse - Français
15 déc. 2026
Aix-en-Provence - Français
Avis des participants
Financement
Cette formation est éligible aux financements OPCO et FNE-Formation. Nos équipes vous accompagnent dans le montage de votre dossier.
En savoir plus sur le financement