Cześć!

W dzisiejszym tutorialu poznasz kilka sposobów na animację w Figmie. Co więcej, dowiesz się, jak korzystać z funkcji Smart Animate.

Zaczynamy!

Na początek krótko o Figmie. Na pierwszy rzut oka wszystko wygląda całkiem znajomo – program jest dość zbliżony do Sketcha czy Adobe XD, więc jeśli pracujesz na którymś z nich, bez problemu odnajdziesz się także w Figmie. Poruszanie się po niej jest bardzo intuicyjne. Figma działa w chmurze, bez konieczności instalowania jej na komputerze – dzięki temu w prosty i przyjemny sposób możesz zacząć rysować i pchać do przodu swoje projekty. Jedynym minusem jest to, że w wersji desktop wymaga połączenia z internetem.

Projekt zespołowy w Figmie? Nic prostszego! Dzięki możliwość współpracy w czasie rzeczywistym cały zespół może jednocześnie pracować nad wspólnym projektem. Gotowy projekt można łatwo udostępnić klientowi i czekać na feedback – to bardzo wygodne rozwiązanie.
Ponieważ zauważyłam, że wiele osób korzysta z Adobe XD czy UXPina ze względu na ich funkcje animacji, więc postanowiłam napisać ten tutorial i pokazać, że jest to możliwe również w Figmie.

Ale dość teorii – czas na praktykę! 

Skomponuj wszystkie niezbędne elementy lub skorzystaj z gotowych plików dostępnych pod qr codem. Jeśli natomiast chcesz się zmierzyć sam/sama z projektem, to śmiało możesz pracować na swoich materiałach.

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]. Tutaj wybór pozostawiam Tobie, gdyż skupiamy się na animacji. Wybierz urządzenie wygodne do Twojej pracy. Na początek stwórz ramkę o wymiarach urządzenia, na którym dobrze Ci się pracuje – ja wybrałam iPhone 11 (375 × 812 px).

Dodawanie gifów

Gif to jeden z najprostszych sposobów dodawania animacji w Figmie – możesz po prostu przeciągać i upuszczać gif, jak każdy inny plik obrazu, który odtwarza się automatycznie po wejściu w Present mode. Przeciągasz gif na przestrzeń roboczą, upuszczasz… i gotowe. 😉 Możesz pobawić się tutaj także kolorystyką tła. Ja, aby nie przedłużać, idę dalej, skupiając się bardziej na samej animacji.

Możesz także wyświetlić dowolną część gifa w ramce. Jeśli chcesz zmienić nieruchomą ramkę, którą Figma prezentuje podczas edycji projektu, możesz to zmienić w ustawieniach Fill w zakładce Design. Następnie kliknij gif i przeciągnij timeline.

Wskazówka: możesz wyszukiwać animowane gify, przez strony internetowe, takie jak giphy czy tenor. Zapewne znajdziesz tu idealny gif do swojego projektu. Ja skorzystałam ze strony www.tenor.com i wpisałam w wyszukiwarkę słowo „hello”. Co jednak, gdy nie znajdziesz gifa skrojonego na potrzeby projektu? Zrób własny! Aby to zrobić, przejdźmy dalej.

Figmotion

Nie potrzebujesz już zewnętrznych narzędzi. Figmotion to narzędzie do animacji zbudowane bezpośrednio w Figmie. Dzięki niemu animowanie jest łatwiejsze i wygodniejsze. To świetny sposób na dodanie ruchu do projektów i renderowanie tych projektów jako wideo lub gif. Figmotion jest wtyczką do Figmy, która umożliwia tworzenie animacji opartych na klatkach kluczowych. Czasami występują pewne nieoczekiwane błędy i ich konsekwencje, ale bez obaw. To rzadkość.

Narysuj kolejny Frame [F] o wymiarach takich, jak poprzednio: iPhone 11 (375 × 812 px). Aby zachować porządek, nazwij go Figmotion. Następnie umieść w centralnej części minionka, którego narysowałam wcześniej w Photoshopie na potrzeby animacji – pobierzesz go z przygotowanych assetów. Możesz zmienić kolor tła – ja lubię, kiedy dobrze kontrastuje. Zaczynamy zabawę!

