Figma Auto Layout w 2025 – Kompletny przewodnik #EN82

TL;DR:

• Auto Layout to rama (frame) w Figmie, która określa sposób zachowania elementów wewnątrz niej
• Trzy główne typy układu: poziomy, pionowy oraz zawijany (wrap) – ten ostatni jest kluczowy dla responsywnych projektów
• Kluczowe właściwości to odstępy (gap), dopełnienie (padding) i wyrównanie (alignment)
• Dynamiczne przyciski i komponenty można tworzyć używając Auto Layout nawet dla pojedynczych elementów
• Tryby zmiany rozmiaru (hug content, fixed, fill container) decydują o zachowaniu elementów podczas skalowania
• Funkcja „Ignore auto layout” pozwala na swobodne pozycjonowanie wybranych elementów
• Responsywne galerie można tworzyć dzięki połączeniu minimalnej szerokości z trybem fill container

Dlaczego Auto Layout to obowiązkowa umiejętność w 2025 roku

W 2025 roku nieużywanie Auto Layout w projektach Figma to, jak mówi prowadzący webinar, „wielki błąd”. Auto Layout to w swojej istocie rama (frame), która posiada specjalne właściwości określające, jak elementy wewnątrz niej powinny się zachowywać. Jak wyjaśnia prowadzący: „Auto layout to po prostu rama, która mówi elementom wewnątrz niej, jak powinny się zachowywać.”

Podstawowe właściwości Auto Layout

Kierunek układu – fundament Auto Layout

Pierwszą i najważniejszą właściwością Auto Layout jest kierunek układu. Masz do wyboru trzy opcje:

• Poziomy (horizontal) – elementy układają się od lewej do prawej
• Pionowy (vertical) – elementy układają się od góry do dołu
• Zawijany (wrap) – elementy układają się poziomo, dopóki nie zabraknie im miejsca, wtedy „spadają” do kolejnego rzędu

Kierunek układu determinuje nie tylko sposób dodawania nowych elementów, ale także to, jak możesz zmieniać ich kolejność za pomocą klawiszy strzałek.

Zarządzanie odstępami między elementami

Odstęp (gap) między elementami w Auto Layout jest zawsze jednakowy dla wszystkich elementów. Możesz go kontrolować:

• Wpisując konkretną wartość w panelu właściwości
• Przeciągając różowe linie bezpośrednio na obszarze roboczym
• Używając automatycznych odstępów, które równomiernie rozmieszczają elementy

W przypadku układu zawijanego (wrap) możesz ustawić osobne odstępy poziome i pionowe.

Sposoby aktywacji automatycznych odstępów:

• Wybór opcji „auto” z rozwijanej listy
• Wpisanie litery „a” lub słowa „auto” w polu odstępu
• Dwukrotne kliknięcie na pole odstępu
• Naciśnięcie klawisza X podczas zaznaczenia pola odstępu

Dopełnienie – przestrzeń oddychania dla Twoich elementów

Dopełnienie (padding) to przestrzeń między elementami a granicami kontenera Auto Layout. Możesz ustawić:

• Jednakowe dopełnienie dla wszystkich stron
• Różne wartości dla każdej strony osobno (lewo, prawo, góra, dół)

Szybkie sztuczki z dopełnieniem:

• Przytrzymaj Command (⌘) i kliknij w pole dopełnienia, aby edytować wszystkie strony jednocześnie
• Wprowadź wartości rozdzielone przecinkami, aby szybko ustawić różne dopełnienia (format: góra, prawo, dół, lewo)
• Przykład: wpisując „0,1,2,3” ustawisz dopełnienie: góra=0, prawo=1, dół=2, lewo=3

Wyrównanie – precyzyjne pozycjonowanie elementów

Prowadzący wyjaśnia: „Wyrównanie zauważysz tylko wtedy, gdy auto layout jest większy niż elementy wewnątrz niego.” Demonstrując to, powiększa auto layout i pokazuje, jak elementy są domyślnie wyrównane do lewej i środka.

Wyrównanie pozwala na ustawienie elementów do:

• Lewej, środka lub prawej strony (poziomo): „Mogę zmienić to na górny prawy, na przykład.”
• Góry, środka lub dołu (pionowo)
• Dowolnej kombinacji powyższych: „dolny prawy”, „środek”, „środek środka” itd.

Jak podkreśla prowadzący, wyrównanie jest widoczne tylko wtedy, gdy kontener jest większy od elementów wewnątrz.

Zaawansowane techniki Auto Layout

Automatyczne odstępy dla inteligentnych układów

Zamiast ręcznie ustawiać odstępy, możesz wybrać opcję „auto”, która automatycznie dostosuje przestrzeń między elementami. W tym trybie:

• Elementy rozmieszczają się równomiernie
• Zwiększenie rozmiaru kontenera automatycznie zwiększa odstępy
• Dodanie nowych elementów powoduje automatyczne przeliczenie odstępów

Kontrolowanie kolejności elementów w układzie

