Poradnik wideo: animowanie banerów z Figmy i eksport do HTML
Ten film pokazuje, jak w kilka sekund animować w Figmie banery HTML gotowe do publikacji i je wyeksportować.
Zaczynanie od pustej strony w Figmie
Aby ułatwić szybki start, po uruchomieniu wtyczki na pustej stronie w Figmie Bannerify zaproponuje automatyczne utworzenie kilku standardowych rozmiarów banerów.
Struktura warstw w ramkach banerów
Bezpośrednie warstwy podrzędne każdej ramki są domyślnie traktowane jako elementy baneru. Jak pokazują kolejne sekcje, każdy z tych elementów możesz osobno animować we wtyczce Bannerify.
Ukryte warstwy podrzędne są uwzględniane w ramkach banerów Bezpośrednie warstwy podrzędne, które w Figmie są ukryte, nadal pojawiają się na osi czasu warstw Bannerify. Dzięki temu podczas projektowania banerów z elementami, które pojawiają się i znikają w kilku etapach, możesz ukrywać warstwy podrzędne. Bannerify automatycznie wyświetla te ukryte warstwy jako widoczne.
Ukrywanie warstw Figmy na osi czasu. Jeśli nie chcesz, aby dana warstwa z ramki w Figmie trafiła na oś czasu, zmień jej nazwę, dodając prefiks hide- (na przykład hide-RectangleBackground). Ta warstwa nie zostanie wtedy uwzględniona na osi czasu wtyczki ani w eksportach banerów.
Zaczynanie od gotowych projektów banerów
Jeśli masz już projekty banerów w Figmie, po uruchomieniu wtyczki Bannerify na stronie automatycznie wczyta się lista dostępnych ramek lub instancji w pliku, których można użyć jako banerów.
Możesz zaznaczyć lub odznaczyć tylko te banery, które wtyczka ma wczytać, i kliknąć przycisk Load Checked Banners albo kliknąć przycisk Load All Banners, aby automatycznie wczytać wszystkie.
Odświeżanie lub ponowne wczytywanie wielu lub wszystkich banerów
Jeśli dodasz lub zmienisz warstwy w pliku Figmy, gdy Bannerify jest już uruchomione, nie zaktualizują się one automatycznie. Banery możesz jednak odświeżyć na dwa sposoby.
Aby odświeżyć wszystkie banery na osi czasu albo wczytać zupełnie nowe banery z pliku Figmy, kliknij ikonę Refresh w głównym menu nagłówka wtyczki.
Ponownie pojawi się ekran wyboru banerów. Możesz zaznaczyć lub odznaczyć tylko te banery, które wtyczka ma wczytać, i kliknąć przycisk Load Checked Banners albo kliknąć przycisk Load All Banners, aby automatycznie wczytać wszystkie. Zaktualizowane warstwy pojawią się na osi czasu Bannerify i w podglądach na żywo.
Odświeżanie pojedynczego baneru
Jeśli dodasz lub zmienisz warstwy w pliku Figmy, gdy Bannerify jest już uruchomione, nie zaktualizują się one automatycznie. Banery możesz jednak odświeżyć na dwa sposoby.
Aby szybko odświeżyć pojedynczy baner, kliknij ikonę Refresh na pasku nagłówka baneru. Odświeżone zostaną tylko warstwy tego baneru, a zaktualizowane warstwy pojawią się na osi czasu Bannerify i w podglądach na żywo.
Ustawianie jednolitego tła baneru
Jednolity kolor tła dowolnego baneru ustawisz, nadając jego ramce w Figmie jednolite wypełnienie (Fill) w wybranym kolorze. Ten kolor może być przez chwilę widoczny, zanim wczytają się elementy graficzne.
Automatyczne przewijanie do banerów
Aby ułatwić przełączanie się między edytowanymi banerami, Bannerify automatycznie przewija oś czasu do baneru, gdy klikniesz odpowiadającą mu warstwę (lub warstwę podrzędną) na stronie w Figmie.
Działa to też w drugą stronę: jeśli klikniesz ikonę ramki lub instancji nad dowolnym podglądem baneru na osi czasu, Figma automatycznie przewinie i przybliży odpowiadającą mu warstwę na stronie.
Zmiana rozmiaru okna wtyczki
Jeśli korzystasz z większego (lub mniejszego) monitora, Bannerify pozwala zmienić rozmiar okna wtyczki, aby wygodniej korzystać z osi czasu na ekranie danej wielkości. Rozmiar okna – od mniejszych do większych (4K) – zmienisz w menu rozwijanym rozmiaru w głównym nagłówku wtyczki.