Banery wielosceniczne z sekcji w Figmie

Połącz kilka ramek tego samego rozmiaru w jeden baner wielosceniczny, umieszczając je w sekcji w Figmie, a potem animuj go i eksportuj w Bannerify do HTML, GIF lub wideo.

Poradnik wideo: tworzenie animowanych banerów wieloscenicznych w Figmie

Ten film pokazuje, jak w Figmie utworzyć animowane banery wielosceniczne (i wyeksportować je do HTML lub wideo) za pomocą wtyczki Bannerify.

Czym są banery wielosceniczne? ​

Domyślnie Bannerify traktuje każdą ramkę najwyższego poziomu w Figmie jako osobny baner.

Gdy włączysz opcję Use Figma sections as multi-scene banners, Bannerify traktuje każdą sekcję w Figmie jako jeden baner, a każdą ramkę tego samego rozmiaru w tej sekcji – jako osobną scenę na tej samej osi czasu.

To idealne rozwiązanie, gdy chcesz w jednym eksporcie baneru pokazać po kolei kilka stanów kreacji lub komunikatów.

Bannerify zachowuje wizualną kolejność warstw ramek w sekcji w Figmie, więc jeśli przestawisz ramki scen w Figmie, kolejność scen w Bannerify zaktualizuje się po odświeżeniu i ponownym wczytaniu banerów.

Szybka konfiguracja ​

  1. Utwórz ramki banerów w Figmie jak zwykle.
  2. Zaznacz ramki, które mają być scenami jednego baneru.
  3. Kliknij prawym przyciskiem myszy i wybierz Wrap in new section.
  4. W Bannerify kliknij Refresh All Banners, aby wrócić do ekranu wczytywania.
  5. Włącz opcję Use Figma sections as multi-scene banners.
  6. Kliknij Load Checked Banners (lub Load All Banners).

Powinien pojawić się jeden baner na każdą sekcję, a warstwy na osi czasu będą pogrupowane według scen.

Krok po kroku ​

1. Uruchom Bannerify ​

Otwórz Bannerify z listy wtyczek w Figmie. Jeśli często z niego korzystasz, zapisz go na liście Saved plugins, aby mieć do niego szybki dostęp.

2. Sprawdź domyślne działanie (opcjonalnie) ​

Zanim włączysz tryb sekcji, Bannerify wczyta ramki najwyższego poziomu jako osobne banery.

To dobry sposób, aby sprawdzić, czy ramki źródłowe są prawidłowo wykrywane.

3. Umieść ramki scen w sekcji ​

Zaznacz wszystkie ramki, które chcesz połączyć w jeden baner wielosceniczny, a następnie użyj polecenia:

Right click -> Wrap in new section

W trybie sekcji ta sekcja staje się kontenerem jednego baneru.

4. Wczytaj ponownie i przełącz się na tryb sekcji ​

Kliknij Refresh All Banners w Bannerify, a potem włącz opcję:

Use Figma sections as multi-scene banners

Bannerify będzie teraz skanować sekcje zamiast pojedynczych ramek.

5. Wczytaj banery z sekcji ​

Kliknij Load Checked Banners lub Load All Banners.

Zobaczysz teraz:

  • jeden baner na każdą sekcję;
  • grupy scen na osi czasu (Scene 1, Scene 2, Scene 3 itd.);
  • etykiety warstw i elementy sterujące uwzględniające sceny.

Jeśli chcesz, aby Scene 3 pojawiła się przed Scene 2 albo Scene 1 przesunęła się na koniec, ustaw ramki scen w sekcji w wybranej wizualnej kolejności warstw w Figmie, a potem odśwież i ponownie wczytaj sekcję w Bannerify.

6. Dostosuj długość osi czasu do kolejności scen ​

Jeśli sceny na siebie nachodzą, wydłuż oś czasu (na przykład z 5s do 15s) i kliknij Update Timeline Length.

Następnie dostosuj czasy warstw tak, aby każda scena pojawiała się i znikała po kolei na dłuższej osi czasu.

Zmiany długości osi czasu od razu obowiązują w podglądzie oraz w eksportach GIF i wideo, także w banerach wieloscenicznych. Po zmianie czasu trwania nie musisz ponownie wczytywać banerów.

Użyj zgrupowanych ustawień czasu scen, aby szybciej przesuwać całe bloki czasowe scen, zamiast dopasowywać każdą warstwę osobno.

7. Podejrzyj i wyeksportuj ​

Odtwórz podgląd, aby sprawdzić kolejność i czas scen, a potem wyeksportuj banery w potrzebnym formacie:

  • eksport HTML – paczki kodu dla reklam i platform;
  • eksport GIF – animowane obrazy;
  • eksport MP4/Video – materiały wideo.

Wszystkie sceny z jednej sekcji są eksportowane jako jedna połączona sekwencja baneru.

Praca z wieloma rozmiarami i sekcjami ​

Możesz duplikować sekcje, aby tworzyć kolejne rozmiary lub warianty banerów.

Po odświeżeniu Bannerify wczyta każdą sekcję jako osobny baner z własnym zestawem scen. Dzięki temu w jednej partii wyeksportujesz wiele rozmiarów i wariantów wieloscenicznych.

Ważny wymóg: ramki scen muszą mieć takie same wymiary ​

Aby ramki były traktowane jako sceny tego samego baneru, muszą mieć w sekcji identyczne wymiary.

Jeśli jedna ramka różni się choćby o 1px, Bannerify może pominąć ją w zestawie scen tej sekcji.

Przykład: jeśli dwie ramki mają 269x250, a jedna 268x250, Bannerify może wczytać jako sceny tylko ramki o pasującym rozmiarze.

Jeśli tak się stanie:

  1. Nadaj wszystkim ramkom scen w sekcji dokładnie taką samą szerokość i wysokość.
  2. Odśwież banery.
  3. Ponownie wczytaj baner z sekcji.

Lista kontrolna rozwiązywania problemów ​

  • Wczytują się tylko niektóre sceny: sprawdź, czy wszystkie ramki w sekcji mają identyczne wymiary.
  • Zmiany w sekcji się nie pojawiają: kliknij Refresh All Banners i wczytaj banery ponownie.
  • Sceny są w złej kolejności: zmień kolejność ramek w sekcji w Figmie, a potem kliknij Refresh All Banners i wczytaj banery ponownie.
  • Sceny za bardzo na siebie nachodzą: wydłuż oś czasu i rozłóż czasy na nowo.
  • Eksport wygląda inaczej niż podgląd: po zmianach osi czasu ponownie sprawdź czasy warstw i kolejność scen.

Podsumowanie ​

Sekcje w Figmie w połączeniu z Bannerify to najszybszy sposób na tworzenie dłuższych, narracyjnych sekwencji banerów bez upychania wszystkiego w jednej ogromnej ramce.

Zaprojektuj każdą scenę jako zwykłą ramkę, umieść sceny w sekcji, włącz tryb sekcji, a potem animuj i eksportuj całość jako jeden połączony baner.