Dropdown Menu w Figmie.
Poziom trudności: Łatwy (1/6)
Platforma: MAC/PC
Cześć!
W dzisiejszym tutorialu przedstawimy Ci sposób na zrobienie rozwijanego menu w Figmie, które będzie animowane! Jeśli dopiero zaczynasz pracę w Figmie, będzie to samouczek stworzony specjalnie dla Ciebie. Dodatkowo poznasz kilka przydatnych skrótów klawiszowych, które będziesz mógł używać w trakcie swojej pracy.
Figma w ostatnim czasie stała się jednym z popularniejszych programów, jakich używają designerzy. Jej dużą zaletą jest możliwość pracy w chmurze, bez konieczności instalowania na komputerze. Umożliwia projekty zespołowe, dzięki którym współpraca może odbywać się w czasie rzeczywistym. Jeśli zatem jeszcze z niej korzystałeś, zachęcamy do wypróbowania!
Zatem zaczynamy!
Animację rozwijanego menu możemy stworzyć dzięki odpowiednim komponentom i wariantom. Poniżej przedstawiam Ci 20 kolejnych kroków, dzięki którym stworzysz swoje pierwsze rozwijane menu!
Step 1.
Pierwsza rzecz – otwórz swój projekt w Figmie – bez tego się nie obejdzie. 😉
Step 2.
Na początku utwórz ramkę (kliknij w pole frame w lewym górnym rogu). Frame jest podstawową przestrzenią roboczą w Figmie – aby go stworzyć, wybierz z górnego paska narzędzi Frame lub użyj skrótu klawiaturowego [F]. Na początek stwórz ramkę, która będzie odpowiadała wymiarom Desktop.
Rysowanie Frame
Step 3.
Teraz pora na utworzenie prostokąta, w tym celu użyj przycisku znajdującego się w lewym górnym pasku Rectangle lub skrótu klawiszowego [R].
Rysowanie prostokąta za pomocą narzędzia Rectangle
Step 4.
Ramka gotowa? OK! Teraz pora na usunięcie jej wypełnienia z zachowaniem obrysu. Możesz to zrobić używając opcji z prawego paska lub skrótów klawiszowych [shift+x].
Usuwanie wypełnienia z prostokąta
Step 5.
Kolejny krok to przyciemnienie obramowania i nadanie grubszego obrysu. Aby to zrobić, najedź myszką na ramkę, a ustawienia zmień w prawym pasku w opcji Stroke wybierając ciemniejszy kolor i grubość linii, którą ustaw na poziomie 3.
Przyciemnianie i pogrubienie obwodu prostokąta
Step 6.
Kolejny krok to tekst. W polu, które utworzyłeś dodaj tekst [T] oraz zmień jego właściwości.
Dodawanie tekstu w wyznaczonym polu
Step 7.
W tym kroku przesuń tekst odrobinę w lewo i dodaj strzałki, dzięki którym polepszysz widoczność możliwości wyboru. W tym celu użyj pióra znajdującego się górnym pasku po lewej stronie lub skrótu klawiszowego [P]. Jak skończysz naciśnij enter lub done.
Dodawanie strzałki
Step 8.
Pora na zgrupowanie elementu, jaki stworzyliśmy w tym celu zaznacz cały prostokąt wraz z tekstem i użyj przycisków [ctrl g] lub [command g].
Step 9.
Utwórz 3 kopie zgrupowanego elementu. Ustaw wszystkie skopiowane elementy pod sobą, aby przypominały rozwijane menu. Kolejno usuń strzałki w skopiowanych elementach oraz nazwij składowe Twojego menu. Całość zgrupuj.
Kopiowanie elementu
Zgrupowanie całości utworzonego elementu
Step 10.
Zaznacz zgrupowany element oraz utwórz z niego komponent za pomocą przycisku znajdującego się na środku górnego paska.
Step 11.
Za pomocą tabeli po prawej stronie utwórz wariant.
Utworzenie wariantu komponentu
Utworzenie wariantu komponentu II
Step 12.
W tym kroku rozszerz fioletowe obramowanie i ustaw skopiowane warianty koło siebie.
Ustawienie wariantów w odpowiedniej kompozycji
Step 14.
Teraz mamy dwa warianty. Pierwszy – domyślny, a drugi zwykły wariant. Pora na usunięcie rozwijanych zakładek z wariantu domyślnego. Takim sposobem stworzymy stan bezczynności, a kiedy klikniemy w przycisk (wybierz menu) rozwiniemy dostępne opcje!
Stworzenie stanu bezczynności
Step 15.
W tym kroku kopiujemy wariant rozwijany, usuwamy z niego listę rozwijaną i zostawiamy tylko górną część.
Kopiowanie wariantu
Step 16.
Powstały element wypełniamy jasnym kolorem (w opcji Fill), zaznaczamy strzałkę i za pomocą bocznego paska zmieniamy jego położenie o 90 st. Strzałka powinna być skierowana w górę.
Zmiana pozycji ułożenia strzałki
Zmiana tła w prostokącie
Step 17.
Kopiujemy stworzony element dwa razy. Zmieniając tekst na nazwy, które były zawarte w naszym menu rozwijanym. Takim sposobem, stworzyliśmy kolejne 3 warianty.
Widok po utworzeniu 3 wariantów
Step 18.
Prototypowanie! Teraz przechodzimy do zakładki Prototype znajdującej się w prawym bocznym pasku. Łączymy wszystkie części, tak aby, powstało nam ładne animowane menu. W tym celu w opcjach prototypowania wybierz “Smart animation”.
Wariant domyślny łączymy z rozwijanym menu
W rozwijanym menu opcję pierwszą (…) łączymy z polem 1
W rozwijanym menu opcję drugą (…) łączymy z polem 2
W rozwijanym menu opcję trzecią (…) łączymy z polem 3
I spowrotem – nie zapomnij o tej opcji! Jest ona konieczna do płynnej pracy menu.
Prototypowanie
Ustawienia animacji
Step 19.
Implementowanie! Ty możesz zaimplementować ten komponent w Twoim projekcie, my na koniec tego tutorialu pokażę Ci, jak to zrobić.
W tym celu należy przenieść komponent default do nowej strony, dlatego też kolejnym krokiem jest utworzenie kolejnego frame i przeniesienie stanu bezczynności za pomocą przycisku [alt] lub [option].
Implementacja menu do projektu
Step 20.
Gotowe! Właśnie utworzyłeś animowane menu rozwijane w dwudziestu krokach! W opcji trybu prezentacji zobaczysz, czy udało Ci się poprawnie zaimplementować menu.
Zobacz jak u nas to wygląda!
Widok udostępnionego prototypu
