Projektuj Animacje UI z Lottie Files i After Effects: Bonus - Lottie i Figma

0:00Cześć, Witam Cię serdecznie z tej strony Michał wydechowy cdp.

0:02pl.

0:03W tej lekcji bonusowej do kursu chciałbym pokazać Ci jak tworzyć proste animacje

0:07lotu i eksportować do formatu.

0:10Loty tutaj.

0:11Mamy przed sobą projekt landing page'a, który przygotowałem wcześniej i mamy tutaj

0:17takie logo, którego tą ikonkę, ten sygnet i chciałbym z animować, więc

0:22sobie go skopiuję i stworzę z tego taki prototyp animacji,

0:26który następnie eksportuje do lot LOD i z pomocą pluginu dedykowanego

0:31pluginu do Sigmy.

0:33Więc wkleję sobie to może na razie tutaj i stworzę sobie z tego może

0:43taki powiedzmy frame do tego frame a wrzucę sobie ten sygnet.

0:50Następnie nazwiemy to może sygnet 1 albo powiedzmy stage.

0:591.

1:01Zrezygnujemy z wypełnienia, czyli przechodzę tutaj do preferencji i

1:05ustawiam na brak.

1:08Następnie wezmę tę ramkę i z altem przeciąga się w

1:13prawo, aby stworzyć sobie kopię i np.

1:14tutaj niech coś tam się zadzieje z tym elementem np.

1:18niech się obróci i trochę podskoczy do góry.

1:22Następnie nazwijmy to stage 2 np.

1:27i znowu z altem przeciągam w prawą stronę.

1:29Mogę jeszcze przytrzymać shift, żeby nie przesuwało mi się gdzieś

1:32tutaj góra dół i tutaj np.

1:34niech to znowu się obróci, tak, to głowa robocika i przejdzie tutaj

1:38powiedzmy w ten sposób.

1:41I mamy trzy takie stany.

1:42Teraz musimy przejść do trybu Prototype i zaznaczę sobie

1:47ten pierwszy stan, a następnie pociągnę tutaj węzeł do tej drugiej.

1:53Tego drugiego frameworka.

1:55I tutaj co sobie ustawimy?

1:57Ustawimy sobie.

2:00Start Animate i możemy sobie wybrać s.

2:04Is. Out.

2:04Albo is in, albo i in I out.

2:07Czyli po prostu sterujemy i Kingiem.

2:10Możemy ewentualnie wybrać sobie bonusy.

2:13Mamy tutaj jeszcze ilość milisekund.

2:17Jak długo to ma trwać, ale chyba weźmiemy sobie po prostu izi i net out.

2:25I mamy 300 milisekund. Niech tak zostanie.

2:27Teraz ten frame podłączymy sobie do tego frame a tylko nazwijmy go nr 3.

2:35OK, czyli tutaj chwytamy i dopinamy tutaj.

2:43I to też będzie i inne. About.

2:47Natomiast to co ja chciałbym tutaj zrobić, to

2:50jeszcze musimy wrócić do początkowej pozycji, tak żeby

2:53ta animacja mogła się zapętlić.

2:55I teraz to podepniemy sobie z powrotem tutaj, czyli Navigation Station Start

3:03Animate i ustawiamy tutaj 300 milisekund.

3:10OK. Tak to wygląda.

3:11Możemy to nazwać Flow 1 albo np.

3:14całą tą sekwencję możemy nazwać np.

3:18logo Animation.

3:22przykładowo.

3:23I teraz musimy sobie odpalić plugin LOD Files do Sigmy, który

3:28jest naturalnie darmowy.

3:29Wystarczy, że wybierzemy sobie plugins.

3:32Następnie możemy sobie wybrać Manage plugins.

3:35I tutaj możemy sobie po prostu wyszukać.

3:37Jeżeli nie widzimy możemy sobie wyszukać lot I files.

3:41Klikam i ten plugin jest uruchomiony.

3:44Ja tutaj wcześniej zalogowałem się do mojego dashboard.

3:47Jeśli możemy sobie wybrać log out ok.

3:52I tutaj możemy wybrać następnie login, żeby tutaj dodać access do naszego konta

