Zanim zaczniesz

Kto może korzystać z tej funkcji?

Użytkownicy w dowolnym zespole lub planie

Użytkownicy z dostępem can edit (może edytować) do pliku mogą tworzyć i edytować prototypy.

Użytkownicy z dostępem can view (może wyświetlać) do pliku lub prototypu mogą wyświetlać prototypy.

Inteligentna animacja wyszukuje dopasowane warstwy, rozpoznaje różnice i animuje warstwy między klatkami w prototypie.

Podczas tworzenia prototypu możesz wybrać pozycję Smart animate (Inteligentna animacja) z listy przejść. Możesz także użyć inteligentnej animacji z innymi przejściami, aby tworzyć płynne animacje.

Inteligentna animacja pozwala szybko tworzyć zaawansowane animacje. Użyj inteligentnej animacji do replikowania:

• sekwencji wczytywania;
• przewijania z efektem paralaksy;
• gestów dotykowych, na przykład przeciągania, przesuwania, długiego przytrzymania;
• suwaków, przełączników i włączników;
• rozwijania zawartości (pokazywania więcej/mniej);
• przeciągania w celu odświeżenia.

Więcej informacji o tym, jak stworzyliśmy inteligentną animację, znajdziesz we wpisie na naszym blogu: Przedstawiamy inteligentną animację.

Obsługiwane właściwości

Inteligentna animacja szuka dopasowanych warstw, które istnieją w wielu ramkach. System Figma bierze pod uwagę zarówno nazwę warstwy, jak i jej pozycję w hierarchii.

W przypadku warstw, które pasują do siebie w różnych ramkach, system Figma rozpoznaje, co uległo zmianie, i stosuje przejście, aby je animować.

Inteligentną animację można stosować zarówno do całych obiektów lub komponentów, jak i do pojedynczych warstw w obrębie komponentu lub grupy.

Istnieje prawdopodobieństwo, że więcej niż jedna właściwość obiektu ulegnie zmianie pomiędzy ramkami. Poniżej wyszczególniliśmy każdą z obsługiwanych przez nas właściwości, wiesz zatem, czego się spodziewać.

Skala

Jeśli pomiędzy klatkami obiekt zmienia rozmiar, system Figma animuje jego zmniejszanie się lub powiększanie.

Pozycja

System Figma rozpoznaje, czy położenie obiektu, czyli współrzędne x i y, uległy zmianie. Następnie obiekt jest animowany, przesuwając się z aktualnej pozycji do pozycji w ramce docelowej.

Nieprzezroczystość

Inteligentna animacja potrafi również rozpoznawać krycie warstwy lub obiektu. Można dostosować krycie, aby obiekt pojawiał się lub znikał między ramkami.

Ustaw krycie warstwy na 0%, zamiast przełączać widoczność warstwy. System Figma zastosuje przejście przenikania, aby animować krycie warstwy.

Krycie można dostosować za pomocą właściwości wypełnienia warstwy, a także za pomocą właściwości Layer (Warstwa). Inteligentna animacja będzie stosowana w obu przypadkach.

Zalecamy dostosowanie przezroczystości całej warstwy. Dostosuj ustawienie krycia warstwy na karcie Design (Projekt) na prawym pasku bocznym.

Obrót

Funkcja inteligentnej animacji uwzględnia również obrót i orientację warstwy.

Możesz obracać obiekt za pomocą pola obrotu na prawym pasku bocznym lub w samej przestrzeni roboczej. Ustaw kursor na narożnikach obiektu, aż pojawi się kursor obrotu .

Obróć pojedynczą warstwę naraz lub obróć grupę warstw wokół jednego punktu zakotwiczenia.

Wypełnienie

System Figma inteligentnie animuje wszelkie zmiany wypełnienia obiektu. Dzięki temu możesz animować zmiany między jednolitymi kolorami, gradientami, a nawet wypełnieniami obrazu.

Stosowanie inteligentnej animacji

Istnieją dwa sposoby wykorzystania inteligentnej animacji w prototypach. Jako samodzielne przejście lub przy użyciu inteligentnej animacji dopasowującej warstwy do innej animacji.

Inteligentna animacja

Wybierz opcję Smart animate (Inteligentna animacja) w polu przejścia, aby utworzyć animację pomiędzy dwiema klatkami.

