Aspect în Figma pentru biroul fintech al unui partener cu tematică, Pixel Perfect și integrare în sistemul de design Next.js

Situație inițială și domeniu - există un produs în fintech - contul personal al unui partener pentru procesarea cererilor de plăți și monitorizarea stărilor. Designul a fost actualizat în Figma și kitul UI a fost parțial reconstruit, dar echipa front-end este ocupată cu integrările back-end. Trebuie să configurați un set de ecrane în funcție de aspect și să furnizați rezultatul sub formă de componente React/Next.js gata făcute care pot fi conectate imediat la un proiect existent.

Mediu tehnic - Next.js 14 (App Router), TypeScript, Module CSS + PostCSS, Storybook 7, Figma (aspect automat, variabile), asamblare prin pnpm. Proiectul are deja primitive de bază (Button, Input, Modal), dar unele blocuri necesită noi componente compozite și stări adaptive. Este oferit accesul la depozit și la machete.

Ceea ce trebuie făcut este să așezați aspectul și să asamblați următoarele secțiuni ale dulapului în componente:
1) Tabloul de bord pentru parteneri - carduri de valori, grafic (fără implementarea datelor - doar aspect și stări), bloc de notificare, stări goale.
2) Lista cererilor - un tabel cu antet fix, defilare orizontală pe ecrane mici, stări de încărcare/gol/eroare, linii de diferite tipuri.
3) Pagina detaliată a aplicației - cronologie de stare, bloc de detalii, panou de acțiuni, avertismente.
4) Ferestre modale și ferestre sertare - crearea unei aplicații, confirmare, erori de validare, vizualizare documente.

Limitări și cerințe - fără a conecta biblioteci UI terțe (MUI/Antd etc.). Este permisă utilizarea primitivelor interne deja existente. Aspectul trebuie să țină cont de RTL; nu este necesar, dar sunt necesare teme întunecate și luminoase prin variabile CSS, precum și funcționarea corectă cu o creștere a fontului de sistem de până la 125%. Animațiile sunt doar CSS, fără mișcare de cadru. Semantica și accesibilitatea sunt necesare - rol/aria corectă pentru modali, capcană de focalizare, inel de focalizare vizibil, control de la tastatură.

Așteptări profesionale - lucrarea presupune analiza aspectului, construirea structurii componentelor, coordonarea jetoanelor (culori/padding/radii), ajustarea adaptabilității și verificarea acurateței pixelilor.

Rezultatul specific este un PR către depozit cu componente și pagini conectate la rutele Next.js, plus o poveste Storybook pentru toate componentele compozite noi și stările acestora.

Criterii de acceptare măsurabile - Abatere Pixel Perfect de cel mult 2 pixeli la punctele de întrerupere de control 375/768/1280. Accesibilitatea Lighthouse este de cel puțin 95 pentru paginile de aspect în modul fără date. Toate elementele interactive sunt accesibile de la tastatură, modalele sunt închise prin Esc și făcând clic în exterior, focalizarea revine la declanșator. Nu ar trebui să existe derulare orizontală a paginii cu 375 px, cu excepția zonei tabelului din lista de solicitări, unde derularea este permisă în interiorul containerului. Compilarea pnpm rulează fără erori TypeScript și fără avertismente legate de aspect. Componentele acoperă stări - implicit/hover/focus/disabled/loading/empty/eroare conform aspectului.

Etape de execuție - audit inițial al Figma și aprobarea structurii componentelor. Aspect de jetoane și teme de bază. Implementarea paginilor și componentelor compozite. Parcurgerea listei de verificare a accesibilității și Pixel Perfect, efectuând modificări pe baza rezultatelor revizuirii.