Design & expérience utilisateur

🎨 Figma & Systèmes Graphiques

UI Designer & Design Systems

Création d'interfaces esthétiques sous Figma, mise en place et gouvernance de Design Systems complets et scalables.

  • 4 modules
  • 12 leçons
  • 3 h de contenu
  • Évaluation finale
#UI Design#Figma Design System#Composants Graphiques#Design Numérique Maroc#Rabat UI

Ce que vous allez apprendre

  • Maîtrise Avancée de Figma & Layout Réactif
  • Architecture de Composants & Design Tokens
  • Gouvernance, Documentation & Maintenance du Design System
  • Accessibilité Visuelle (WCAG), Micro-Interactions & Prototypage

Programme

4 modules · 12 leçons · 3 h de contenu

1Maîtrise Avancée de Figma & Layout Réactif3 leçons · 45 min
  1. 1.1Maîtrise avancée de l'Auto Layout Figma : padding dynamique, fill/hug, min/max et système de grille 8pt
  2. 1.2Typographie pour les interfaces : échelles modulaires (type scales), interlignage et hiérarchie visuelle
  3. 1.3Variables Figma et theming dynamique : construction d'une palette sémantique multi-modes (Clair/Sombre)
2Architecture de Composants & Design Tokens3 leçons · 45 min
  1. 2.1Conception de composants robustes dans Figma : variants, boolean, instance swap et text properties
  2. 2.2Architecture des Design Tokens : tokens globaux (primitifs), sémantiques (alias) et spécifiques composants
  3. 2.3Passerelle Design-to-Code : export de tokens avec Tokens Studio / Style Dictionary vers Tailwind et CSS
3Gouvernance, Documentation & Maintenance du Design System3 leçons · 45 min
  1. 3.1Documentation vivante du Design System : usage guidelines, règles d'accessibilité et synergie avec Storybook
  2. 3.2Modèles de gouvernance (fédéré vs centralisé) et cycle de vie d'un composant (brouillon, stable, déprécié)
  3. 3.3Gestion des versions (SemVer) d'une librairie Figma et communication des breaking changes aux équipes
4Accessibilité Visuelle (WCAG), Micro-Interactions & Prototypage3 leçons · 45 min
  1. 4.1Conformité WCAG 2.2 : ratios de contraste (4.5:1 / 3:1), typographie accessible et focus visible
  2. 4.2Spécification exhaustive des états interactifs : Default, Hover, Active, Focus visible et Disabled
  3. 4.3Prototypage haute fidélité dans Figma : Smart Animate, variables conditionnelles et micro-interactions réalistes

Comment se déroule la formation

À votre rythme

Des leçons courtes ; votre progression est enregistrée et vous reprenez là où vous vous êtes arrêté.

En pratiquant

Des cas concrets et des mises en situation tout au long des modules.

Une validation

Une évaluation finale s'ouvre quand vous avez parcouru l'essentiel de la formation.

Dans le même domaine

  • Design & expérience utilisateur👥 Recherche Utilisateur & Parcours

    UX Designer & Ergonomie des Interfaces

    Méthodes de recherche utilisateur, cartographie des parcours, architecture de l'information et tests d'utilisabilité.

    4 modules · 12 leçons · 3 h

    Voir le programme Accès sur attribution
  • Design & expérience utilisateur💡 Vision Produit & Prototypage

    Product Designer & Conception Centrée Utilisateur

    Pratique complète du Design Thinking, prototypage interactif, alignement business et design produit de bout en bout.

    4 modules · 12 leçons · 3 h

    Voir le programme Accès sur attribution