Projekt UI high-fidelity w Figma — typografia, paleta barw i design system
High-fidelity to etap, gdy strona zaczyna naprawdę wyglądać jak strona. Opisuję, jak tworzę pełny projekt UI w Figma przed wdrożeniem.
Kiedy wchodzą prawdziwe kolory i fonty?
Po zatwierdzeniu wireframe'ów następuje moment, na który wszyscy czekają — projekt high-fidelity. To etap, w którym szara siatka prostokątów zamienia się w prawdziwą stronę: z typografią, paletą barw, ikonami, zdjęciami i wszystkimi detalami, które sprawiają, że strona wygląda profesjonalnie i spójnie. W Figma prowadzę ten proces od początku do końca — łącznie z budowaniem design systemu.
Co wchodzi w skład projektu UI high-fidelity?
- Design system — komponenty wielokrotnego użytku: przyciski, pola formularzy, karty, nawigacja, modale
- Typografia — dobór font pair, rozmiary H1–H4, body text, caption oraz line-height i letter-spacing
- Paleta barw — primary, secondary, neutral i status colors plus tokeny dla dark i light mode
- Siatka i odstępy — grid 12-kolumnowy, spacing scale 4px, marginesy sekcji na każdym breakpoincie
- Ikony i ilustracje — spójny styl, format SVG, sprawdzona licencja komercyjna
- Stany interaktywne — hover, active, focus, disabled i error dla każdego elementu interfejsu
Typografia — fundament projektu, nie dekoracja
Dobór typografii to jedna z najważniejszych decyzji w projekcie UI. Czcionka wpływa na czytelność, osobowość marki i szybkość ładowania strony. Pracuję zazwyczaj z parami fontów: jeden szeryfowy lub display dla nagłówków, jeden bezszeryfowy dla treści ciągłej. Szczegółowo definiuję cały system typograficzny: rozmiary, wagi, interlinie i kerning — tak, żeby deweloper miał zero pola do własnej interpretacji. Font spec jest dokumentem, nie sugestią.
Paleta barw — nauka, nie kwestia gustu
Kolory w projekcie UI to nie kwestia tego, co ładnie wygląda na ekranie projektanta. To system, który musi spełniać wymagania dostępności (kontrast WCAG AA minimum 4.5:1 dla tekstu), budować hierarchię wizualną i być spójny w kilkudziesięciu różnych komponentach. Zazwyczaj pracuję z 3–5 kolorami bazowymi i generuję z nich pełną skalę 10 odcieni każdego. Mając taką skalę wiem, który odcień dać tłu, który tekstowi, a który przyciskowi CTA.
- Kontrast tekstu na tle minimum 4.5:1 zgodnie z WCAG AA — sprawdzam każdą kombinację
- Primary color — kolor akcji i wszystkich CTA, jeden wyrazisty i konsekwentny
- Neutral scale — szarości do tła, ramek, tekstu drugorzędnego i separatorów
- Semantic colors — zielony dla sukcesu, czerwony dla błędu, żółty dla ostrzeżenia
- Dark mode — każdy token kolorystyczny ma odpowiednik w ciemnym motywie strony
Figma jako profesjonalne środowisko pracy
Figma jest środowiskiem, w którym czuję się jak u siebie. Korzystam z komponentów z properties i variants — raz zaprojektowany przycisk istnieje w sześciu stanach i trzech rozmiarach, a zmiana koloru primary w jednym miejscu aktualizuje automatycznie cały projekt. Klient dostaje dostęp do pliku i widzi projekt na żywo, może komentować bezpośrednio na kanwie. Deweloper dostaje Dev Mode z gotowymi wartościami CSS, kolorami w RGBA i tokenami designu.
Co dostarczam na końcu etapu UI?
Każdy projekt UI dostarczam z pełną dokumentacją design systemu: spis komponentów z zasadami użycia, specyfikacja typograficzna z wartościami rem i px, paleta barw z tokenami i wartościami HEX oraz dokumentacja stanów interaktywnych. To nie jest plik graficzny — to żywy dokument, który towarzyszy projektowi przez cały cykl życia strony i każdą przyszłą aktualizację. Deweloper ma wszystko czego potrzebuje bez jednego pytania do mnie.
