Jak wykorzystać wtyczkę ruchu w Figma do animacji?

Figma to fantastyczne narzędzie do planowania punktów połączeń Web Design. Być może najlepszą rzeczą jest gigantyczna okolica. Zapewnia spójną progresję niezwykłych zasobów, takich jak formaty, symbole, instrumenty i moduły, które przyspieszają i ułatwiają pracę nad Twoim planem.

Figma ma wiele zalet w porównaniu z Adobe XD czy Sketchem. Jest to oparte na programach urządzenie konfiguracyjne interfejsu, które działa międzystopniowo i działa w dowolnym programie i systemie operacyjnym. Daje najlepszy klimat do stałej, skoordynowanej pracy z różnymi twórcami i współpracownikami.

Oprócz funkcji kooperacyjnych i zdolności do tworzenia inteligentnych modeli, kodów handlowych, projektów i kompletnych formatów, za pomocą modułów, Figma może dalej rozbudowywać swoje elementy - jak robotyzacja żmudnych przedsięwzięć.

Nowe zasoby Figma są codziennie przekazywane do Społeczności Figma. Zrobiliśmy cenny przegląd najlepszych modułów i instrumentów, aby przyspieszyć proces pracy nad Twoim planem w świetle naszego bezpośredniego wglądu, aby zaoszczędzić Twój czas.

Każdy architekt UX/UI przechodzi do drugiego momentu, kiedy potrzebuje ożywić swój plan. Co więcej, jakie urządzenia byłyby wskazane, abyśmy zdecydowali się na wykonanie kilku połączeń w interfejsie użytkownika, dodanie kilku olśniewających uderzeń lub naładowanie jakiejś osoby do przenośnej gry?

Pokażę Ci fascynujący moduł Figma, aby to wszystko zrobić. Nazywa się Ruch. Szybko określimy jego punkt interakcji, nauczymy się podstaw żywotności, a nawet stworzymy fajne rzeczy.

Niech wszystko się potoczy…

Przede wszystkim powinniśmy go przedstawić. Otwórz Figmę i przejdź do Społeczności.

Wpisz „Ruch” w pasku wyszukiwania w najwyższym punkcie strony, a w wynikach wstawiaj wtyczki.

Obecnie powinieneś nacisnąć przycisk Instaluj i to wszystko w pigułce. Powinniśmy dodać kolejny dokument Figma. Z rozwijanego menu wybierz Wtyczki/Ruch.

Niedawno rozpoczęliśmy Motion. Wszyscy jesteśmy przygotowani do kolejnego etapu.

Zarys

• Zanim użyjemy innego narzędzia, powinniśmy dowiedzieć się, jak z nim funkcjonować. Powinniśmy szybko nakreślić punkt interakcji.
• Wygląda na to, że to Figma UI, prawda? To świetne rozwiązanie dla nowych klientów.
• Na górze mamy zakładki: nasze działania, pod spodem pasek narzędzi, lewą tablicę i przebieg wydarzeń z klatkami kluczowymi. Możesz dodać wiele ruchów do każdego rekordu.
• Powinniśmy szybko zarysować niektóre przyciski paska narzędzi. Omówimy je później w subtelności.
• Automatycznie aktualizuj klatki kluczowe.
• Ponowne mieszanie bez ponownego mieszania/i przerywania.

Odtwórz/Zatrzymaj

• Aktualna pozycja czasowa/czas całkowity.
• Na lewej tablicy możemy przeglądać warstwy według ich nazw i warstwy kanałów z klatkami kluczowymi. Jeśli nic nie zostanie wybrane w Figmie, możemy zobaczyć warstwy płyty bez podwarstw.
• Jest przeznaczony do ciężkich dokumentów, które mogą być opóźnione. Wyszukaj żądane warstwy lub wybierz warstwy w Figma, a podsumowanie pokaże wszystkie podwarstwy.

• Na tablicy harmonogramu zobaczymy wszystkie klatki kluczowe wybranej warstwy.

Dodaj klatkę kluczową

Handluj z jego pomocą, możesz wymienić dowolną warstwę na GIF, Sprite, Frames lub CSS.

Zakładając, że pracujesz w grupie, każda osoba, która zbliży się do dokumentu i uruchomi Motion, zobaczy Twoją aktywność.

Świetnie nadaje się do wykorzystania krzyżowego z twoją grupą i projektantami, którzy wykonają twoje działania w kodzie. Dwukrotne dotknięcie dowolnej klatki kluczowej otworzy tablicę klatek kluczowych, na której możesz ustawić punkt zwrotny, wartość i zdolność ułatwiającą.

Twoja najbardziej niezapomniana żywotność

Od hipotezy do próby. Powinniśmy zrobić w niej obudowę i kwadratowy kształt. Rozmiary i odcienie nie mają obecnie żadnego znaczenia. Umieść kwadratowy kształt bliżej przepustki na rogu obudowy, aby mieć miejsce na możliwość jej przesunięcia.

Teraz przejdź do Ruchu i naciśnij przycisk Dodaj klatkę kluczową we właściwości X.

Nasza żywotność będzie trwać przez 500ms. Przesuń różowy uchwyt harmonogramu do pozycji 500ms (0,5s).

Przenieś nasz kwadratowy kształt na bok, przejdź do Ruchu i dotknij przycisku Dodaj klatkę kluczową. Nie ma w tym nic więcej. Kliknij Play i zobacz swoją najbardziej pamiętną aktywność. Dzięki tym metodom możesz przyspieszyć każdą z widocznych właściwości.

