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 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 Développement Web & Fullstack a accompagné plus de 111 entreprises dont :
Avis des participants
session très agréable, dense mais toujours agréable. formateur très à l'écoute, prends le temps de répondre aux questions. on apprends l'utilisation des fonctions mais aussi les processus mis en œuvre derrière ces fonctions. cela contribue à une compréhension en profondeur des sujets.
Très bon instructeur qui explique toujours en montrant du code, aucune slide et une présentation vivante ce qui permet de rester intéressé et concentré tout au long ! On nous laisse beaucoup de temps pour faire les exercices aussi donc ça permet de vraiment réfléchir…
Merci à Yasmine pour ces 3 jours de formation
RAS, j'ai passer un bon moment et j'ai hâte de pouvoir mettre tous ça en pratique dans mes devs. Seul bémol, j'ai reçu le mail indiquant les logiciels nécessaires seulement un jour avant le début de la formation. J'ai pu contourner les restrictions du PC…
Très bon formateur : pédagogue, n'hésite pas à faire des zooms sur certains concepts qui pouvaient me manquer, s'appuyer sur des choses qui peuvent mettre réellement utile au quotidien. Déroulé de la formation logique et permettant d'aller crescendo dans les difficultés pour avoir des bases…
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.
