Formation 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
du 7 sept. 2026 au 9 sept. 2026 • 3 jours
du 7 sept. 2026 au 9 sept. 2026 • 3 jours
du 7 sept. 2026 au 9 sept. 2026 • 3 jours
du 7 sept. 2026 au 9 sept. 2026 • 3 jours
du 13 oct. 2026 au 15 oct. 2026 • 3 jours
du 13 oct. 2026 au 15 oct. 2026 • 3 jours
du 13 oct. 2026 au 15 oct. 2026 • 3 jours
du 13 oct. 2026 au 15 oct. 2026 • 3 jours
du 13 oct. 2026 au 15 oct. 2026 • 3 jours
du 23 nov. 2026 au 25 nov. 2026 • 3 jours
du 23 nov. 2026 au 25 nov. 2026 • 3 jours
du 23 nov. 2026 au 25 nov. 2026 • 3 jours
du 23 nov. 2026 au 25 nov. 2026 • 3 jours
du 15 déc. 2026 au 17 déc. 2026 • 3 jours
du 15 déc. 2026 au 17 déc. 2026 • 3 jours
du 15 déc. 2026 au 17 déc. 2026 • 3 jours
du 15 déc. 2026 au 17 déc. 2026 • 3 jours
du 15 déc. 2026 au 17 déc. 2026 • 3 jours
Ils nous font confiance
Cette année notre filière UX/UI Design & Design Thinking a accompagné plus de 1 entreprise dont :
Avis des participants
Bon accueil de l'équipe Spark, les salles sont confortables. Le formateur était à l'écoute et très investi. Le contenu de la formation était également bien adapté à mes besoins et attentes.
Je suis très satisfaite de la formation dispensée.
Un grand merci à Arnaud LAGIEWKA
Super formation avec un format sur-mesure, Boris est un super formateur, passionné, qui connaît bien son sujet. J'ai plein de choses à mettre en place.
Cédric très à l'écoute, flexible, agréable et professionnel !
Votre formateur
Maite G.
Formatrice Figma
Maite intervient sur des formations portant sur l’UX/UI Design et le Design Thinking. Parmi les formations qui lui sont confiées figurent notamment « Ergonomie logicielle » et « UX/UI Design - Mobile et tactile ». Son activité de formation remonte à 2022.
Financement
Cette formation est éligible aux financements OPCO et FNE-Formation. Nos équipes vous accompagnent dans le montage de votre dossier.
Questions fréquentes
Combien de temps dure la formation Figma, concevoir un design system ?
Cette formation se déroule sur 3 jours.
Quels sont les prérequis pour suivre la formation Figma, concevoir un design system ?
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.
Quel est le prix de la formation Figma, concevoir un design system ?
En inter-entreprises, elle est à 2 250 € HT par participant ; en intra-entreprise, elle est à 5 850 € HT pour le groupe. Un tarif sur-mesure est également disponible sur devis.
La formation Figma, concevoir un design system délivre-t-elle une certification ?
Cette formation ne délivre pas de certification. Une attestation de fin de formation vous sera remise à l'issue de la session.
La formation Figma, concevoir un design system est-elle éligible à un financement OPCO ?
Oui, cette formation est éligible aux financements OPCO et FNE-Formation. Nos équipes vous accompagnent dans le montage de votre dossier.
Choisissez votre formation
Mon contact chez SPARKS est professionnel et très réactif. Les échanges sont simples, efficaces, et la collaboration se déroule dans d'excellentes conditions.