Jeśli nie masz zainstalowanej wtyczki, w menu aplikacji Plugins przejdź do Manage plugins – zobaczysz kilka polecanych wtyczek. Jeśli nie ma tam Figmotion, przejdź do Browse plugins in Community, gdzie pojawi się lista dostępnych wtyczek. W polu wyszukiwania wpisz Figmotion. Wybierz i zainstaluj wtyczkę, przyciskając button Instal po prawej stronie. 

Brawo! Właśnie zainstalowałaś/zainstalowałeś wtyczkę do animacji. Teraz wróćmy do projektu i otwórzmy Figmotion. Aby to zrobić, przejdź do Plugins i wybierz Figmotion, Open Figmotion – wtyczka otworzy się w nowym oknie. Następnie możesz zostać poproszony o wybór ramki, nad którą chcesz pracować.

Wskazówka: jeśli wybierzesz ramkę w Figmie, a następnie otworzysz Figmotion, program automatycznie wybierze tę ramkę jako domyślną, nad którą będziesz pracować.

W tym przypadku wybieramy frame, nad którym aktualnie pracujemy, czyli Figmotion. Teraz widzisz, dlaczego tak ważny jest porządek i nazewnictwo.

W tym punkcie powinny być widoczne elementy na warstwach Figmotion, które możesz dowolnie animować, według własnego uznania. Co więcej, możesz także przejść bezpośrednio do określonego elementu, wybierając go z listy w prawym górnym rogu okna wtyczki.

Dla przykładu: wykonamy animację obrotu minionka (już zapewne domyślasz się, skąd u niego krzywa mina i rozbiegane oczy). Nadajmy tej małej animacji trochę realizmu. Znajdź na liście właściwości, które można animować – linię rotation, a następnie kliknij przycisk key frame (klatki kluczowej) – innymi słowy: kliknij w widniejący niebieski romb przy nazwie rotation, a na czerwonej linii ukaże się drugi romb, również w kolorze niebieskim.

Dodawanie key frame w Figmotion

Dalej ustaw odpowiednią wartość (100 ms, 200 ms, 300 ms i tak dalej), w zależności od Twoich zapotrzebowań na długość animacji. Następnie kliknij w klatkę kluczową lub ręcznie ustal jej wartość. Klikając w  ikonę pędzla, ustal dokładnie opcje, jakie powinien przyjąć obiekt do animacji. Ja zastosowałam obrót 360 stopni oraz 1000 ms.

Jak najbardziej zachęcam do zabawy tymi wartościami – różne efekty Twojej animacji mogą Cię zaskoczyć ;). Ja zaproponowałam rotację 360 stopni, ms = 1000. Gdy skończysz pracę nad animacją, dodasz rotację i ustawisz odpowiednie parametry, możesz śmiało przejść do momentu, w którym wyrenderujesz swój projekt. Możesz to uczynić, klikając w button w górnym lewym rogu Render, a następnie wybrać odpowiedni format: mp4, gif lub webM.

W tym punkcie tutorialu tworzymy gifa, więc wybieramy opcję gif. Ustalamy także framerate (k/s), czyli częstotliwość wyświetlania klatek. Klatkaż to nic innego, jak liczba klatek na sekundę. Wpływa on na płynność filmu, w tym przypadku – naszej animacji. Standardowa szybkość przesuwu dla filmu wyświetlanego w kinach wynosi 24 klatki na sekundę. Na potrzeby animacji zastosowałam wartość 50.

Figmotion daje możliwość eksportu animacji jako kod, gdy klikniesz w button „Export”. Przy eksporcie do wyboru są dwie opcje: pliki CSS i JSON.

Stworzony gif przenieś na warstwę Figmotion i kliknij w Present – teraz możesz cieszyć się własnoręcznie stworzonym gifem. Gratuluję!

Figma Smart Animate

Figma posiada funkcję o nazwie Smart Animate, która jest podobna do funkcji auto-animate w Adobe XD. Na wstępie pokrótce omówię niektóre podstawy dotyczące tej funkcji. 

