Rysowanie w Figmie: ekran powitalny aplikacji mobilnej
Poziom trudności: Łatwy (1/6)
Platforma: MAC/PC
Cześć!
Tym razem tutorial dotyczy zagadnień związanych z Figmą. Narzędzie pod wieloma kątami podobne jest do Sketcha czy Adobe XD, choć jest kilka różnic, które postaram się ukazać w tym poradniku na przykładzie projektu ekranu powitalnego aplikacji. Zaczynamy?
Ale najpierw parę słów o Figmie – to aplikacja do projektowania działająca w chmurze. Bez potrzeby instalowania jej na komputerze czy nabywania licencji, szybko i skutecznie możemy zaprojektować nasze ekrany. Dzięki możliwością współedytowania w czasie rzeczywistym nad jednym projektem razem może pracować cały zespół, co w dzisiejszych czasach jest szalenie ważne! Co jeszcze? Szablony, szczególnie na początku ułatwiają nam pracę w programie, a dzięki temu, że Figma posiada historię wersji projektu – w razie pomyłki naszej lub członka zespołu, w łatwy sposób możemy przywrócić poprzednie wersje.
Gdy projekt już zrobimy, możemy podzielić się nim z naszymi potencjalnymi użytkownikami i dać im go przetestować. Bez rejestracji czy zakładania konta osoba trzecia może przeklikać nasz prototyp i dać nam feedback. Wygodne, prawda?
Ale bez zbędnego przedłużania – bierzemy się za projektowanie!
Utwórz ramkę o wymiarach iPhone 11 (375 × 812 px). Przygotuj swój design lub skorzystaj z gotowych plików dostępnych pod linkiem. Zanim przystąpisz do prototypowania, skomponuj wszystkie elementy. Do tego ćwiczenia potrzebować będziesz: zdjęcia, prostej nawigacji do slidera, tekstu tytularnego, tekstu akapitowego i przycisku akcji.
Zdjęcie
W istniejącej ramce utwórz prostokąt (R) o wymiarach urządzenia. Mając zaznaczoną warstwę z prostokątem, na panelu Design znajdź i otwórz właściwości wypełnienia (fill). Klikając we właściwość, która domyślnie jest zawsze kolorem, otworzysz okno dialogowe. W jego lewym górnym rogu zmień tryb wypełnienia z „solid” na „image” i wybierz zdjęcie o nazwie „slider-image-1”.
Wskazówka! Figma posiada wiele przydatnych pluginów. Jednym z nich jest wtyczka Unsplash, która pozwala korzystać z darmowych zasobów tej bazy
bez konieczności wychodzenia z programu. Wystarczy, że zaznaczysz obiekt, który ma zawierać zdjęcie, otworzysz plugin i wybierzesz z niego pasujące zdjęcie. Doda się ono automatycznie, bez konieczności ręcznego zmieniania właściwości elementu.
Zdjęcia całostronicowe są efektowne, ale musisz pamiętać o czytelności znajdujących się na nich tekstów. W tym celu warto ponownie otworzyć panel właściwości i dodać kolejną warstwę wypełnienia. Tym razem będzie to gradient: od koloru czarnego o 80% przezroczystości przy dolnej krawędzi zdjęcia, aż do 0% transparencji przy jego górnej krawędzi. Warto zmienić też tryb mieszania na mnożenie (multiply), żeby złagodzić kontrast pomiędzy warstwą zdjęcia i aplą. Zrobisz to w tym samym panelu zarządzania wypełnieniem obiektu (fill), klikając w ikonę kropli.
Wskazówka! Żeby gradient wyglądał bardziej naturalnie, przeciągnij jego punkt początkowy i końcowy mniej więcej o 20% poniżej oraz powyżej krawędzi zdjęcia.
Tekst
Aby utworzyć tekst w Figmie, wybierz z górnego paska narzędzi ikonę oznaczoną „T” lub użyj skrótu klawiaturowego (T). Wykorzystaj użyty w projekcie layout lub skomponuj swój własny. Po skończonej edycji zgrupuj tekst (ctrl/cmnd + G), aby utrzymać porządek w projekcie. Podziękujesz sobie za to na etapie
prototypowania. Dobierz odpowiednio kolor tekstu, pamiętaj, by utrzymać pomiędzy kolorem tekstu a zdjęciem odpowiedni kontrast.
Nawigacja slidera i button
Masz już zdjęcie oraz tekst, brakuje ostatniego elementu layoutu: nawigacji, która na ostatnim slajdzie zastąpiona zostanie buttonem. Aby utworzyć nawigację, narysuj trzy elipsy narzędziem „ellipse”. Każdy o wymiarze 16x16px, oddalone od siebie o 8px. Tak ułożoną nawigację zamknij w kolejną ramkę (ctrl/cmnd + alt/opt + G) i ułóż w dolnej części ekranu. Jak w każdej nawigacji, elipsy będą miały dwa stany: domyślny oraz aktywny, który wskaże, na którym etapie ekranu powitalnego się aktualnie znajdujesz. Kolor active może być tożsamy z kolorem tekstu, dla stanu domyślnego wybierz coś, co będzie bardziej wtapiać się w tło.
Button składa się z tekstu i wypełnienia. Najlepiej jest użyć do tego oczywiście narzędzia tekstu. Zamknij go w ramkę (ctrl/cmnd + alt/opt + G), ustaw odpowiednie marginesy, a ramkę wypełnij kolorem.
Wskazówka! W Figmie nie znajdziesz popularnych „artboardów”, jak w narzędziach typu PS, AI czy Sketch. Różnica polega nie tylko na nomenklaturze, ale też dotyczy sposobu użycia. Ramki w Figmie (frames) możesz zagnieżdżać w sobie na wielu poziomach. Przypomina to znane z innych aplikacji grupowanie, różnica polega na tym, że pomiędzy ramkami możesz ustalać relacje między rodzicem a dzieckiem. Ramki mogą reagować na właściwości rodzica: kolor, szerokość, wysokość czy wyrównanie, pozwalają utrzymać porządek i spójność w elementów w projekcie na wielu poziomach.
Twój mockup
Skoro już zadbałeś/zadbałaś o wszystkie składowe, zgrupuj je, używając skrótu ctrl/cmnd + G, i nazwij „Screen 1”. UWAŻAJ: zgrupuj wszystko poza nawigacją, to ważne z punktu widzenia późniejszego prototypowania. Teraz wystarczy, że (pozostając w tej samej ramce) skopiujesz grupę. Nazwij ją „Screen 2”, zmień tekst oraz zdjęcie. Skopiuj ponownie, tym razem nazywając grupę „Screen 3” i powtórz zmiany w nowo utworzonej grupie.
Wskazówka! Żeby dotrzeć do zagnieżdżonego elementu, nie musisz przeglądać panelu warstw. Wystarczy, że wskażesz kursorem element i klikniesz w niego, przytrzymując jednocześnie ctrl/cmnd.
Prototypowanie: główne ekrany
Podsumowując: masz jedną ramkę, która zawiera nawigację, oraz trzy grupy, po jednej dla każdego z kroków ekranu powitalnego. Skopiuj ramkę trzykrotnie tak, by mieć oryginał oraz trzy jego kopie. Możesz użyć standardowego narzędzia kopiuj/wklej, możesz chwycić całą ramkę i, przytrzymując alt/opt, przeciągnąć kursor w bok (i tak trzykrotnie). Nazwij skopiowane ramki „Welcome Screen 01”, „Welcome Screen 02”, „Welcome Screen 03”. W ramce 02 wyłącz widoczność grup odpowiadających za ekran 1 i 3, a w ramce 03 wyłącz grupy 01 i 02. UWAŻAJ: nie kasuj grup, tylko je ukryj. W ramce 02 oraz 03 zmień kolory w nawigacji tak, by
odzwierciedlały stan faktyczny: w ramce 02 aktywny kolor powinna mieć środkowa elipsa, w ramce 03 – skrajna prawa.
Prototypowanie: mikroanimacje
Skopiuj ponownie ramki o nazwach „Welcome Screen…”, a następnie uporządkuj ich nazwy, dodając do każdej kopii sufiks „-mikro” (lub dowolny inny, to nie ma znaczenia – ważne, by było wiadomo, że są to zduplikowane elementy). W każdej ramce z dopiskiem „-mikro” (lub innym oznaczeniem, jakie przyjęto dla kopii ekranów powitalnych) zrób dwie operacje:
wejdź we właściwości zastosowanego ekranu, zmień tryb wypełnienia na z „fill” na „crop” i powiększ proporcjonalnie zdjęcie mniej więcej o 20%,
tytuł ekranu oraz tekst akapitowy przesuń tuż poza krawędź ramki, odpowiednio: tytuł poza górną krawędź, a akapit poza dolną.
Wskazówka! do przesuwania elementów poza ramki najlepiej wykorzystać panel nawigacji elementu, który znajduje się w prawej kolumnie, w karcie „design”. W tym przypadku znajdź położenie elementu na osi Y i aktualną wartość zastąp wysokością elementu odjętą od zera, jeśli przesuwasz poza górną część, lub wysokością elementu dodaną do wysokości całej ramki, w przypadku, gdy element chcesz schować za dolną krawędzią ramki.
Prototypowanie: łączenie ekranów
Prototypowanie w Figmie ma poświęconą osobną kartę, którą znajdziesz w prawej kolumnie interfejsu programu. Twoim zadaniem jest teraz połączenie przygotowanych plików w logiczną całość. Namawiałem Cię w tym tutorialu już kilkukrotnie do dbania o porządek w projekcie i teraz jest moment, gdy być może sobie za to podziękujesz. Porządek łączenia ekranów prototypów to: ekran nr 1 z dopiskiem „-mikro” + ekran 1, dalej ekran 2 z dopiskiem „-mikro” + ekran 2 i na koniec to samo z ekranem 3.
Przejdź do karty „prototype”, po zaznaczeniu ramki „Welcome Screen 01-mikro” pojawi się mała elipsa na środku jej prawej krawędzi. Wystarczy, że chwycisz ją kursorem i przeciągniesz na ramkę, która ma być następna w kolejności.
Automatycznie pojawia się okno dialogowe. Możesz wybrać w nim następujące elementy:
wyzwalacz akcji (trigger): automatyczny, kliknięcie myszką, najechanie kursorem, tapnięcie, przeciągnięcie i tak dalej,
ekran, do którego akcja ma prowadzić (to już wykonałeś/wykonałaś, budując połączenie między ekranami na ekranie roboczym Figmy),
typ animacji, czyli ruch zaprojektowany przez Ciebie lub któryś ze wzorców znanych z mobilnych aplikacji: przesuwanie jednego ekranu przez drugi, przykrywa
nie jednego ekranu drugim i tak dalej; tutaj też określasz kierunek tego ruchu,
w typie animacji projektowanym przez Ciebie znajdziesz więcej opcji do wyboru, które powiążą zachowanie elementów w animacji z czasem,
czas trwania animacji, liczony w milisekundach.
W tym ćwiczeniu występują dwa rodzaje interakcji: główne, pomiędzy ekranami slidera, oraz mikroanimacje, czyli te w ramach jednego slajdu.
Zaczynając od tych pierwszych, czyli mikroanimacji: trigger ustaw na automatyczny, czyli „after delay”. Czas trwania ustaw na 300 ms. W zakładce „animate” wybierz „smart animate” z czasem trwania 900 ms i tw rybie „ease in and out back”.
Wskazówka! trigger „after delay”jest możliwy jedynie, jeśli zaznaczysz całą ramkę. Pamiętaj, by omyłkowo, zwłaszcza, gdy próbujesz połączyć ramki ręcznie, nie zaznaczyć elementu wchodzącego wyłącznie w jej skład.
Jeśli chodzi z kolei o animacje pomiędzy slajdami, to triggerem ma być przeciąganie po ekranie palcem, czyli „on drag”, przy czasie trwania 600 ms. Typ animacji to „push”, który da naturalny efekt „wypychania” ekranu, który użytkownik już obejrzał.
Wskazówka! w przypadku przejść między slajdami ważną opcją, która się pojawi, jest „smart animate matching layers”. Spowodujesz, zaznaczając ją, że powtarzający się wszędzie panel nawigacyjny na dole strony zignoruje polecenia animacji i będzie zawsze w stałym miejscu.
Dobrym pomysłem w prototypowaniu jest zapętlenie animacji – tak, by user nie musiał szukać sposobu, jak powrócić do jej początku. W tym celu powiąż ostatni slajd z pierwszym opcją „drag”.
