Smart Animate w Figmie automatycznie animuje zmiany właściwości warstw między dwiema ramkami. Dzięki temu prototyp nie przeskakuje sztywno z ekranu na ekran, lecz płynnie pokazuje przesunięcia, skalowanie, obrót, zmianę krycia i wypełnienia.
Jak Figma rozpoznaje warstwy?
Smart Animate nie animuje przypadkowych obiektów. Najpierw wyszukuje warstwy występujące w obu ramkach, a następnie porównuje ich nazwy i położenie w hierarchii. Gdy znajdzie dopasowanie, analizuje zmiany i tworzy przejście między stanem początkowym a docelowym.
Dlatego spójne nazewnictwo warstw jest złotą zasadą. Warstwa o nazwie „Button” w jednej ramce powinna mieć taką samą nazwę w drugiej. Równie ważna jest hierarchia. Jeśli przycisk znajduje się bezpośrednio w ramce w jednym ekranie, a w drugim został umieszczony w dodatkowej grupie, Figma może nie potraktować go jako tego samego obiektu.
Przed utworzeniem połączenia sprawdź trzy rzeczy:
- Spójne nazewnictwo warstw – te same obiekty powinny mieć identyczne nazwy w obu ramkach.
- Ta sama hierarchia – warstwy powinny znajdować się na odpowiadających sobie poziomach drzewa.
- Obiekty obecne w obu ramkach – Smart Animate dopasowuje istniejące warstwy, a nowe elementy pojawiają się zwykle przez przenikanie.
Najprościej zachować spójność, duplikując ramkę i dopiero potem zmieniając jej zawartość. Nazwy warstw zostaną wtedy zachowane. Panel Layers pozwala szybko sprawdzić i poprawić nazwy oraz grupowanie obiektów.
Polecamy: Figma Slides – poradnik, jak tworzyć profesjonalne prezentacje
Jak ustawić Smart Animate krok po kroku?
Podstawowe przejście możesz skonfigurować bezpośrednio w zakładce Prototype:
- Umieść obok siebie ramkę początkową i docelową. W obu przygotuj warstwy, które mają zostać animowane.
- Zaznacz ramkę, grupę albo konkretną warstwę i otwórz kartę Prototype na prawym pasku bocznym.
- Przeciągnij węzeł połączenia znajdujący się przy zaznaczonym obiekcie do ramki docelowej.
- W ustawieniach interakcji wybierz wyzwalacz, na przykład kliknięcie, przeciągnięcie lub zmianę położenia kursora.
- W sekcji Animation otwórz listę przejść i wybierz Smart animate.
- Ustaw czas trwania oraz krzywą Easing. Dłuższy czas ułatwia ocenę ruchu, a krótszy sprawdza się przy drobnych interakcjach.
- Uruchom prototyp w widoku prezentacji i sprawdź przejście. W razie potrzeby wróć do nazw, hierarchii i parametrów warstw.
Przykładowo, możesz zduplikować ekran z przyciskiem, przesunąć go w drugiej ramce i zmienić jego krycie. Po zastosowaniu Smart Animate Figma połączy zmianę pozycji z pojawianiem się lub znikaniem elementu. Ta sama metoda sprawdza się przy przełącznikach, rozwijanych panelach, suwakach, sekwencjach ładowania i gestach przeciągania.
Smart Animate a inne przejścia
Samodzielne Smart Animate zastępuje główne przejście między ramkami. Możesz jednak użyć opcji Smart animate matching layers, aby animować tylko dopasowane warstwy, podczas gdy reszta ekranu korzysta z innego efektu, na przykład Push albo Slide.
Polecamy: Jak dodać link do innego slajdu w Figma Slides?
To przydatne wtedy, gdy pasek nawigacji lub nagłówek ma pozostać na miejscu, a zawartość ma przesunąć się jak przy zmianie całego ekranu. Bez tej opcji wszystkie elementy ramki docelowej zostaną objęte głównym przejściem.
Konfiguracja wygląda następująco:
- Utwórz połączenie między ramkami w zakładce Prototype.
- Wybierz główne przejście, na przykład Push albo Slide.
- Włącz opcję Smart animate matching layers.
- Sprawdź, czy elementy mające pozostać na miejscu mają takie same nazwy i hierarchię w obu ramkach.
- Uruchom prototyp i skoryguj położenie warstw, jeśli elementy nachodzą na siebie albo poruszają się w nieoczekiwany sposób.
W tym trybie warstwy dopasowane są animowane według zmian swoich właściwości, a niedopasowane korzystają z wybranego przejścia. Przy Slide lub Push warto zadbać o tło ramki. W razie nakładania się elementów pomocny może być prostokąt z jednolitym wypełnieniem umieszczony za pozostałymi warstwami.
Przeczytaj też: Prototypowanie w Figma – jak zacząć tworzyć interaktywne projekty?
Jakie właściwości obsługuje Smart Animate?
Funkcja rozpoznaje przede wszystkim zmiany parametrów wizualnych i geometrycznych. Najważniejsze przypadki przedstawia tabela:
| Właściwość | Co animuje Figma? | Uwagi |
|---|---|---|
| Skala | Powiększanie lub zmniejszanie obiektu | Przydatne przy otwieraniu kart, obrazów i przycisków |
| Pozycja | Przesunięcie między współrzędnymi początkowymi i docelowymi | Figma animuje zmianę położenia warstwy |
| Nieprzezroczystość | Pojawianie się lub znikanie elementu | Dla zanikania ustaw krycie na 0%, zamiast wyłączać widoczność |
| Obrót | Zmianę kąta i orientacji warstwy | Można obracać pojedynczy obiekt albo całą grupę |
| Wypełnienie | Zmianę koloru, gradientu lub obrazu | Zmiana może dotyczyć zarówno jednolitego koloru, jak i grafiki |
Smart Animate nie obsługuje każdej zmiany. Efekty oraz przechodzenie między różnymi kształtami nie są animowane tą metodą. W takich przypadkach Figma może zastosować zwykłe przenikanie. Podobnie nakładki są traktowane jako osobne ramki, choć dopasowane warstwy między nakładkami mogą nadal korzystać z inteligentnej animacji.
Dlaczego animacja nie działa?
Gdy przejście wygląda jak zwykłe przenikanie albo element nagle zmienia położenie, sprawdź najczęstsze przyczyny:
- Warstwa ma inną nazwę w ramce początkowej i docelowej.
- Obiekt znajduje się w innej grupie lub na innym poziomie hierarchii.
- Warstwa istnieje tylko w jednej z ramek.
- Próba animowania dotyczy efektu albo zmiany kształtu, których Smart Animate nie obsługuje.
- Pasujące warstwy zostały użyte niezamierzenie, ponieważ różne obiekty mają tę samą nazwę.
- Przejście Push lub Slide powoduje nakładanie się elementów przez nieprawidłową kolejność warstw albo brak tła.
Jeśli różne obiekty mają identyczne nazwy, nadaj grupom unikalne nazwy. Z kolei gdy chcesz, aby element został potraktowany jako nowa zawartość, umieść go w odpowiednio nazwanej grupie. Podczas diagnostyki wydłuż czas trwania animacji. Wolniejsze przejście ułatwia obserwację momentu, w którym warstwa traci dopasowanie.
Najlepszy rezultat daje prosta zasada: najpierw uporządkuj nazwy i hierarchię, później ustawiaj przejście. Smart Animate dobrze odwzoruje zmiany pozycji, skali, krycia, obrotu i wypełnienia, ale nie naprawi niezgodnej struktury warstw.