1. Otwórz kartę Prototype (Prototyp) na prawym pasku bocznym.
2. Zaznacz warstwę, grupę lub ramkę w obszarze roboczym. Na prawej krawędzi pojawi się węzeł połączenia.
3. Kliknij węzeł i przeciągnij go do następnej ramki, aby utworzyć połączenie.
4. Zdefiniuj interakcję na prawym pasku bocznym, wybierając wyzwalacz i operację. System Figma ustawi drugą ramkę jako miejsce docelowe.
5. W sekcji Animation (Animacja) wybierz opcję Smart animate (Inteligentna animacja) z pola przejścia.
6. Zastosuj Easing (Przesuwaj powoli) do przejścia lub zmień ustawienie Duration (Czas trwania) (opcjonalnie).
7. Powtórz tę czynność dla pozostałych ramek, które chcesz inteligentnie animować.
8. Kliknij przycisk na pasku narzędzi, aby otworzyć prototyp w widoku prezentacji.

W poniższym przykładzie mamy trzy ramki z kilkoma pasującymi warstwami. Chcemy, aby inteligentna animacja usunęła pozycję Abel Tasman Coast Track z naszej listy ulubionych.

Inteligentna animacja przenosi nas teraz płynnie pomiędzy każdą klatką w naszym prototypie!

Inteligentne animowanie dopasowanych warstw

Jeśli chcesz inteligentnie animować niektóre warstwy w prototypie, podczas gdy używasz innego głównego przejścia, możesz zaznaczyć pole wyboru Smart animate matching layers (Inteligentnie animuj pasujące warstwy).

System Figma traktuje stałe warstwy inaczej, gdy używasz inteligentnej animacji z innymi przejściami.

• Warstwy, które nie pasują: system Figma użyje głównego przejścia, które wybierzesz.
• Warstwy, które pasują: system Figma będzie inteligentnie animować wszelkie różnice w obsługiwanych właściwościach.
• Pasujące warstwy, które są zablokowane: system Figma nie zastosuje żadnego przejścia.
• Ustalone warstwy, które nie pasują: system Figma zastosuje przejście rozpuszczania zamiast wybranego przez Ciebie przejścia.

Aby użyć inteligentnej animacji pasujących warstw, zaznacz pole w prawym pasku bocznym podczas dostosowywania animacji:

W naszym przykładzie poniżej mamy pasek stanu i nawigację, które istnieją we wszystkich trzech ramkach. Chcemy, aby pozostały one na miejscu podczas przełączania między kartami.

Wybraliśmy przejście Push (Przesuwanie) do przechodzenia między ramkami. Postanowiliśmy nie zaznaczać pola obok opcji Smart animate matching layers (Inteligentnie animuj pasujące warstwy).

Wyświetlając prototyp, możemy zauważyć, że wszystkie elementy w ramce docelowej korzystają z przejścia Push (Przesuwanie). To wyraźnie pokazuje, że w prototypie poruszamy się pomiędzy oddzielnymi ekranami.

Jeśli zaznaczymy pole wyboru obok opcji Smart animate matching layers (Inteligentnie animuj pasujące warstwy), pasek stanu i elementy nawigacji pozostaną na swoim miejscu, podczas gdy pozostała zawartość będzie korzystała z przejścia Push (Przesuwanie).

Wskazówki dotyczące inteligentnej animacji

Przed wprowadzeniem funkcji inteligentnej animacji system Figma nie przywiązywał dużej wagi do nazw warstw. Ponieważ inteligentna animacja opiera się na nazwie i hierarchii warstw, może być konieczne zastosowanie innego podejścia.

Dowiedz się więcej o tworzeniu pasujących obiektów z nazwą warstwy i hierarchią →

Poniżej przedstawiliśmy kilka sposobów rozwiązywania problemów z nieoczekiwanymi rezultatami inteligentnej animacji.

Nazwy warstw

Jednym z szybkich sposobów na tworzenie ramek dla inteligentnej animacji jest ich powielanie. Dzięki temu nazewnictwo jest spójne między każdą ramką. Następnie możesz dodawać i usuwać warstwy do każdej ramki, zgodnie z potrzebami.

System Figma nazywa ramki i warstwy na podstawie sposobu, w jaki je powielasz lub kopiujesz i wklejasz.