Gdy używasz ujemnych odstępów, elementy nakładają się na siebie. Domyślnie ostatni element jest na wierzchu, ale możesz to zmienić za pomocą zaawansowanych ustawień Auto Layout, wybierając opcję „first on top” zamiast „last on top”.

Auto Layout dla pojedynczych elementów

Auto Layout nie jest ograniczony do wielu elementów – jest równie potężny dla pojedynczych obiektów, takich jak przyciski czy etykiety.

Dynamiczne przyciski dostosowujące się do treści

Prowadzący demonstruje, jak używać Auto Layout dla pojedynczego elementu na przykładzie przycisku: „Powiedzmy, że mam ten kawałek tekstu tutaj. To etykieta, prawdopodobnie stanie się przyciskiem.”

Umieszczając tekst w Auto Layout (skrót Shift+A), tworzysz dynamiczny komponent, który automatycznie dostosowuje swoją szerokość do zawartości. Prowadzący pokazuje, jak komponent reaguje na zmiany tekstu: „Teraz, jak powiedzieliśmy, jest to super dynamiczne. Więc teraz, jeśli mam tekst wewnątrz, w tej chwili mówi 'label’, ale powiedzmy, że będzie mówił 'exit’. Widzisz, jak to się zmieniło?”

Jak podkreśla prowadzący: „Auto Layout to nadal rama z właściwością auto layout na górze. Więc wszystko, co może zrobić rama, ten też może zrobić.” Możesz zatem:

• Dodać kolor tła
• Zastosować zaokrąglone narożniki
• Dodać obramowanie
• Zastosować efekty cienia czy inne

Tryby zmiany rozmiaru w Auto Layout

Zrozumienie trybów zmiany rozmiaru jest kluczowe, szczególnie przy zagnieżdżonych Auto Layout.

Porównanie trybów zmiany rozmiaru:

W transkrypcie prowadzący szczegółowo omawia różne tryby zmiany rozmiaru na przykładzie czterech kolorowych elementów:

Tryb	Zachowanie	Kiedy stosować	Reakcja na zmiany
Hug content (różowy)	„Figma mówi: zobaczę, że jest tu auto layout, spojrzę na wszystko, co jest wewnątrz i przytulę to”	Dla elementów o zmiennej zawartości	Reaguje na zmiany zawartości
Fixed (pomarańczowy/żółty)	„Ty kontrolujesz. Ty podejmujesz decyzję, jaka jest szerokość tego elementu”	Dla elementów o określonych wymiarach	Nie reaguje na żadne zmiany
Fill container (zielony)	„Element wewnątrz wypełnia tyle miejsca, ile może w swoim kontenerze”	Dla elastycznych elementów	Reaguje na zmiany rozmiaru kontenera

Hug content – automatyczne dopasowanie do zawartości

Tryb „hug content” sprawia, że kontener dostosowuje się do rozmiaru zawartych w nim elementów. Jest to domyślne ustawienie dla nowych Auto Layout. W tym trybie:

• Szerokość i wysokość są kontrolowane przez Figmę, nie przez ciebie
• Usunięcie części zawartości powoduje zmniejszenie kontenera
• Wartości szerokości i wysokości są wyszarzone w panelu właściwości

Fixed – kontrola w twoich rękach

Tryb „fixed” daje ci pełną kontrolę nad wymiarami elementu:

• Ręcznie określasz szerokość lub wysokość
• Elementy zachowują swój rozmiar niezależnie od zmian zawartości
• Idealny dla elementów, które powinny mieć stałe wymiary

Fill container – elastyczne wypełnianie przestrzeni

Tryb „fill container” sprawia, że element zajmuje tyle miejsca, ile jest dostępne w kontenerze:

• Element rozciąga się lub kurczy wraz ze zmianą rozmiaru kontenera
• Respektuje odstępy i inne elementy
• Czerwone strzałki w interfejsie Figmy wskazują kierunek wypełniania

Interakcje między elementami o różnych trybach

Prowadzący webinar dokładnie pokazuje, jak różne elementy wchodzą w interakcje ze sobą w zależności od ustawionych trybów. Na przykładzie czterech różnokolorowych elementów (czerwony z „hug content”, pomarańczowy z „fixed height” i „fill width”, żółty z „fixed width” i „fill height”, oraz zielony z „fill” dla obu wymiarów) demonstruje:

• Elementy z trybem „fixed” nigdy nie zmieniają rozmiaru
• Elementy z trybem „hug content” reagują tylko na zmiany zawartości
• Elementy z trybem „fill container” dostosowują się do dostępnej przestrzeni, dzieląc ją między sobą

Jak podkreśla prowadzący: „Musimy pamiętać, że istnieją reguły ustalone przez auto layout, a elementy wewnątrz muszą ich przestrzegać.”

Ignorowanie reguł Auto Layout – kreatywna wolność

Kiedy i jak używać „Ignore auto layout”

Prowadzący wyjaśnia ten koncept na przykładzie zwierząt ze koroną: „Powiedzmy, że chcę ukoronować jedno z tych zwierząt i chcę umieścić koronę w prawym górnym rogu kwadratu, w którym się znajduje.”