Smart Animate to jeden z typów animacji, których można używać podczas konfigurowania interakcji w trybie prototypu. To sposób na połączenie dwóch podobnych klatek i uzyskanie płynnej animacji pomiędzy nimi.

Jeśli przejdziesz do trybu prototypu z zakładki Prototype (po prawej stronie, na górze ekranu znajdują się 3 zakładki: Design, Prototype i Code), zauważysz, że każdy wybrany obiekt ma białą kropkę na środku po prawej stronie, która umożliwia łączenie ze sobą ramek czy obiektów. Jeśli klikniesz w te punkty/kropki, możesz przeciągnąć strzałkę z jednej klatki do drugiej, tworząc flow. W uproszczeniu: tworzysz key-frames A i B, a Figma stworzy klatki pośrednie za Ciebie.

Zróbmy to wspólnie!

Przygotuj dwie ramki (Frame A i Frame B). Upewnij się, że jesteś w trybie Prototype. Połącz Frame A z Frame B w sposób, o którym wspomniałam wcześniej. Teraz kliknij w strzałkę – pojawi się okno ustawień animacji. Wybierz Smart Animate z podmenu Animation i określ preferowany czas trwania (w milisekundach). Figma zajmie się resztą – przełączy się między ramkami po kliknięciu. Teraz podejrzyj swoją animację i gotowe! Tu prosty przykład minionka, który staje na głowie. Ale zachęcam Cię w tym miejscu do eksperymentowania parametrami. Możesz tworzyć bardziej skomplikowane przejścia i animacje.

Nie będę omawiać wszystkich interakcji, ale krótko opiszę kilka ważnych.

On click – ​​interakcja nastąpi, gdy klikniesz w wybrany obiekt. Jeśli interakcja jest w ramce, użytkownik będzie mógł kliknąć w dowolnym miejscu tej ramki, aby wywołać interakcję.

While hovering – interakcja rozpocznie się, gdy najedziesz kursorem na wybrany obiekt lub ramkę, i powróci do stanu początkowego, gdy zakończysz najeżdżanie.

Mouse enter/mouse leave – interakcja rozpocznie się, gdy mysz wejdzie lub opuści wybrany element. Może to być mały obszar, na przykład przycisk. Mouse enter możesz zastosować, aby ukazać opcje w rozwijanym menu, gdy mysz najedzie na pole. Menu pozostanie otwarte aż do momentu wykonania innej interakcji, takiej jak wybranie elementu lub kliknięcie poza pole. Natomiast mouse leave użyjesz na przykład przy alertach, gdy pole nie jest wypełnione lub zaznaczone.

After delay – interakcja pojawia się automatycznie po upływie określonego czasu – jeśli opóźnienie wynosi 300 ms, interakcja rozpocznie się po 300 ms od momentu, gdy dotrzesz do tej klatki. Interakcję można zastosować tylko do ramki najwyższego poziomu, a nie do określonej warstwy lub obiektu.

Interakcja Smart Animate odbywa się tak samo, jak w przypadku każdego innego prototypowania w Figmie. Możesz ją potraktować jako o transformację na swoim obiekcie, gdzie zmieniasz położenie, obrót i skalę tego obiektu.

Wskazówka: pamiętaj, aby zachować prostotę i trzymać porządek na warstwach – nie zmieniaj kolejności warstw w trakcie animacji i nie zmieniaj rozmiaru klatki ani wektorów obiektów.

Mam nadzieję, że udało Ci się przejść całą drogę ze mną i że nie zrezygnowałeś/zrezygnowałaś po drodze. Jeśli jakiś krok był dla Ciebie niezrozumiały, zapraszam do rozmowy i wspólnego treningu w realu. Zaprezentowałam tylko niektóre zagadnienia. Chciałam pokazać Ci, że używanie animacji to czasochłonny proces. Jednak praca, jaką wkładamy w proces animowania, jest wynagradzana końcowym efektem zachwytu użytkownika.
Figma wciąż dodaje nowe funkcjonalności. Zachęcam do próbowania, nie zniechęcania się i zabawy efektami, czasem, przejściami. Takie smaczki z pewnością doprawią Twój projekt. 🙂

Powodzenia![/vc_column_text][/vc_column][/vc_row]