Mise en page dans Figma pour le bureau fintech d'un partenaire avec thématique, Pixel Perfect et intégration dans le système de conception Next.js

Situation initiale et domaine - il existe un produit dans la fintech - un compte personnel d'un partenaire pour le traitement des demandes de paiement et le suivi des statuts. La conception a été mise à jour dans Figma et le kit d'interface utilisateur a été partiellement reconstruit, mais l'équipe front-end est occupée par les intégrations back-end. Vous devez disposer un ensemble d'écrans en fonction de la mise en page et fournir le résultat sous la forme de composants React/Next.js prêts à l'emploi qui peuvent être immédiatement connectés à un projet existant.

Environnement technique - Next.js 14 (App Router), TypeScript, Modules CSS + PostCSS, Storybook 7, Figma (mise en page automatique, variables), assemblage via pnpm. Le projet dispose déjà de primitives de base (Bouton, Entrée, Modal), mais certains blocs nécessitent de nouveaux composants composites et états adaptatifs. L'accès au référentiel et aux mises en page est fourni.

Ce qu'il faut faire, c'est tracer le plan et assembler les sections suivantes de l'armoire en composants :
1) Tableau de bord partenaire - cartes de métriques, graphique (sans implémentation de données - uniquement mise en page et états), bloc de notification, états vides.
2) Liste des requêtes - un tableau avec en-tête fixe, défilement horizontal sur petits écrans, états chargement/vide/erreur, lignes de types différents.
3) Page d'application détaillée - chronologie de l'état, bloc de détails, panneau d'action, avertissements.
4) Fenêtres modales et fenêtres à tiroirs - création d'une candidature, confirmation, erreurs de validation, visualisation de documents.

Limitations et exigences - sans connecter des bibliothèques d'interface utilisateur tierces (MUI/Antd, etc.). Il est permis d'utiliser des primitives internes déjà existantes. La mise en page doit prendre en compte RTL ; ce n'est pas obligatoire, mais des thèmes sombres et clairs via des variables CSS sont requis, ainsi qu'un fonctionnement correct avec une augmentation de la police système jusqu'à 125 %. Les animations sont uniquement en CSS, sans framer-motion. La sémantique et l'accessibilité sont requises - rôle/aria correct pour les modaux, piège de focus, anneau de focus visible, contrôle du clavier.

Attentes professionnelles - le travail consiste à analyser la disposition, à construire la structure des composants, à coordonner les jetons (couleurs/remplissage/rayons), à ajuster l'adaptabilité et à vérifier la précision des pixels.

Le résultat spécifique est un PR vers le référentiel avec des composants et des pages connectés aux routes Next.js, ainsi qu'une histoire Storybook pour tous les nouveaux composants composites et leurs états.

Critères d'acceptation mesurables - Déviation Pixel Perfect ne dépassant pas 2 pixels aux points d'arrêt de contrôle 375/768/1280. L'accessibilité de Lighthouse est d'au moins 95 pour les pages de mise en page en mode sans données. Tous les éléments interactifs sont accessibles depuis le clavier, les modaux sont fermés par Echap et en cliquant à l'extérieur, le focus revient sur le déclencheur. Il ne doit pas y avoir de défilement horizontal de la page de 375 pixels, à l'exception de la zone du tableau dans la liste des requêtes, où le défilement est autorisé à l'intérieur du conteneur. La version pnpm s'exécute sans erreurs TypeScript et sans avertissements linter liés à la mise en page. Les composants couvrent les états - par défaut/survol/focus/désactivé/chargement/vide/erreur selon la disposition.

Étapes d'exécution - audit initial de Figma et approbation de la structure des composants. Disposition des jetons et des thèmes de base. Implémentation de pages et de composants composites. Parcourir la liste de contrôle d'accessibilité et Pixel Perfect, en apportant des modifications en fonction des résultats de l'examen.