• W ramce: system Figma numeruje warstwy kolejno. Na przykład: ramka 1, ramka 2 itd.
• Między ramkami: system Figma używa tej samej nazwy. Przykład: jeśli kopiujesz prostokąt 1 z jednej ramki, system Figma wklei go jako prostokąt 1 w następnej ramce.

Mogą istnieć obiekty lub warstwy, których nie ma w różnych klatkach, ale w każdej z nich mają inne nazwy. I odwrotnie: warstwy mogą tę samą nazwę, ale nie chcesz, żeby były takie same.

Możesz przeglądać i aktualizować nazwy warstw za pomocą panelu Layers (Warstwy) na lewym pasku bocznym. Dowiedz się, jak zmieniać nazwy warstw zbiorczo.

Wyświetlanie dopasowanych warstw

System Figma ułatwił również identyfikację warstw lub obiektów, które istnieją — lub pasują — między ramkami. Dotyczy to wszystkich warstw, grup, ramek i komponentów.

1. Otwórz kartę Prototype (Prototyp) w prawym panelu bocznym.
2. Ustaw kursor na obiekcie lub warstwie w przestrzeni roboczej.
3. System Figma podświetli tę warstwę w każdej innej ramce, w której się znajduje.

Kolejność i hierarchia warstw

Inteligentna animacja i inteligentna animacja dopasowanych warstw uwzględniają kolejność lub hierarchię warstw.

Zazwyczaj opcje Move in (Przenieś) lub Slide in (Przesuń) spowoduje umieszczenie całej ramki docelowej nad klatką oryginalną. Dzięki inteligentnemu animowaniu dopasowanych warstw system Figma będzie przenosić lub przesuwać warstwy na podstawie ich hierarchii, co może powodować mylące lub nieoczekiwane rezultaty.

Na naszym poniższym zrzucie ekranu znajdują się dwa pasujące obiekty między naszymi ramkami (Explorer 1 i Explorer 2). Są to pasek stanu i nawigacja.

Jeśli mamy warstwy powyżej pasujących warstw, system Figma będzie je animować powyżej miejsca docelowego. Na naszym zrzucie ekranu poniżej widać, że warstwy z Explorer 1 pojawiają się nad ramką docelową.

Przenosząc pasujące warstwy na szczyt hierarchii, możemy mieć pewność, że wszystkie ramki docelowe będą przesuwane nad ramką pierwotną.

Grupowanie warstw

W celu doprecyzowania wyboru elementów do inteligentnej animacji system Figma dopasowuje warstwy na podstawie ich nazwy i hierarchii. Umożliwia to również szybkie cofanie dopasowania warstw między klatkami.

Załóżmy, że w każdej ramce mamy pięć prostokątów. Te prostokąty mają inną zawartość między każdą klatką. Oznaczyliśmy je jako Trip 1 (Przesunięcie 1) do Trip 5 (Przesunięcie 5) we wszystkich trzech ramkach.

Gdy próbujemy zastosować przejście Push (Przesuwanie), inteligentna animacja rozpoznaje je jako pasujące warstwy. Zamiast traktować te prostokąty jako nową zawartość, system Figma inteligentnie animuje zmianę ich położenia.

Aby zmienić to zachowanie, możemy pogrupować przesunięcia prostokąta w każdej ramce i nadać im unikalną nazwę.

Podczas podglądu przejścia funkcja inteligentnej animacji nie rozpoznaje już tych warstw jako pasujących do siebie. Nasza zawartość będzie się płynnie przesuwać, sprawiając, że nasz prototyp będzie wyglądał znacznie bardziej realistycznie.

Inteligentna animacja z efektem slajdu i przesunięcia

Jest kilka kwestii, które należy wziąć pod uwagę podczas korzystania z funkcji inteligentnej animacji dopasowanych warstw z przejściami typu przesuwanie lub przenoszenie.

Po wybraniu tej opcji system Figma będzie animować wszystkie pasujące warstwy pomiędzy ramkami. Oznacza to, że system Figma nie może animować całej ramki docelowej (B) nad początkową ramką (A), jak robi to normalnie.

System Figma nie uwzględnia wypełnienia ramki jako części animacji. Może to powodować nakładanie się warstw, co sprawia, że przejście wygląda niechlujnie. 

Aby temu zapobiec, możemy dodać prostokąt z jednolitym wypełnieniem za pozostałymi warstwami. Teraz, gdy oglądamy nasz prototyp, zawartość w każdej ramce przesuwa się razem.