Kompletny przewodnik po automatycznym układzie w Figma
Praktyczny przewodnik po funkcji Auto Layout w Figma: tworzenie karty produktu, formularza zgłoszeniowego i całej strony za jej pomocą
27 listopada 2025 r.
19 minut
Zawartość:
Czym jest automatyczny układ w Figma
Auto Layout to narzędzie Figma służące do automatycznego rozmieszczania i rozstawiania elementów w grupie na podstawie ustalonych przez użytkownika reguł. Jeśli zmienisz coś — na przykład długość tekstu lub rozmiar obrazu — wszystko inne dostosuje się automatycznie, więc nie musisz ręcznie dopasowywać żadnych ustawień.
Zamiast określać dokładne wartości dla różnych ustawień, definiujesz reguły:
- Przepływ ( wcześniej nazywany Kierunkiem): poziomy, pionowy lub zawijanie do nowej linii.
- Odstęp: Odstęp między elementami i wypełnienie wewnątrz ramki nadrzędnej.
- Wyrównanie i rozmieszczenie elementów podrzędnych.
- Zachowanie podczas zmiany rozmiaru (Hug, Fixed, Fill): Aby komponenty powiększały się lub zmniejszały wraz z treścią.
Jak dodać i skonfigurować automatyczny układ w Figma
Skróty do automatycznego układu:
- Shift + A — zastosuj automatyczny układ.
- Shift + Alt/Option + A — usuń automatyczny układ.
- Ctrl/Cmd + Shift + G — rozgrupuj elementy.
- Ctrl/Cmd + D — powiel (sklonuj) ramkę Auto Layout.
Możesz zastosować automatyczny układ do pojedynczej ramki — która może zawierać wiele elementów, takich jak tekst, kształty i obrazy — lub do wybranych elementów; Figma automatycznie umieści je w nowej ramce automatycznego układu. Przykłady elementów, do których można zastosować automatyczny układ:
Zobaczmy, jak działa funkcja Auto Layout w przypadku ramek. Utwórz dwie ramki, zaznacz je i kliknij przycisk „Use Auto Layout” lub naciśnij Shift + A.
- Rama (pojedyncza)
- Ramka + Ramka
- Element + Element (Figma umieści je w nowej ramce)
Zobaczmy, jak działa funkcja Auto Layout w przypadku ramek. Utwórz dwie ramki, zaznacz je i kliknij przycisk „Use Auto Layout” lub naciśnij Shift + A.
Ustawienie Auto Layout (Automatyczny układ) znajduje się w prawym pasku bocznym inspektora, gdy aktywna jest ramka lub zaznaczenie.
Aby sprawdzić, czy zastosowano funkcję Auto Layout, otwórz panel Layers. Obok nazwy ramki pojawi się ikona Auto Layout, a wybrane ramki zostaną połączone w jedną ramkę Auto Layout.
Panel Warstwy znajduje się po lewej stronie. Można go również otworzyć za pomocą skrótu Opt/Ctrl + 1.
Jeśli masz już ramkę z elementami w środku, nadal możesz zastosować automatyczny układ. Nie musisz wtedy ręcznie dostosowywać rozmiaru ramki — wystarczy ustawić wypełnienie i odstępy, a ramka automatycznie dostosuje swój rozmiar do zawartości.
Automatyczny układ w praktyce: po zmianie rozmiaru zielonego prostokąta ramka automatycznie dostosuje się do nowego rozmiaru.
Kluczowe właściwości układu automatycznego
Przyjrzyjmy się głównym ustawieniom automatycznego układu i ich działaniu w układach responsywnych. Te elementy sterujące znajdują się w prawym panelu po zaznaczeniu elementu z włączoną funkcją automatycznego układu.
Przepływ
Przepływ określa sposób zachowania elementów, gdy w ramce Auto Layout nie ma wystarczającej ilości miejsca. To ustawienie pozwala wybrać, czy obiekty pozostaną w jednym wierszu/kolumnie, czy też automatycznie przejdą do następnej linii, gdy w ramce zabraknie miejsca.
1
Dowolny układ: Elementy można przenosić w dowolne miejsce w ramce. Chociaż ta opcja pojawia się w sekcji Automatyczny układ, w rzeczywistości wyłącza ona automatyczny układ dla tych elementów.
Dowolny układ — swobodne rozmieszczanie elementów (wyłącza funkcję automatycznego układu).
2
Pionowo: Elementy są umieszczone jeden pod drugim.
Obiekty automatycznie układają się w kolumnie.
3
Poziomo: Obiekty są wyrównane poziomo. W tym trybie pojawia się dodatkowe ustawienie — Zawijanie. Określa ono, czy elementy wykraczają poza ramkę (i są przycinane), czy też zawijają się do następnej linii, gdy zabraknie miejsca.
Układ poziomy z wyłączoną funkcją zawijania.
Układ poziomy z włączoną funkcją zawijania.
4
Siatka: nowy tryb, który automatycznie umieszcza elementy na siatce. Pojawia się panel Siatka, w którym można dostosować siatkę, a elementy aktualizują się automatycznie po wprowadzeniu zmian.
Po zmianie siatki elementy dostosowują się do niej automatycznie.
Zmiana rozmiaru
Ta sekcja zawiera elementy sterujące W (szerokość) i H (wysokość). Ustawiają one szerokość i wysokość całej ramki z zastosowanym automatycznym układem.
Możesz wybrać jeden z dwóch trybów:
- Naprawiono: Szerokość i wysokość ramki pozostają niezmienione, niezależnie od innych ustawień lub rozmiarów elementów wewnątrz.
- Objęcie (dopasowane do zawartości): Szerokość i wysokość ramki dostosowują się w oparciu o skonfigurowane wypełnienie i rozmiary elementów wewnątrz.
Gdy funkcja Hug jest włączona, zmiana odstępów między kwadratami powoduje powiększanie lub zmniejszanie ramki.
Luka
To ustawienie kontroluje odstępy między elementami w układzie automatycznym. Można ustawić odstępy poziome i pionowe niezależnie od siebie.
Przykład: Odstępy pionowe i poziome między kwadratami w układzie automatycznym wynoszą 40 pikseli.
Wyrównanie
To ustawienie kontroluje sposób wyrównania elementów w układzie automatycznym — po lewej, po prawej, pośrodku, u góry lub u dołu. Staje się dostępne, gdy przepływ układu jest ustawiony na poziomy lub pionowy.
Jeśli opcja Wrap jest włączona, opcja Alignment określa również sposób rozmieszczenia nierównych wierszy/kolumn. Na przykład fioletowy kwadrat może domyślnie znajdować się pośrodku, ale można go przypiąć po lewej lub prawej stronie.
Wyściółka
To ustawienie kontroluje odstępy między krawędziami ramki a jej zawartością. Wypełnienie można ustawić indywidualnie dla każdej strony. Wszystkie nowe elementy, które dodasz, zostaną umieszczone w odpowiednim miejscu i będą zgodne z tymi ustawieniami wypełnienia.
Dodatkowe ustawienia
Dostępnych jest kilka dodatkowych ustawień dla funkcji Auto Layout. Przyjrzyjmy się każdemu z nich.
Aby uzyskać dostęp do innych ustawień, kliknij „Ustawienia automatycznego układu” w sekcji „Automatyczny układ”.
1
Obrysy: Obrys wokół ramki lub elementu. Można wybrać, czy obrys ma być umieszczony wewnątrz, czy na zewnątrz krawędzi elementu.
Tak wygląda ramka z włączoną i wyłączoną funkcją pociągnięcia.
2
Układanie elementów na płótnie: określasposób nakładania się elementów w przypadku ujemnej przerwy. Wybierz, czy pierwszy, czy ostatni element ma być umieszczony z przodu.
To ustawienie nie jest dostępne, gdy układ jest ustawiony na siatkę.
3
Wyrównaj linię bazową tekstu: Wyrównuje elementy tekstowe wzdłuż tej samej linii bazowej.
To ustawienie nie jest dostępne, gdy układ jest ustawiony na siatkę.
Po włączeniu tej opcji elementy tekstowe wyrównują się równo do linii bazowej.
Przykłady zastosowań
Bądźmy szczerzy — wszystkie te terminy mogą wydawać się przytłaczające. Bez praktyki nie zapadają w pamięć i nie mają większego sensu. Zamiast więc uczyć się teorii na pamięć, zobaczmy, jak działa Auto Layout w praktyce. Stworzymy trzy popularne elementy interfejsu: przycisk, kartę produktu i formularz rejestracyjny.
Jeśli dopiero zaczynasz korzystać z rozwiązań bez kodów, skorzystaj z tego ekskluzywnego kodu promocyjnego, aby uzyskać jeden miesiąc planu osobistego Tilda zamiast standardowego 2-tygodniowego okresu próbnego.
Zobacz instrukcje dotyczące aktywacji
Przycisk
Stwórzmy przycisk przy użyciu ramki i warstwy tekstowej. Zwykle trzeba ręcznie dostosować szerokość ramki do długości tekstu. Ale co się stanie, jeśli tekst się wydłuży? Trzeba będzie ponownie zmienić rozmiar ramki. A jeśli interfejs lub strona internetowa ma wiele przycisków, szybko staje się to czasochłonne.
Jak widać, gdy długość tekstu przekracza ramkę, należy ręcznie dostosować drugi przycisk.
Włączmy funkcję Auto Layout, aby ograniczyć ręczne dostosowywanie.:
- Zastosuj automatyczny układ do ramki (Shift + A).
- Ustaw Hug tak, aby szerokość przycisku dostosowywała się do długości tekstu.
- Dostosuj wypełnienie, aby tekst nie przylegał do krawędzi ramki.
Po włączeniu funkcji Auto Layout przycisk automatycznie dostosowuje się do długości podpisu.
Karta produktu
Karty produktów są najczęściej używane w sklepach internetowych. Może ich być setki, a nawet tysiące. Każda karta zawiera tytuły i opisy o różnej długości oraz obrazy o różnych rozmiarach.
Dzięki funkcji Auto Layout możesz po prostu zamienić tekst i obrazy — wszystko inne dostosowuje się automatycznie.
Karta bez automatycznego układu: przy niewielkiej ilości tekstu wszystko wygląda dobrze.
Jeśli jednak tekst jest dłuższy, część treści wykracza poza kartę.
Wewnątrz karty różne elementy wymagają różnych odstępów:
• odstęp między tytułem a opisem to jedna wartość.
• odstęp między tekstem a obrazem to inna wartość.
Aby karta zmieniała rozmiar automatycznie, zbudujemy ją przy użyciu wielu warstw Auto Layout.
• odstęp między tytułem a opisem to jedna wartość.
• odstęp między tekstem a obrazem to inna wartość.
Aby karta zmieniała rozmiar automatycznie, zbudujemy ją przy użyciu wielu warstw Auto Layout.
1
Zacznij od zastosowania automatycznego układu do warstwy tytułu i opisu. Ustaw pionowy przepływ i odstęp 12 pikseli, aby wysokość dostosowywała się automatycznie do różnych długości tekstu.
2
Następnie zastosuj automatyczny układ do elementów obrazu i tekstu razem. Dzięki temu karta dostosuje się do obrazów o różnych rozmiarach. Dodaj wypełnienie wokół karty i ustaw kolor tła na biały.
Teraz możesz zamienić obraz lub dodać dłuższy tekst — Figma automatycznie dostosuje wysokość karty.
Kiedy dodajemy kolejną linię tekstu, karta dostosowuje się i nic się nie psuje.
Formularz kontaktowy/zgłoszeniowy
Formularz na stronie internetowej zazwyczaj zawiera kilka pól wprowadzania danych i przycisk. Jednak po zmianie rozmiaru ramki pola nie rozciągają się automatycznie, co może spowodować naruszenie odstępów między nimi.
Formularz bez automatycznego układu: pola nie rozciągają się i nic nie dostosowuje się automatycznie.
Teraz zastosujmy wszystko, czego się nauczyliśmy, i stwórzmy formularz z trzema standardowymi polami wprowadzania danych.
1
Dodaj etykietę pola i ramkę, która będzie służyć jako pole wprowadzania danych.
Etykieta przyszłego pola wprowadzania danych oraz element, który będzie pełnił funkcję pola wprowadzania danych.
2
Zastosuj układ automatyczny, a następnie ustaw opcję Przepływ na Poziomy. Nadaj etykiecie stałą szerokość, aby wszystkie nazwy pól były równo wyrównane. Ustaw szerokość pola wprowadzania danych na Wypełnij — w ten sposób po zmianie rozmiaru kontenera pole wprowadzania danych automatycznie dostosuje się do jego szerokości.
3
Powtórz to pole jeszcze dwa razy (np. Nazwisko i Adres e-mail).
4
Zaznacz wszystkie trzy pola, zgrupuj je i ponownie zastosuj funkcję Auto Layout. Ustaw szerokość grupy na Fill. Teraz, gdy zmienisz rozmiar kontenera formularza, pola wewnątrz dostosują się automatycznie.
Formularz jest gotowy. Dodaj tyle pól, ile potrzebujesz, i umieść przycisk „Wyślij” poniżej — tak jak ten, który stworzyliśmy wcześniej.
Tworzenie „płynnego” układu za pomocą funkcji Auto Layout
Auto Layout umożliwia tworzenie całych stron internetowych z automatycznie dostosowywanymi odstępami. Najpierw należy ustawić odległość między tytułem a opisem, a następnie dodać odstępy poniżej obrazu, przycisku i pozostałej części ramki. Krok po kroku otrzymujemy w pełni zautomatyzowany układ w programie Figma.
Podczas tworzenia dowolnego układu bardzo wygodne jest, gdy treść automatycznie dostosowuje się do różnych rozmiarów ekranu. Jest to często określane jako projekt responsywny. Aby to osiągnąć, musimy stworzyć płynny układ.
W tym przykładzie weźmy naszą kartę produktu, skopiujmy ją dwa razy i wyrównajmy wszystkie trzy karty do siatki. Dzięki temu dostosują się one do szerokości ramki.
1
Najpierw utwórz ramkę, a następnie dodaj siatkę 12-kolumnową.
2
Dodaj trzy karty produktów i umieść je tak, aby każda z nich zajmowała cztery kolumny.
3
Dla każdego kontenera karty ustaw szerokość na Wypełnij, aby karty rozciągały się podczas zmiany rozmiaru głównego kontenera.
4
Dla kontenera zawierającego wszystkie trzy karty ustaw stałą szerokość. W ustawieniach ograniczeń wybierz opcję „L + R”, aby układ rozciągał się wraz z szerokością ramki.
Teraz możesz szybko wymienić lub dodać dowolne elementy, a nawet zmienić rozmiar głównej ramki. Wszystkie elementy automatycznie dostosują się do jej szerokości.
Należy pamiętać, że w programie Figma szerokość elementu i ograniczenia są ze sobą powiązane, a niektóre kombinacje nie będą ze sobą współpracować.
Jeśli szerokość ramki Auto Layout zostanie ustawiona na „Hug contents” (Dopasuj zawartość), jej rozmiar zostanie zmieniony w oparciu o zawartość wewnątrz. Jeśli jednak warstwa wewnątrz tej ramki wykorzystuje ograniczenia „Left + Right” (Lewo + Prawo), zostanie ona rozciągnięta od jednej strony kontenera nadrzędnego do drugiej. Te dwa ustawienia są ze sobą sprzeczne: w pierwszym przypadku rozmiar zależy od zawartości, a w drugim od kontenera. W takiej sytuacji Figma automatycznie nada priorytet jednemu z ustawień.
Jeśli chcesz, aby element rozciągał się wraz z ramką nadrzędną (jak w poprzednim przykładzie z kartami produktów), najpierw nadaj elementowi stałą szerokość. Następnie możesz włączyć ograniczenia „Left + Right” (Lewo + Prawo), a element zostanie prawidłowo przeskalowany wraz z elementem nadrzędnym.
Jeśli szerokość ramki Auto Layout zostanie ustawiona na „Hug contents” (Dopasuj zawartość), jej rozmiar zostanie zmieniony w oparciu o zawartość wewnątrz. Jeśli jednak warstwa wewnątrz tej ramki wykorzystuje ograniczenia „Left + Right” (Lewo + Prawo), zostanie ona rozciągnięta od jednej strony kontenera nadrzędnego do drugiej. Te dwa ustawienia są ze sobą sprzeczne: w pierwszym przypadku rozmiar zależy od zawartości, a w drugim od kontenera. W takiej sytuacji Figma automatycznie nada priorytet jednemu z ustawień.
Jeśli chcesz, aby element rozciągał się wraz z ramką nadrzędną (jak w poprzednim przykładzie z kartami produktów), najpierw nadaj elementowi stałą szerokość. Następnie możesz włączyć ograniczenia „Left + Right” (Lewo + Prawo), a element zostanie prawidłowo przeskalowany wraz z elementem nadrzędnym.
Jak zignorować właściwości automatycznego układu (pozycjonowanie absolutne)
Co zrobić, jeśli chcesz dodać mały element, taki jak etykieta z rabatem lub przycisk „Dodaj do ulubionych”, do karty produktu, która korzysta z funkcji Auto Layout?
W tym przypadku rozwiązaniem jest ustawienie pozycjonowania absolutnego. Pozwala ono na dowolne umieszczanie elementu w ramce automatycznego układu, ignorując zasady układu zastosowane do innych elementów. Opcja ta staje się dostępna po włączeniu funkcji „Ignoruj automatyczny układ”.
Przyjrzyjmy się bliżej przykładowi, w którym musimy dodać małą etykietę z rabatem do karty produktu.
1
Najpierw utwórz etykietę z rabatem.
2
Dodaj go do karty produktu. Jeśli po prostu upuścisz go w ramce Auto Layout, zostanie on dostosowany zgodnie z istniejącymi zasadami układu i pojawi się gdzieś pomiędzy innymi elementami.
3
Włącz opcję „Ignoruj automatyczny układ”. Teraz możesz umieścić etykietę w dowolnym miejscu.
Ustawienie pozycjonowania absolutnego zastępuje układ automatyczny, umożliwiając umieszczenie elementów w dowolnym miejscu — na przykład bezpośrednio nad zdjęciem produktu.
FAQ: Główne niuanse stosowania automatycznego układu
Jak usunąć automatyczny układ w Figma
Możesz usunąć automatyczny układ, używając tego samego przycisku na pasku narzędzi, którego użyłeś do jego zastosowania. Możesz też użyć skrótu Shift + Option + A na komputerze Mac lub Shift + Alt + A w systemie Windows. Spowoduje to przywrócenie ramki automatycznego układu do zwykłej ramki.
Jeśli chcesz rozgrupować poszczególne elementy, które są zgrupowane razem, możesz użyć skrótu Cmd/Ctrl + Shift + G.
Kiedy używać automatycznego układu
- Potrzebujesz elementów, aby zachować spójne odstępy. Przykład: przycisk z ikonami i tekstem.
- Należy regularnie aktualizować treść. Przykład: lista usług o zmiennej liczbie pozycji.
- Twój układ musi być w pełni responsywny na różnych rozmiarach ekranów. Przykład: Projektowanie strony z wersjami na komputery stacjonarne i urządzenia mobilne.
- Często modyfikujesz strukturę. Przykład: pozycje menu, które często dodajesz lub usuwasz.
- Używasz wielu powtarzających się elementów projektu. Przykład: nagłówki i stopki, które pojawiają się na wielu stronach.
Dlaczego opcja Wypełnij kontener jest dostępna dla niektórych elementów, a dla innych nie?
Opcja zmiany rozmiaru kontenera wypełniającego pojawia się tylko dla elementów umieszczonych wewnątrz ramki Auto Layout. Wynika to z faktu, że opcja „Wypełnij kontener” nakazuje elementowi podrzędnemu powiększenie się lub zmniejszenie zgodnie z logiką nadrzędnego Auto Layout.
Nie można ustawić opcji Wypełnij kontener w ramce najwyższego poziomu ani w żadnym elemencie, który nie znajduje się w ramce Auto Layout — ponieważ nie ma nadrzędnego elementu Auto Layout, którego przestrzeń element mógłby „wypełnić”.
Kiedy nie należy używać automatycznego układu
Automatyczny układ nie zawsze jest konieczny. Na przykład, jeśli tworzysz coś prostego, takiego jak jednorazowy baner, którego nie planujesz ponownie wykorzystać, nie ma potrzeby ustawiania automatycznych odstępów ani reguł układu. Wystarczy tylko raz umieścić nagłówek i obraz w ramce w stałych odległościach. Konfigurowanie automatycznego układu dla układu, którego nigdy nie będziesz modyfikować ani powtarzać, nie zapewnia żadnych rzeczywistych korzyści.
Prosty baner, taki jak ten, nie wymaga stosowania funkcji Auto Layout.
Jeśli podobał Ci się ten artykuł, podziel się nim ze znajomymi. Dziękujemy!
Czytaj także:
Darmowy podręcznik o tym, jak projektować, konfigurować i uruchamiać strony docelowe o wysokiej konwersji
Darmowy praktyczny przewodnik po animacjach internetowych z przykładami, technikami,
i wskazówki, jak z nich korzystać
