Poradnik wideo: eksport animowanych banerów Figma Motion do HTML, wideo MP4 lub GIF

Bannerify potrafi wykryć obsługiwane animacje utworzone w Figma Motion i udostępnić je jako animację wejścia Figma Motion. To Ty decydujesz, które warstwy z niej korzystają – tak jak w przypadku każdej innej animacji Bannerify.

Wykrycie nigdy nie zastępuje automatycznie istniejącej animacji wejścia Bannerify. Zastosuj Figma Motion do pojedynczych warstw albo użyj istniejących akcji zbiorczych Bannerify, aby zastosować ją do kilku warstw naraz.

Figma Motion to obecnie API w wersji Beta. Dopóki API jest w wersji beta, Figma może zmieniać model danych Motion. Aktualny status API znajdziesz w dokumentacji Figma Motion API.

Zanim zaczniesz

• Dodaj animację Motion do warstwy wewnątrz ramki baneru w Figmie.
• Upewnij się, że warstwa jest widoczna na osi czasu Bannerify. Jeśli znajduje się w grupie, komponencie lub innej warstwie, najpierw dołącz zagnieżdżoną warstwę.
• Po zmianie klatek kluczowych Motion w Figmie wczytaj lub odśwież baner w Bannerify.

Stosowanie wykrytego Motion jednym kliknięciem

Gdy Bannerify znajdzie obsługiwane Motion na warstwach, które jeszcze z niego nie korzystają, nad osiami czasu banerów pojawi się komunikat Figma Motion detected.

Kliknij Apply to All Banners (n Layers), aby zastosować własne obsługiwane ścieżki Motion każdej kwalifikującej się warstwy we wszystkich ramkach banerów wczytanych obecnie do Bannerify. Liczba obejmuje wszystkie kwalifikujące się warstwy Motion na wczytanych osiach czasu. Bannerify włącza też Mirror Figma Motion Timings, więc natywne przesunięcia czasowe są stosowane od razu. Istniejące animacje wyjścia i hover pozostają bez zmian, a odwzorowywanie możesz później wyłączyć, aby przywrócić edytowalne zakresy czasu Bannerify.

Stosowanie Motion do zagnieżdżonych grup i warstw pulsujących

W panelu zagnieżdżonych warstw rozwiń każdą grupę, która zawiera animowane warstwy podrzędne. Jeśli zewnętrzna grupa ma też własne Motion, włącz dla niej Keep Parent Animatable, aby jej animacja pozostała dostępna obok animacji warstw podrzędnych.

Po zamknięciu panelu kliknij Apply to All Banners w komunikacie Figma Motion detected. Nowo widoczne warstwy podrzędne wymagają tego kroku nawet wtedy, gdy Mirror Figma Motion Timings jest już włączone. Na przykład warstwy pulsujące mogą pojawić się na osi czasu, ale pozostać nieruchome, dopóki nie zastosujesz wykrytych dla nich ścieżek skali i krycia.

Stosowanie Figma Motion do kilku warstw

1. Otwórz ramkę baneru w Bannerify i w razie potrzeby ją odśwież.
2. Zaznacz pola wyboru warstw, które chcesz zaktualizować, albo użyj Quick Select Layers.
3. W Batch Layer Actions otwórz menu animacji Entry.
4. Wybierz Apply Each Layer's Figma Motion z grupy Figma Motion.
5. Ustaw odpowiedni czas wejścia w Bannerify i kliknij Apply Animations to Selected Layers.

Bannerify stosuje własne wykryte klatki kluczowe Motion każdej warstwy. Jeśli zaznaczenie obejmuje też warstwy bez obsługiwanych wartości Motion, zachowują one bieżącą animację wejścia, a Bannerify przed zastosowaniem pokazuje, ile zaznaczonych warstw się kwalifikuje.

Stosowanie Figma Motion do jednej warstwy

1. Znajdź animowaną warstwę na osi czasu Bannerify.
2. Otwórz jej menu Entry Animation.
3. Wybierz wykrytą animację z grupy Figma Motion.

Bannerify łączy wszystkie obsługiwane ścieżki Motion warstwy w jedną animację wejścia. Na przykład położenie, krycie, skala i obrót mogą animować się jednocześnie, zachowując własne klatki kluczowe i wygładzanie.

