Handoff del Design Perfetto: Guida per Sviluppatori

La maggior parte dei problemi "pixel-perfect" non sono errori di codice; sono errori di interpretazione. Quando un file di design è ambiguo, lo sviluppatore deve indovinare. E siamo pessimi a indovinare.

1. Usa una Griglia (Per favore!)

Lo sviluppo web è governato da regole, solitamente il CSS Box Model.

• Attieniti a un sistema di spaziatura coerente (es. griglia 8pt). Se un margine è 23px e un altro 25px, assumerò che sia un errore e uniformerò a 24px (1.5rem).
• Definisci chiaramente le larghezze dei container (es. 1280px, 1440px).

2. Asset: Esportabili vs CSS

Aiutami a mantenere il sito veloce.

• SVG: Icone e loghi dovrebbero essere vettoriali, non PNG.
• Foto: Prepara aspect ratio standard (16:9, 4:3) così i clienti possono sostituirle facilmente.
• Ombre e Sfumature: Non appiattirle nelle immagini. Mantienile come stili livello così posso copiare i valori CSS.

3. Stati Responsivi

Inviare solo una vista Desktop è come inviare metà progetto.

Non ho bisogno di un mockup per ogni singola larghezza di dispositivo, ma mi servono:

• Desktop (1440px): La vista principale.
• Mobile (375px/390px): Come funziona il menu, come si impilano le colonne.
• Tablet (Esempio): Solo se il layout cambia drasticamente.

4. Hover e Stati di Interazione

Cosa succede quando passo il mouse su quel pulsante? Diventa blu? Si solleva?

Crea una pagina "UI Kit" in Figma con tutti i tuoi pulsanti, input form (stati attivo, errore, successo) e stili tipografici. Agisce come unica fonte di verità.