Layout in Figma für das Fintech-Büro eines Partners mit Theming, Pixel Perfect und Integration in das Next.js-Designsystem

Ausgangssituation und Themengebiet – es gibt ein Produkt im Fintech-Bereich – das persönliche Konto eines Partners zur Bearbeitung von Zahlungsanträgen und Überwachung des Status. Das Design wurde in Figma aktualisiert und das UI-Kit teilweise neu erstellt, aber das Front-End-Team ist mit Back-End-Integrationen beschäftigt. Sie müssen eine Reihe von Bildschirmen entsprechend dem Layout gestalten und das Ergebnis in Form vorgefertigter React/Next.js-Komponenten liefern, die sofort mit einem bestehenden Projekt verbunden werden können.

Technische Umgebung – Next.js 14 (App Router), TypeScript, CSS-Module + PostCSS, Storybook 7, Figma (Auto-Layout, Variablen), Assembly über pnpm. Das Projekt verfügt bereits über grundlegende Grundelemente (Button, Input, Modal), aber einige Blöcke erfordern neue zusammengesetzte Komponenten und adaptive Zustände. Der Zugriff auf das Repository und die Layouts wird bereitgestellt.

Was getan werden muss, ist, das Layout zu entwerfen und die folgenden Abschnitte des Schranks zu Komponenten zusammenzusetzen:
1) Partner-Dashboard – Metrikkarten, Diagramm (ohne Datenimplementierung – nur Layout und Zustände), Benachrichtigungsblock, leere Zustände.
2) Liste der Anfragen – eine Tabelle mit festem Header, horizontalem Scrollen auf kleinen Bildschirmen, Lade-/Leer-/Fehlerstatus, Zeilen unterschiedlichen Typs.
3) Detaillierte Anwendungsseite – Statuszeitleiste, Detailblock, Aktionsfeld, Warnungen.
4) Modale Fenster und Schubladenfenster – Erstellen einer Anwendung, Bestätigung, Validierungsfehler, Anzeigen von Dokumenten.

Einschränkungen und Anforderungen – ohne Anbindung von UI-Bibliotheken von Drittanbietern (MUI/Antd usw.). Es ist erlaubt, bereits vorhandene interne Grundelemente zu verwenden. Das Layout muss RTL berücksichtigen; Es ist nicht erforderlich, aber dunkle und helle Themes über CSS-Variablen sind erforderlich, sowie eine korrekte Bedienung mit einer Erhöhung der Systemschriftart um bis zu 125 %. Animationen sind nur CSS, ohne Framer-Bewegung. Semantik und Zugänglichkeit sind erforderlich – korrekte Rolle/Arie für Modalitäten, Fokusfalle, sichtbarer Fokusring, Tastatursteuerung.

Professionelle Erwartungen – die Arbeit umfasst die Analyse des Layouts, den Aufbau der Struktur der Komponenten, die Koordination von Tokens (Farben/Padding/Radien), die Anpassung der Anpassungsfähigkeit und die Überprüfung der Pixelgenauigkeit.

Das spezifische Ergebnis ist eine PR an das Repository mit Komponenten und Seiten, die mit Next.js-Routen verbunden sind, sowie eine Storybook-Story für alle neuen Verbundkomponenten und deren Zustände.

Messbare Akzeptanzkriterien – Pixel Perfect-Abweichung von nicht mehr als 2 Pixel an den Kontrollhaltepunkten 375/768/1280. Die Lighthouse-Barrierefreiheit beträgt für Layoutseiten im datenfreien Modus mindestens 95. Auf alle interaktiven Elemente kann über die Tastatur zugegriffen werden, Modalitäten werden durch Esc geschlossen und durch Klicken nach außen kehrt der Fokus zum Auslöser zurück. Es sollte kein horizontales Scrollen der Seite um 375 Pixel erfolgen, außer im Tabellenbereich in der Liste der Anfragen, wo Scrollen innerhalb des Containers erlaubt ist. Der pnpm-Build läuft ohne TypeScript-Fehler und ohne Layout-bezogene Linter-Warnungen. Die Komponenten decken je nach Layout die Zustände Standard/Hover/Fokus/Deaktiviert/Laden/Leer/Fehler ab.

Ausführungsphasen – Erstprüfung von Figma und Genehmigung der Komponentenstruktur. Layout grundlegender Token und Themen. Implementierung von Seiten und Verbundkomponenten. Gehen Sie die Checkliste zur Barrierefreiheit und Pixel Perfect durch und nehmen Sie Änderungen basierend auf den Überprüfungsergebnissen vor.