Académie
Chargement…
LABELS ERREURS ET
Rendez vos formulaires web conformes RGAA : labels visibles, erreurs annoncées, aria-live. De Figma à React avec Cursor pour PO, design et développement.
Intermédiaire · 4 min
ANIMATIONS GSAP AVEC
GSAP accessible : matchMedia, durées réduites et états statiques. Du Figma à useGSAP en React : pour dev, design et recette sans exclure reduced-motion.
Avancé · 4 min
AUDIT ACCESSIBILITÉ MAQUETTE
Pré-audit accessibilité sur maquette Figma avec Claude : contrastes, libellés, focus. Une checklist avant handoff — l’audit HTML RGAA reste obligatoire.
Intermédiaire · 4 min
IMPLÉMENTER UNE MAQUETTE
Passer d’une maquette Figma à du code propre avec Cursor : tokens, composants du repo, Dev Mode. Moins d’écart visuel, design system respecté.
Intermédiaire · 4 min
ÉCOCONCEPTION BUDGET POIDS
Fixez des budgets poids, LCP et polices dès Figma. Implémentez next/image et next/font en Next.js, mesurez chaque release avec Cursor : pour PO, dev et ops.
Intermédiaire · 4 min
AUDIT CONTRASTE ACCESSIBILITÉ
Pré-auditez contrastes, tailles et états focus dans Figma avant dev. Plugins, checklist RGAA et traçabilité pour aligner design et recette HTML finale.
Débutant · 4 min
COMPOSANTS RÉUTILISABLES POUR
Construisez composants maîtres, variantes et propriétés Figma alignés sur votre lib React. Auto-layout et documentation pour un handoff sans ambiguïté.
Intermédiaire · 4 min
DESIGN TOKENS VERS
Exportez variables Figma (couleurs, spacing, typo) vers custom properties CSS ou Tailwind. Nommage sémantique, modes light/dark et discipline de PR tokens.
Intermédiaire · 4 min
GRILLE RESPONSIVE FIGMA
Définissez grilles, breakpoints et contraintes Figma pour un handoff responsive CSS/Tailwind cohérent. Container, gutters et frames par viewport documentés.
Intermédiaire · 4 min
HANDOFF DEV SPECS
Exploitez Figma Dev Mode pour un handoff fiable : inspection composants, tokens, assets et annotations. Guide designers et dev front en projet agence web.
Intermédiaire · 4 min
FIGMA NOTION SYNCHRONISER
Documentez chaque composant design system dans Notion : lien Figma, props, accessibilité, statut dev. Process structuré avec option Make pour les rappels.
Intermédiaire · 4 min
PROTOTYPE PARCOURS E-COMMERCE
Prototypage du tunnel achat : PLP, fiche produit, panier, checkout. Interactions, états erreur, tests utilisateur et validation client avant intégration.
Intermédiaire · 4 min
Cursor
