SF33798
3 jours
En présentiel ou distanciel
- 21 heures de formation
- Exercices pratiques
- Prise en charge OPCO possible
Un renseignement ?
Contactez-nous !- En entreprise ou à distance
- Cadrage pédagogique gratuit
- Programme de formation sur mesure
- Formateur expert dédié
- Prise en charge OPCO possible
Formation Figma, concevoir un design system.
De la maquette au design system : structurez vos interfaces dans Figma, du web au mobile !
Cette formation avancée vous permet d’exploiter Figma pour concevoir des interfaces web et mobiles, de la basse à la haute fidélité, tout en appliquant les principes d’architecture de l’information et les bonnes pratiques ergonomiques. Le parcours s’appuie fortement sur la mise en pratique (travail individuel et en équipe), avec un cas fil rouge : partir d’une application web de référence et proposer une déclinaison mobile en responsive design. Vous aborderez progressivement la structuration des composants, l’usage des styles et variables, ainsi que les fondamentaux nécessaires pour initier un embryon de design system et produire un prototype interactif partageable.
Programme de formation Figma, concevoir un design system.
PDFArchitecture 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
Atelier pratique : 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
Atelier pratique : maquettage basse fidélité d’une version mobile responsive de la page d’accueil
Tour d’horizon des composants graphiques
Variants et propriétés
Plugins
Atelier pratique : 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)
Atelier pratique : 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
Atelier pratique : 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
Atelier pratique : 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
Atelier pratique : réaliser un prototype interactif de l’application mobile et partager des scénarios d’usage
Nos autres formations en UX/UI Design .
Formation CX Design
Formation Figma Initiation : découverte du maquettage et du prototypage
Formation Figma, concevoir un design system
Formation Initiation à l’UX Design
Formation Intelligence Artificielle (IA) et UX Design
Formation Les sciences cognitives au service de l’UX : concevoir des interfaces adaptées aux limites humaines
A travers sa Charte Engagement Qualité, Sparks s’engage à tout mettre en œuvre pour que chaque session de formation soit un succès et que votre satisfaction soit totale.
