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
Avis des participants
Formation claire, structurée et directement applicable. Le formateur a pris le temps de répondre à toutes nos questions avec des exemples concrets.
Très bon équilibre entre théorie et pratique. Les exercices permettent de comprendre rapidement les concepts et de les mettre en œuvre.
Un formateur expérimenté, pédagogue et disponible. Je repars avec des méthodes et des outils que je peux utiliser immédiatement dans mon travail.
Le contenu était dense, mais très bien expliqué. Le rythme a été adapté au niveau du groupe et chacun a pu progresser.
Des formateurs experts, reconnus par nos apprenants
Chez Sparks Formation, la qualité de nos formations repose sur l'expertise de nos formateurs et la satisfaction de nos apprenants.
Note moyenne attribuée par les participants à nos formateurs
formateurs experts partenaires
Sparks Formation
sujets IT délivrés chaque jour partout en France
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.