Animacja tekstu w Figma powstaje przez połączenie dwóch stanów tego samego obiektu tekstowego za pomocą Smart Animate. Wystarczy przygotować dwie klatki, zmienić między nimi pozycję, krycie lub inne właściwości tekstu, a następnie skonfigurować przejście w zakładce Prototype.
Jak przygotować animację tekstu?
Najprostszy przykład to tekst, który pojawia się przez zanikanie albo przesuwa się na ekran. Oba efekty wymagają dwóch klatek typu Frame: pierwszej z początkowym stanem tekstu oraz drugiej ze stanem końcowym.
- Utwórz pierwszą klatkę – wybierz narzędzie tekstowe, dodaj treść i umieść ją wewnątrz Frame. Nadaj warstwie czytelną nazwę, na przykład „Nagłówek”.
- Utwórz stan końcowy – zduplikuj całą klatkę, używając skrótu Ctrl/Cmd + D. Dzięki temu obie klatki zachowają podobną strukturę.
- Zmień właściwości tekstu w drugiej klatce – możesz przesunąć warstwę, zmniejszyć jej krycie do 0%, zmienić kolor albo dostosować rozmiar. Przy efekcie pojawiania się tekst powinien mieć w pierwszej klatce niskie krycie, a w drugiej 100%.
- Sprawdź nazwy warstw – odpowiadające sobie warstwy muszą mieć identyczne nazwy w obu klatkach. To warunek, który pozwala Smart Animate rozpoznać, że chodzi o ten sam element.
Zmiana położenia tekstu może stworzyć efekt wsuwania. Przesuń go w pierwszej klatce poza miejsce docelowe, a w drugiej ustaw tam, gdzie ma się znaleźć po zakończeniu animacji. Ten sam mechanizm działa przy zmianie krycia, koloru i części parametrów wyglądu.
Jak skonfigurować Smart Animate?
Po przygotowaniu obu stanów trzeba połączyć je w prototypie. Zaznacz pierwszą klatkę, otwórz zakładkę Prototype i przeciągnij uchwyt połączenia do drugiej klatki.
- Wybierz zdarzenie – ustaw na przykład „On click”, jeśli animacja ma uruchamiać się po kliknięciu, albo inne zdarzenie dostępne w prototypie.
- Wybierz akcję przejścia – jako sposób przejścia ustaw „Navigate to” i wskaż drugą klatkę.
- Wybierz animację – z listy animacji wybierz „Smart Animate”.
- Ustaw wygładzanie i czas – dobierz krzywą ruchu oraz czas trwania, podawany w milisekundach.
Smart Animate interpoluje różnice między rozpoznanymi warstwami. Oznacza to, że Figma wylicza pośrednie położenia i wartości, zamiast natychmiast przełączać ekran. Najlepszy efekt uzyskasz, gdy obie klatki mają zgodną strukturę, a tekst znajduje się na tym samym poziomie zagnieżdżenia.
Rodzaj wygładzania wpływa na odczuwalną dynamikę przejścia:
- Ease In – ruch zaczyna się wolniej, a następnie przyspiesza.
- Ease Out – animacja rozpoczyna się szybciej i łagodnie wyhamowuje.
- Linear – zmiana odbywa się ze stałą prędkością.
- Czas trwania – krótszy czas daje bardziej zdecydowane przejście, a dłuższy pozwala lepiej zauważyć ruch tekstu.
Uruchom podgląd prototypu przyciskiem „Present” i sprawdź, czy przejście zaczyna się od właściwego stanu. Dla prostego pojawiania się tekstu często wystarcza krótki czas animacji, natomiast przesunięcie lub większa zmiana pozycji może wymagać dłuższego przejścia.
Na co uważać przy animowaniu tekstu?
Smart Animate nie zamienia płynnie jednej treści tekstowej w inną. Zmiana napisu „A” na „B” nie działa tak samo jak przesunięcie tej samej warstwy. Jeśli potrzebujesz efektu zmiany komunikatu, przygotuj osobne warstwy lub stany i zaplanuj przejście między nimi, na przykład przez zanikanie jednego napisu oraz pojawienie się drugiego.
Przy powtarzalnych elementach, takich jak przyciski, etykiety lub komunikaty, wygodnym rozwiązaniem mogą być warianty komponentu. Każdy wariant przechowuje inny stan, a przejście między nimi można połączyć w prototypie. W przypadku pojedynczej animacji wystarczą dwie klatki, lecz warianty ułatwiają zarządzanie wieloma stanami tego samego komponentu.
Przed uruchomieniem prototypu sprawdź następujące elementy:
- Czy odpowiadające sobie warstwy tekstowe mają identyczne nazwy?
- Czy tekst znajduje się w obu klatkach lub wariantach?
- Czy klatki zostały połączone w zakładce Prototype?
- Czy jako typ przejścia wybrano Smart Animate?
- Czy czas trwania i krzywa wygładzania pasują do zamierzonego efektu?
Najpierw przetestuj prostą animację zanikania lub przesunięcia. Gdy struktura warstw działa poprawnie, możesz łączyć kilka właściwości, na przykład jednoczesną zmianę pozycji, krycia i koloru tekstu.