Odwzorowanie osi czasu Figma Motion

Gdy co najmniej jedna warstwa korzysta z animacji wejścia Figma Motion, Bannerify wyświetla nad osią czasu Mirror Figma Motion Timings. Etykieta podaje liczbę warstw Motion, które zostaną zaktualizowane, na przykład Mirror Figma Motion Timings (5 Layers).

• Akcja Apply to All Banners włącza tę opcję automatycznie.
• Pozostaw ją wyłączoną, aby ustawiać położenie i długość pasków animacji Motion zwykłymi elementami sterowania czasem w Bannerify.
• Włącz ją, aby używać natywnych przesunięć początku i końca z Figmy dla każdej wybranej animacji Motion. Bannerify dopasowuje też całą oś czasu do najdłuższej wybranej osi czasu Motion.
• Wyłącz ją ponownie, aby przywrócić edytowalne zakresy czasu Bannerify używane przed odwzorowaniem.

Sam przełącznik Mirror synchronizuje tylko czasy na osi czasu. Nie stosuje Figma Motion do kolejnych warstw ani nie zastępuje innych animacji wejścia. Akcja jednym kliknięciem najpierw stosuje animację do kwalifikujących się warstw, a potem włącza odwzorowanie. Jeśli chcesz wybierać bardziej selektywnie, użyj przepływu dla pojedynczej warstwy lub akcji zbiorczych, a odwzorowaniem steruj osobno.

W przypadku banerów, które są już animowane w Figmie, użyj Apply to All Banners, aby w jednym kroku uzyskać wynik najbliższy natywnej osi czasu Figmy. Bannerify stosuje animację do każdej kwalifikującej się wczytanej warstwy i automatycznie włącza Mirror Figma Motion Timings. Ogólne ustawienie osi czasu używa pełnych sekund, więc w razie potrzeby najdłuższa natywna oś czasu jest zaokrąglana w górę do pełnej sekundy.

Nadal możesz dodać osobną animację wyjścia Bannerify. Aby przejście było czyste, umieść animację wyjścia po zakończeniu animacji wejścia Figma Motion.

Obsługiwane właściwości Motion

Bannerify obecnie odtwarza te natywne właściwości Motion:

• Położenie na osiach X i Y
• Krycie
• Skala na osiach X i Y
• Obrót
• Jednolite lub indywidualne promienie narożników prostokątów z wypełnieniem jednolitym, wyrównanych do osi poziomej i pionowej, także obróconych o 90 stopni, bez widocznych obrysów, efektów, masek i wygładzania narożników

Animowane promienie narożników są odtwarzane w podglądzie oraz w eksportach HTML, GIF i wideo. Prostokąty z wypełnieniem obrazem, ramki, grupy oraz prostokąty z obrysem, efektami lub wygładzaniem narożników nadal wyświetlają ostrzeżenie o zgodności promienia narożników.

Każda właściwość zachowuje własne klatki kluczowe, czasy i wygładzanie w ramach połączonej animacji Bannerify. Bannerify konwertuje obsługiwane wygładzanie cubic-bezier i spring na format używany przez podgląd i eksporty. Mogą wystąpić bardzo drobne różnice wizualne, zwłaszcza przy ruchu typu spring.

Jeśli animacja łączy obsługiwane i nieobsługiwane właściwości, Bannerify odtwarza te obsługiwane i wskazuje, których właściwości nie może obecnie wyeksportować. Warstwa bez obsługiwanych właściwości Motion nie wyświetli opcji Figma Motion.

Komunikat na osi czasu wskazuje nieobsługiwane właściwości, takie jak rozmiar, promień narożników przy nieobsługiwanych typach lub wyglądzie warstw, odstępy i dopełnienie Auto Layout, grubość obrysu lub obramowania, przycięcie ścieżki, wypełnienia, obrysy czy efekty. Wymienione właściwości nie będą animowane w eksportowanym pliku.

Ponowne użycie Motion w obróconym banerze

Pionową ramkę baneru możesz obrócić o 90 stopni, aby użyć jej w orientacji poziomej. Bannerify uwzględnia obrócony kierunek ścieżek położenia Motion oraz kolejność narożników obsługiwanych prostokątów. Po obróceniu odśwież baner, aby grafika i ścieżki Motion wczytały się razem.

