Jak korzystać z automatycznego układu w Figmie

Auto Layout to niezbędne narzędzie dla każdego projektanta i użytkownika Figmy. Ta funkcja umożliwia wprowadzanie zmian, takich jak zmiana rozmiaru lub położenia ramek i obiektów. Auto Layout umożliwi dostosowanie wysokości i wagi elementu, na przykład przy ustawieniu automatycznym, skracając pracę o połowę.

Ponieważ rozmiar ekranu zmienia się w zależności od urządzenia lub przeglądarki, z której użytkownik będzie korzystał, aby uzyskać dostęp do witryny, funkcja Auto Layout sprawia, że ​​elementy wewnątrz ramek dopasowują się do tych zmian. Dzięki temu układ i struktura wyglądają bardziej precyzyjnie i synergicznie. Czytaj dalej, aby dowiedzieć się, jak korzystać z automatycznego układu w Figmie i jego funkcjach.

Korzystanie z układu automatycznego

Aby skorzystać z automatycznego układu i wszystkich jego funkcji, musisz najpierw dodać go do ramki, nad którą pracujesz. Może to być nowa ramka lub ramka zawierająca treść, obiekty i komponenty. Po wybraniu ramki lub obiektów można dodać do nich układ automatyczny w następujący sposób:

• Naciśnij „Alt + A” na klawiaturze (działa na komputerach Mac i Windows).
• Kliknij prawym przyciskiem myszy obiekty lub komponenty i kliknij opcję Auto Layout (musisz dodać tę funkcję do każdego komponentu, ponieważ nie jest to możliwe zbiorczo).
• Naciśnij ikonę plusa obok opcji „Automatyczny układ” w menu Figma.

Oprócz dodania automatycznego układu do ramki możesz wykonywać różne czynności, od układania ramek po powielanie, układanie i usuwanie obiektów.

Dodawanie i usuwanie obiektów

Dodawanie obiektów do ramki jest dość proste. Wystarczy chwycić obiekt, który chcesz dodać i podążać za wskaźnikiem. A jeśli chcesz go usunąć, przeciągnij go z powrotem i naciśnij klawisz Delete. Jeśli zdecydujesz się dodać obiekt większy niż ramka nadrzędna, będziesz musiał uniknąć domyślnych ustawień Figmy, aby móc to zrobić. Możesz to zrobić, przytrzymując przycisk „Ctrl” w systemie Windows i „Command” w przypadku komputerów Mac.

Powielanie obiektów

Jeśli chcesz dodać do ramki dwa lub więcej identycznych obiektów, możesz je powielić, co jest przydatną funkcją Auto Layer. Oto jak możesz to zrobić:

1. Kliknij obiekt, który chcesz powielić.
   
2. Przytrzymaj jednocześnie przyciski „Ctrl” i „D”, jeśli masz system Windows.
   
3. W przypadku komputerów Mac wykonaj kopię, przytrzymując przyciski „Polecenie” i „D”.
   

Układanie obiektów

Jeśli nie podoba Ci się wygląd Twojej ramki oraz organizacja znajdujących się w niej obiektów i komponentów, możesz je zmienić. Jeśli połączyłeś dwie warstwy, musisz ominąć domyślne ustawienia Figmy, naciskając „Ctrl” w systemie Windows i „Command” w przypadku komputerów Mac, aby uzyskać dostęp do opcji głębokiego zaznaczania i przenieść komponent z warstwy początkowej. Jeśli jednak jest to jedna klatka, możesz wybrać obiekt i przenieść go w inne miejsce, podobnie jak w przypadku dodawania obiektów, lub użyć klawisza strzałki.

Poziomy układu automatycznego

Inną funkcją Auto Layout jest łączenie większej liczby klatek w jedną, aby utworzyć bardziej skomplikowany interfejs, w którym można nakładać na siebie różne poziomy Auto Layout, takie jak przyciski i rzędy przycisków, post i oś czasu. Każdy poziom pozwala na dodanie kolejnego obiektu do ramki. Poziomy przycisków i rzędów przycisków są poziome, natomiast post to warstwa pionowa, w której można wprowadzać opisy, obrazy itp.

Gdy zestawisz ze sobą dwie ramki, łączą się one i uzyskują właściwości ramki nadrzędnej. Pozwala to użytkownikowi na implementację regulowanych obiektów. Możesz chwycić jedną i położyć ją na drugiej, aby połączyć dwie ramki. Aby to zrobić, musisz:

1. Wybierz jedną ramkę i wszystko, co chcesz do niej dodać.
   
2. Naciśnij „Shift + A”, aby dodać ramkę automatycznego układu.
   

Funkcje automatycznego układu

Opcja Auto Layout w Figmie ma wiele cennych właściwości i funkcji, od kierunku i kolejności układania po odstępy, zmianę rozmiaru i wyrównywanie. W tej sekcji omówimy bardziej szczegółowo każdą z tych funkcji.

Kierunek

Jak sama nazwa wskazuje, kierunek odnosi się do kolejności obiektów w ramce. Korzystając z automatycznego układu, obiekty można umieszczać:

• Pionowo – obiekty są umieszczane na osi Y. Ta opcja jest odpowiednia dla list, menu, kanałów informacyjnych itp.
• Poziomo – obiekty i komponenty na osi X (przyciski, ikony itp.).
• Pozycja zawijania – obiekty są ustawione w wielu kolumnach i wierszach.

Kolejność układania

Możesz wybrać kolejność układania, która najlepiej pasuje do Twojej ramki. Jest to zmiana wizualna, ponieważ kolejność układania pozostaje taka sama (jeśli jest to 1,2,3, pozostaje 1,2,3, ale z korektami wizualnymi). Gdy obiekty są ułożone jeden na drugim, możesz wybrać, który z nich będzie na wierzchu. Na przykład, jeśli masz trzy rzeczy oznaczone cyframi 1, 2 i 3, możesz wybrać 1 lub 3. Możesz to zrobić w następujący sposób:

1. Wybierz ramkę Auto Układ.
   
2. Przejdź do opcji Układ automatyczny po prawej stronie ekranu.
   
3. Kliknij trzy poziome kropki, aby otworzyć opcje zaawansowane.
   
4. Znajdź opcję „Układanie płótna”.
   
5. Wybierz opcję „Pierwszy na górze” lub „Ostatni na górze”.
   

Pozycja absolutna

Kolejną właściwością „Przepływu warstw” jest pozycja bezwzględna, niezależnie od kolejności i kierunku układania. Ta funkcja pozwala umieścić obiekt w dowolnym miejscu, ignorując granice ramki. Oto jak to włączyć:

1. Chwyć przedmiot i umieść go w ramce.
   
2. W menu po prawej stronie, obok wartości „X” i „Y”, kliknij ikonę przypominającą kwadrat bez krawędzi z plusem w środku.
   
3. Przesuń obiekt wzdłuż linii ramki.
   

Ustawienie przerwy

Istnieje kilka funkcji, które można dostosować w zakresie odstępów, takich jak odstęp. Istnieją dwa sposoby zmiany odstępu: automatyczny i wpisanie określonej luki. Jeśli chcesz, aby odstęp był jak największy, musisz wybrać ustawienie automatyczne w menu Układ automatyczny. Jeśli jednak zamierzasz wprowadzić wartości, wpisz je w przypisanych polach.

Ponadto ustawienie odstępu można ustawić dla wszystkich kierunków. Jeśli ikony są tylko poziome i pionowe, możesz wybrać poziomą szczelinę między nimi. Jeśli jednak znajdują się w pozycji zawiniętej, możesz dostosować ustawienia odstępu pionowego i poziomego.

Ustawienie wyrównania

Po skonfigurowaniu funkcji kierunku, wypełnienia i odstępu możesz dostosować wyrównanie obiektu podrzędnego w ramce, ponieważ ta funkcja zależy od ustawień odstępów. Nie możesz zmienić wyrównania każdego obiektu, ale wybierz wzór oferowany w menu Auto Układ. Możesz kliknąć siatkę 3×3 w menu i wybrać żądane wyrównanie. Można to zrobić za pomocą klawiszy strzałek lub przycisków WSAD na klawiaturze.

Co więcej, możesz wybrać tutaj ustawienie automatyczne, aby przełączać wyrównania w poziomie i w pionie w rzędzie. Przy określonych wartościach możesz mieć wszystkie dziewięć opcji (lewy górny, lewy dolny, lewy, prawy lewy, prawy dolny dół itp.).

Możesz także dostosować wyrównanie tekstu, włączając tę ​​opcję w menu i przytrzymując przycisk „B”.

Zmiana rozmiaru

Opcje zmiany rozmiaru Układu automatycznego mają wiele dodatkowych właściwości, takich jak przytulanie zawartości, opcja wypełniania kontenera, dostosowywanie szerokości i wysokości, wymiarów itp. Możesz wybrać opcję automatyczną, jeśli chcesz, aby wartości były stałe, ale to ogranicza możliwości. W przypadku zmiany rozmiaru zaleca się ustawienie wartości.

Możesz wybrać stałą wartość lub ustawić ją na maksymalne lub minimalne możliwe wymiary szerokości i wysokości. Treść uścisku pozwala dostosować rozmiar ramki na podstawie obiektu podrzędnego, natomiast opcja wypełnienia kontenera zmienia rozmiar obiektu zgodnie z ramką nadrzędną.

Tworzenie unikalnych ramek z automatycznym układem

Auto Layout, jako jedna z podstawowych funkcji Figmy, pozwala dostosować ramę oraz znajdujące się w niej przedmioty i przegródki według własnych preferencji. Jego właściwości i cechy są wielorakie, co pozwala na stworzenie odpowiedniego i schludnego produktu. Auto Layout to podstawowe narzędzie, które musisz opanować przed rozpoczęciem pracy w Figmie.

Z której funkcji automatycznego układu korzystasz najczęściej? Daj nam znać w sekcji komentarzy poniżej.