3:58na Allow I files wybieram Allow Access.

4:01I tutaj już jesteśmy zalogowani.

4:02Mamy tutaj bibliotekę darmowych animacji, które możemy wykorzystać.

4:07Natomiast jeśli wybierzemy sobie taką animację, to w filmie w

4:10projekcie Filmy nie możemy.

4:12zaciągnąć tego jako animowany lot.

4:14Może to być tylko statyczny SVG albo animowany GIF.

4:17Natomiast później do dewelopera musimy podpiąć po prostu link do tej konkretnej

4:21animacji, tak żeby on wiedział, o którą animację chodzi i

4:25żeby właśnie taką animację, lot i taki konkretny plik lot trzeba tam umieścić w

4:28tym miejscu, gdzie mamy zamocowany SVG albo GIF.

4:32No dobra, ale nam chodzi o stworzenie z tego, z tej

4:36krótkiej prostej animacji plik slot i wybieram Export sloty, a następnie

4:40wybieram Select Prototype Flow i nasz logo Animation czyli ten czyli tą sekwencję.

4:47No i zobaczmy jak ona wygląda.

4:51Dokładnie w ten sposób.

4:55OK, tak wygląda nasza animacja.

4:57Możemy tutaj np.

4:58wprowadzić jeszcze zmiany.

5:00Czyli wybierzmy sobie Beck, Z tym sobie idziemy tutaj, a np.

5:04tutaj powiedzmy możemy sobie to przesunąć troszkę w tę stronę, dajmy na to,

5:09a to troszkę tutaj ten sygnet, troszeczkę w tę stronę.

5:14OK.

5:15No i teraz spróbujmy jeszcze wybrać ponownie nasz O.

5:20I teraz wygląda to fajnie.

5:25Możemy to przyspieszyć albo opóźnić

5:30i możemy oczywiście wybrać Save Workspace albo pobrać gotowy plik lotu.

5:34Ja wybieram Save the Workspace.

5:37Wybieram sobie na przykład Web kurs Save.

5:45I nasza animacja jest gotowa.

5:46Jeżeli przeniesiemy się do przeglądarki internetowej to logujemy się do naszego

5:52Dashboard u automatycznie i mamy naszą animację, która działa w ten sposób.

5:56Mamy wszystkie dostępne opcje, które już znamy.

5:59Naturalnie te animacje możemy sobie tutaj jak wspomniałem wrzucić do naszego

6:04projektu landing page, ale firma nie umie czytać floty.

6:09Możemy to samo kupować właśnie jako np. taki.

6:14GIF. No i ok, wszystko działa.

6:16Tą naszą animację możemy sobie tak jak wspomniałem pobrać.

6:19I mamy tutaj samolot i Jackson zoptymalizowany Jackson i nasz lot i

6:26waga jest śmieszna.

6:29Mamy niewiele ponad 1 kb.

6:32Natomiast tak jak wspomniałem tą animacje możemy sobie tutaj osadzić w

6:36filmie tylko jako MOK lub w formie w formie SVG albo GIF.

6:42Wystarczy, że wybierzemy Insert GIF.

6:45Możemy wybrać sobie rozmiar np.

6:46150 pikseli.

6:48Zaznaczamy transparentność i wybieramy Insert GIF i zostanie to

6:51wrzucone do odpowiedniej.

6:53Zaznaczam do odpowiedniego zaznaczonego frames.

6:56Ewentualnie albo ewentualnie możemy sobie wstawić pojedynczą klatkę w formie pliku.

7:02SVG zostanie to też wrzucone do zaznaczonego frame a.

7:07OK. Tak to wygląda.

7:11Te animacje w filmie będą raczej proste.

7:15Nie będą tak złożone i rozbudowane jak te, które zaprojektowaliśmy w After Effects,

7:19ale warto wiedzieć, że Sigmy też można eksportować sobie animacje, loty.

7:24A teraz to wszystko w tej lekcji bonusowej.

7:26Dziękuję Ci serdecznie za uwagę i do usłyszenia w kolejnych lekcjach.

7:29Hej, cześć!