Obrócenie ramki obraca też jej grafikę. Jeśli tekst i obrazy mają pozostać w pionie, popraw je w Figmie, a potem sprawdź animację w podglądzie Bannerify i w wyeksportowanym pliku. Animacja promienia narożników nadal wymaga obsługiwanego prostokąta wyrównanego do osi poziomej i pionowej; prostokąty obrócone ukośnie wyświetlają ostrzeżenie o zgodności.

Odświeżanie po edycji w Figmie

Po zmianie animacji Motion w Figmie kliknij Refresh All Banners w Bannerify albo użyj Refresh Banner Layers dla danego baneru. Bannerify wykrywa najnowsze klatki kluczowe. Warstwy, które już korzystają z Figma Motion, pozostają przy nim, a nowo animowane warstwy nie zmieniają się, dopóki nie zastosujesz do nich Figma Motion.

Podgląd i eksport

Animacje Figma Motion działają z przyciskami Play i Replay w Bannerify i można je przewijać do dowolnego miejsca na osi czasu. Bannerify przechwytuje obsługiwaną grafikę Motion niezależnie od bieżącej pozycji głowicy odtwarzania w Figmie, także w przypadku warstw, które zaczynają od zerowej skali lub krycia. Skala i obrót zachowują środek oryginalnej warstwy z Figmy, gdy wyeksportowana grafika ma inne granice, na przykład tekst lub grafika z cieniami.

Animacje są też uwzględniane w eksporcie do:

• HTML z CSS lub GSAP
• GIF
• MP4

Przed eksportem przejrzyj komunikat Figma Motion detected nad osią czasu. Informuje on, gdy:

• Wykryto obsługiwane Motion, ale nie zastosowano go jako animacji wejścia Bannerify dla warstwy.
• Warstwa Motion zawiera właściwości, których Bannerify obecnie nie eksportuje.
• Warstwa Motion zawiera wyłącznie nieobsługiwane właściwości i nie można jej jeszcze zastosować.

Całe obsługiwane, niezastosowane Motion możesz zastosować bezpośrednio z komunikatu na osi czasu.

Rozwiązywanie problemów

W eksporcie brakuje niektórych animacji Figma Motion

1. Sprawdź w komunikacie Figma Motion detected nad osią czasu, czy są niezastosowane warstwy.
2. Kliknij Apply to All Banners albo wybierz Figma Motion w menu Entry Animation każdej warstwy, której to dotyczy.
3. Przejrzyj nazwy nieobsługiwanych właściwości wymienione w ostrzeżeniu.
4. Rozwiń zagnieżdżone animowane warstwy na osi czasu Bannerify, a potem odśwież baner.
5. Upewnij się, że Mirror Figma Motion Timings pozostaje włączone, jeśli wyeksportowane przesunięcia mają odpowiadać osi czasu Motion w Figmie.

Figma Motion nie pojawia się w menu animacji

• Sprawdź, czy warstwa ma co najmniej jedną obsługiwaną właściwość Motion.
• Jeśli warstwa jest zagnieżdżona, upewnij się, że jest uwzględniona na osi czasu Bannerify.
• Odśwież baner po dodaniu lub edycji animacji Motion w Figmie.
• W przypadku akcji zbiorczych upewnij się, że bieżące zaznaczenie zawiera co najmniej jedną warstwę z wykrytymi wartościami Motion.

Czasy nie zgadzają się z Figma Motion

Najpierw zastosuj Figma Motion do warstw, których chcesz użyć. Potem włącz Mirror Figma Motion Timings nad osią czasu, aby korzystać z natywnych przesunięć początku i końca zamiast własnych położeń pasków animacji w Bannerify.

Animacja wygląda nieco inaczej

Sprawdź, czy każda animowana właściwość jest obsługiwana. Wygładzanie cubic-bezier jest w miarę możliwości odtwarzane bezpośrednio, a wygładzanie spring i ścieżki z niezależnym wygładzaniem są konwertowane na formaty podglądu i eksportu Bannerify, więc mogą występować bardzo drobne różnice.