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ć:
- Kliknij obiekt, który chcesz powielić.
- Przytrzymaj jednocześnie przyciski „Ctrl” i „D”, jeśli masz system Windows.
- 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:
- Wybierz jedną ramkę i wszystko, co chcesz do niej dodać.
- 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). Kiedy 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:
- Wybierz ramkę Auto Układ.
- Przejdź do opcji Układ automatyczny po prawej stronie ekranu.
- Kliknij trzy poziome kropki, aby otworzyć opcje zaawansowane.
- Znajdź opcję „Układanie płótna”.
- 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ć:
- Chwyć przedmiot i umieść go w ramce.
- W menu po prawej stronie, obok wartości „X” i „Y”, kliknij ikonę przypominającą kwadrat bez krawędzi z plusem w środku.
- 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.
Dodaj komentarz