Pixel perfect — co to jest?
Podejście do implementacji, w którym gotowy interfejs w przeglądarce dokładnie odpowiada projektowi z Figmy co do piksela. Obejmuje odstępy, rozmiary, kolory, typografię i wyrównania.
Jak to działa?
Pixel perfect oznacza, że nakładasz screenshot implementacji na projekt w Figmie i nie ma różnicy. W praktyce używasz narzędzi do porównania: Figma overlay w przeglądarce, screenshot diff narzędzia, lub ręczne sprawdzanie DevTools vs. specyfikacja Figmy. Na przykład, sprawdzasz: czy padding przycisku to dokładnie 12px 24px (nie 10px 20px), czy font-size to 16px (nie 15px), czy kolor to dokładnie #3B82F6 (nie #4B8CF5). Pixel perfect ma sens dla kluczowych komponentów DS, ale nie dla każdego ekranu.
Dlaczego to ważne?
Odchylenia od projektu kumulują się. 2px tu, inny kolor tam, i po miesiącu interfejs wygląda inaczej niż zaprojektowany. Pixel perfect to standard jakości implementacji.