Po nieudanych próbach umieszczenia korony w standardowy sposób, prowadzący pokazuje rozwiązanie:

1. Umieść element w tym samym Auto Layout co element, do którego ma być przypisany: „Umieszczę moją koronę w tym samym pudełku co świnia.”
2. Przytrzymaj Command (⌘) podczas przeciągania: „Jeśli próbujesz coś umieścić i wszystko się ciągle przemieszcza, przytrzymaj command. To pozwala ci prawie głęboko zanurzyć się w auto layout.”
3. Kliknij przycisk „Ignore auto layout” w panelu właściwości
4. Teraz możesz swobodnie pozycjonować element: „I teraz mogę to poruszać, więc mogę użyć narzędzi wyrównania. Umieścić to na górze, po prawej.”

Jak wyjaśnia prowadzący: „Kiedy używasz Ignore auto layout, ważne jest, aby wiedzieć, w którym auto layout umieścić koronę.”

Najlepsze praktyki dla ignorowania Auto Layout

Prowadzący webinar podkreśla ważną zasadę: „Jedna bardzo ważna rzecz do zapamiętania z Ignore auto layout, czasami widzę, jak ludzie używają tego na potęgę, więc będą mieć auto layout i trzy elementy wewnątrz ignorują swój auto layout. Jeśli nie ma reguły do przestrzegania, nie używaj auto layout. Prawda? Jeśli wszystko to ignoruje, to po co w ogóle jest w auto layout?”

Innymi słowy – używaj tej funkcji tylko wtedy, gdy jest to naprawdę potrzebne dla pojedynczych elementów, a nie jako domyślne rozwiązanie.

Tworzenie responsywnych layoutów z minimalną szerokością

Galeria zdjęć z dynamicznym układem

W transkrypcie prowadzący pokazuje przykład z obrazkami zwierząt, aby zademonstrować tworzenie dynamicznej galerii:

„Co jeśli chcę, aby moje zwierzęta rozciągały się, jeśli mają przestrzeń, trochę jak galeria na ścianie, tak aby były responsywne w ten sposób?”

Aby stworzyć taki układ galerii:

1. Umieść elementy w układzie zawijanym (wrap)
2. Ustaw tryb „fill container” dla wszystkich elementów
3. Określ minimalną szerokość elementów: „Chcę im powiedzieć, zajmijcie tyle miejsca, ile możecie, ale nigdy nie bądźcie mniejsze niż 122.”
4. Obserwuj, jak elementy dynamicznie dostosowują się do dostępnej przestrzeni

Gdy kontener zmienia rozmiar:

• Elementy „spadają” do kolejnego rzędu, gdy nie mieszczą się w jednej linii
• Pozostałe elementy automatycznie powiększają się, wypełniając dostępną przestrzeń
• Czerwone linie sygnalizują osiągnięcie minimalnej szerokości

Prowadzący podsumowuje: „To po prostu sprawia, że jest super, super dynamiczny i naprawdę ekscytujący. Tworzy naprawdę responsywną przestrzeń.”

Podsumowanie i praktyczne wskazówki

Auto Layout w Figmie to potężne narzędzie do tworzenia dynamicznych i responsywnych projektów. Prowadzący webinar podkreśla, że opanowanie Auto Layout wymaga praktyki i eksperymentowania: „Z auto layoutem ogólnie to dużo prób i błędów i po prostu odkrywania, co dokładnie działa dla ciebie. Szczególnie dlatego, że zwykle będziesz zagnieżdżać wiele auto layoutów wewnątrz siebie.”

Checklist dla efektywnego użycia Auto Layout:

• Wybierz odpowiedni typ układu (poziomy, pionowy, zawijany) zależnie od potrzeb projektu
• Zdecyduj, czy elementy mają mieć stałe czy automatyczne odstępy
• Ustaw właściwe dopełnienie dla lepszego wyglądu komponentów
• Dobierz odpowiednie tryby zmiany rozmiaru dla każdego elementu
• Rozważ zastosowanie minimalnej szerokości/wysokości dla elementów elastycznych
• Testuj swój układ przy różnych rozmiarach ekranu
• Używaj funkcji „Ignore auto layout” tylko wtedy, gdy jest to niezbędne
• Sprawdź, czy twój układ odpowiednio reaguje na zmiany zawartości

„To jest tylko jeden przykład, jak możesz używać tej funkcji minimum, ale możesz używać minimum lub maksimum dla szerokości i wysokości, i możesz używać ich wymiennie. I czasami to jest po prostu to, czego potrzebujesz, aby sprawy działały.” – podsumowuje prowadzący.

Ten wpis jest częścią mojej kolekcji notatek z ciekawych podcastów, webinarów i innych treści, które uważam za wartościowe i do których sam chcę wracać. Jeśli chcesz sprawdzić oryginalne źródło, znajdziesz je tutaj: Figma Auto Layout in UI3 (2025)