Śmiało i zmień właściwości Y, Szerokość, Wysokość, Przeciągnięcie narożnika, Obrót, Krycie i Wypełnienie.

Zasady

Powinniśmy kontynuować i wskakiwać bardziej w subtelności.

Punkt rewolucji

Co najważniejsze, powinniśmy uchwycić, co jest punktem rewolucji lub punktem zakotwiczenia. Powinniśmy założyć, że mamy w sobie krawędź i kwadratowy kształt. Kwadratowy kształt: szerokość = 100, poziom = 100, x = 100, y = 100, obrót = 0°.

Przejdź do Ruchu i dodaj klatkę kluczową dla właściwości X. Kliknij dwukrotnie nową klatkę kluczową. Obecnie widzimy tablicę klatek kluczowych dla określonych właściwości. Tutaj możesz ustawić punkt obrotu lub punkt zakotwiczenia, oszacowanie właściwości i zdolność ułatwiającą.

W tablicy właściwości Figma scharakteryzowaliśmy X jako równoważne 100; tu jednak widzimy 150. Dlaczego?

Wyjaśnieniem jest punkt obrotu, który ma skupiać się na osi X i Y. Zgodnie z tymi liniami pozycja to: X + (Szerokość/2) = 100 + (100/2) = 150. Aby zarządzać podobnymi cechami jak Figma, należy wybrać lewy górny róg punktu obrotu. Jednak nie spiesz się!

Powinniśmy przesunąć nasz kwadrat o 100 w jedną stronę wzdłuż X i obrócić o - 45°.

Kliknij Odtwórz i zobacz, jak się porusza i obraca. Wyobraź sobie jednak scenariusz, w którym zmieniamy rewolucję, aby podświetlić lewy górny róg.

Nie ma znaczenia, jaką klatkę kluczową zmienisz w punkcie obrotu. Jest to typowe dla wszystkich klatek kluczowych warstwy.

Potoczymy się i skręcimy jak w lewym górnym rogu warstwy.

Figma pokazuje wartości X i Y wskazane przez lewy górny róg punktu obrotu warstwy; jednak szacunek rotacji — jak w punkcie środkowym. Powinieneś o tym pamiętać, kiedy coś ożywiasz. Jednak z reguły nie będziesz musiał przenosić go z głównego tematu w Motion.

Ułatwienie zdolności

Ułatwiające możliwości kontrolowania zwiększania i zwalniania prędkości. Istnieją cztery możliwości ułatwiające:

• Bezpośredni
• Łatwiejszy wzrost prędkości na początku
• Wycofaj się — w końcu spowolnienie
• Back in-out — prędkość wzrasta na początku i ostatecznie zwalnia.

Jest tu inny wybór — kroki. To natychmiast zmieni szacunek, praktycznie bez postępu. Może spróbujemy. Mamy kształt kwadratu przesuwający się od strony mijanej do prawej połowy krawędzi. Wybierz końcową klatkę kluczową i otwórz tablicę klatek kluczowych. Zmień zdolności ułatwiające i zobacz wynik.

Powiel/Wklej

Zmiana kolejności klatek kluczowych również jest prosta. Wybierz klatki kluczowe, naciśnij Ctrl/Cmd+C lub kliknij Kopiuj z menu rozwijanego, aby wybrać klatki kluczowe. Następnie możesz je przykleić na dowolnej warstwie. Czasami korzystne jest animowanie kilku warstw w ten sam sposób.

Napraw/Ponów

Możesz naprawić i ponownie spróbować wszelkich postępów w aktywnościach. Pomoże Ci Ctrl/Cmd+Z dla Cofnij i Ctrl/Cmd+Y dla Ponów.

Automatyczna aktualizacja klatek kluczowych

Jeśli ten przycisk jest dynamiczny, wartości klatek kluczowych będą konsekwentnie odświeżane w bieżącej pozycji czasowej po włączeniu ruchu. Masz 1s opóźnienie po zatrudnieniu okna modułu, aby je dezaktywować lub nacisnąć przycisk Odtwórz i rozogniskować okno.

W ten sposób możesz dodać klatki kluczowe, przejść do jego pozycji czasowej, wprowadzić określone ulepszenia dla swoich warstw w Figma i wyśrodkować okno modułu. Ruch zrobi wszystko.

Zobacz fps

Możesz ustawić liczbę osłonek, które zobaczysz w czasie rzeczywistym w Figmie: na przykład 24 lub 60. Możesz zmienić ją z 60 na 24 w przypadkach, gdy żywotność jest opóźniona. Staraj się nie podkreślać, że nie wpłynie to na handel.

Rehasz

Są tu trzy możliwości:

• Bez powtórek
• Rehasz
• Powtórka i przerwa

Ten ostatni jest fascynujący. Zatrzyma jedynki na końcu ruchu i dopiero po tym powtórzy. Od czasu do czasu, gdy ustawisz Powtórz, nie możesz zobaczyć wyniku swojego ruchu. Najlepiej byłoby, gdybyś miał odroczenie przed rozpoczęciem kolejnego okrążenia aktywności.

Możesz dodać klatkę kluczową dla potrzebnego okresu. W każdym razie Motion daje takie instrumenty — powtarzanie i opóźnianie.

Zawijanie

Ten blog zebrał mnóstwo pomocnej wiedzy na temat życia w Figma. Teraz masz okazję i silną wolę, aby ćwiczyć i ożywić swoją fajną energię.

Chcieć wiedzieć więcej? Odwiedź www.webdew.com lub skontaktuj się z nami, aby skorzystać z naszych usług!

Redaktor: Tamanna