Spójny spacing w Figmie opiera się na dwóch zasadach: korzystaj ze stałej skali, najlepiej Systemu 8pt, i buduj układy za pomocą Auto Layout zamiast ręcznego przesuwania warstw. Padding kontroluje przestrzeń wewnątrz komponentu, gap – odstępy między jego elementami, a Constraints stabilizują zachowanie przy zmianie rozmiaru.
Dlaczego spacing decyduje o jakości interfejsu?
Odstępy tworzą rytm interfejsu. Gdy podobne elementy mają różne marginesy, projekt zaczyna wyglądać przypadkowo, nawet jeśli każdy ekran osobno wydaje się poprawny. Taki chaos utrudnia też wdrożenie, bo programista nie wie, które wartości są zamierzone, a które powstały przez przesuwanie obiektów „na oko”.
Spacing oznacza odległość między elementami, natomiast padding opisuje przestrzeń wewnątrz kontenera. To rozróżnienie jest ważne: w komponencie przycisku padding oddziela etykietę od krawędzi, a gap określa przerwę między ikoną i tekstem.
System 8pt jako baza skali
System 8pt porządkuje wartości odstępów wokół wielokrotności liczby 8. Dzięki temu łatwiej podejmować decyzje, utrzymać wspólny rytm na wielu ekranach i przekazać zasady zespołowi. Wartość 8 dobrze dzieli się na mniejsze jednostki, takie jak 4, 2 i 1, a większe poziomy skali powstają bez przypadkowych liczb.
Nie oznacza to, że każdy odstęp musi mieć dokładnie 8 px. Chodzi o ograniczenie liczby używanych wartości i przypisanie ich do powtarzalnych sytuacji. 4 px może pełnić funkcję półkroku w gęstych interfejsach, na przykład między ikoną a etykietą lub wewnątrz chipu. Taki wyjątek powinien wynikać z reguły systemu, a nie z jednorazowej korekty.
Poniższa skala jest dobrym punktem wyjścia dla komponentów i układów ekranów:
| Wartość | Typowe zastosowanie |
|---|---|
| 4 px | Gęste interfejsy, ikona–tekst, mikroodstępy |
| 8 px | Odstęp między elementami w małym komponencie |
| 16 px | Padding komponentu, odstęp między kontrolkami |
| 24 px | Odstęp między komponentami lub blokami treści |
| 32 px | Większy odstęp między grupami elementów |
| 48 px | Separacja większych bloków i sekcji |
| 64 px | Duży oddech między sekcjami, szczególnie w webie |
W aplikacji mobilnej interfejs może wymagać gęstszych wartości, a strona marketingowa większych oddechów. Skala pozostaje jednak wspólna. Zmienia się jej użycie, nie podstawowa logika.
Jak wdrożyć spacing w Figmie?
Najpierw ustal skalę, a potem zapisz ją w komponentach i ramach Auto Layout. Dzięki temu odstępy nie zależą od ręcznego ustawienia pojedynczej warstwy.
- Zdefiniuj kilka poziomów skali – zacznij od 4, 8, 16, 24, 32, 48 i 64 px. Nie twórz nowej wartości, jeśli istniejący poziom rozwiązuje problem.
- Zamień grupy na ramki tam, gdzie potrzebujesz reguł układu – frame może mieć padding, tło, wyrównanie i własny Auto Layout. Grupa jest mniej wygodnym kontenerem dla elastycznych komponentów.
- Dodaj Auto Layout do powtarzalnych struktur – użyj kierunku poziomego dla wierszy i pionowego dla stosów treści. Ustaw stały gap zamiast pustych prostokątów udających odstępy.
- Rozdziel padding i gap – padding określa odległość dzieci od krawędzi kontenera, a gap odległość między dziećmi. Nie zastępuj jednego drugim.
- Dobierz sposób zmiany rozmiaru – Hug sprawdza się przy tekście i przyciskach dopasowanych do zawartości, Fill container przy polach i kolumnach zajmujących dostępne miejsce, a Fixed przy ikonach i elementach o stałym wymiarze.
- Ustaw Constraints dla elementów poza przepływem – Left i Right utrzymują marginesy po bokach, Center zachowuje wyśrodkowanie, a Stretch rozciąga element między krawędziami rodzica.
- Przetestuj zmianę treści i rozmiaru ramki – wydłuż etykietę, zmień liczbę elementów i zwęź ekran. Jeśli trzeba ręcznie poprawiać pozycje, problem leży w hierarchii lub ustawieniach układu.
Auto Layout nie zastępuje Constraints w każdej sytuacji. Auto Layout zarządza relacjami między elementami w kontenerze, a Constraints opisują zachowanie warstwy względem rodzica. W prostym komponencie często wystarczy Auto Layout. W responsywnej ramce oba mechanizmy mogą się uzupełniać.
Jeśli element należy do przepływu treści, powinien być układany przez Auto Layout. Pozycjonowanie absolutne zostaw dla nakładek, dekoracji i wyjątków.
Dobrze ustawiony Layout Grid może dodatkowo wyznaczać wspólne osie dla całych ekranów. Nie kontroluje jednak paddingu ani zachowania warstw. Siatka porządkuje odniesienia, Auto Layout porządkuje relacje, a Constraints stabilizują elementy przy zmianie wymiarów.
Dlaczego elementy „pływają”?
Rozjeżdżanie się układu zwykle nie wynika z jednego błędu, lecz z mieszania kilku sposobów pozycjonowania. Sprawdź problemy w tej kolejności:
- Element jest w niewłaściwym kontenerze – warstwa może reagować na zmianę rozmiaru dodatkowej grupy zamiast właściwej ramki ekranu.
- Grupa zastępuje frame – tam, gdzie potrzebujesz paddingu, gapu i kontroli resize’u, opakuj elementy w ramkę.
- Brakuje Auto Layoutu – ręczne przesuwanie warstw szybko prowadzi do różnic o kilka pikseli, szczególnie po zmianie tekstu.
- Wartości nie należą do jednej skali – odstępy 13, 19 i 27 px między podobnymi elementami wskazują na brak wspólnej reguły.
- Constraints są przypadkowe – przycisk rozciąga się, bo ma ustawienie Left & Right, albo ikona zmienia rozmiar, bo użyto Scale zamiast stałego wymiaru.
- Space between zastępuje stały gap – odległości zmieniają się wraz z szerokością kontenera, choć elementy powinny zachować stały rytm.
- Instancja ma zbyt wiele nadpisań – popraw komponent bazowy, zamiast korygować padding osobno na każdym ekranie.
Podczas diagnozy najpierw sprawdź hierarchię warstw, potem Auto Layout i Constraints, a dopiero na końcu pojedyncze wartości spacingu. Taka kolejność pozwala znaleźć przyczynę zamiast poprawiać objawy.
Kontrola przed przekazaniem projektu
Przed handoffem przejdź przez krótką kontrolę układu:
- Czy najczęściej używane odstępy należą do ustalonej skali 8pt?
- Czy 4 px występuje tylko tam, gdzie gęstość interfejsu uzasadnia półkrok?
- Czy komponenty z treścią o zmiennej długości korzystają z Auto Layoutu?
- Czy padding opisuje przestrzeń wewnątrz, a gap przerwy między elementami?
- Czy grupy zostały zastąpione ramkami tam, gdzie potrzebne są reguły resize’u?
- Czy Constraints są ustawione świadomie w poziomie i pionie?
- Czy nie ma ręcznie przesuniętych elementów ani pustych prostokątów udających spacing?
Największą poprawę daje nie pojedyncza funkcja Figmy, lecz konsekwentne połączenie Systemu 8pt, Auto Layoutu i świadomych Constraints. Gdy każda wartość ma swoje miejsce w skali, a każdy komponent ma jasno określone reguły, układ pozostaje spójny także po zmianie treści, rozmiaru ekranu i kolejnych iteracjach projektu.
