Użyj Figma Motion Export na karcie GIF w TinyImage, gdy Twoja animacja jest już zbudowana w Figma Motion. Ta metoda korzysta z natywnego renderera animacji Figmy zamiast odtwarzać animację z osobnych statycznych klatek.

Poradnik wideo: masowy eksport warstw Figma Motion do GIF i wideo MP4

Ten film pokazuje, jak za pomocą TinyImage masowo eksportować animacje Figma Motion jako skompresowane GIF-y lub filmy MP4.

Zaznaczanie animacji Motion

W pliku Figma Design zaznacz:

• ramkę najwyższego poziomu, która zawiera animację Motion, albo
• dowolną animowaną warstwę wewnątrz tej ramki najwyższego poziomu.

Otwórz TinyImage, wybierz GIF, a potem Figma Motion Export. TinyImage przypisuje zagnieżdżone zaznaczenia do zawierających je ramek Motion najwyższego poziomu i zaznacza każdą wykrytą animację na liście eksportu.

Wyszukiwanie animacji Motion na stronie

Jeśli bieżące zaznaczenie nie zawiera animacji Motion, TinyImage automatycznie sprawdza bieżącą stronę i wyświetla wszystkie animacje Motion znalezione w ramkach najwyższego poziomu. Za pomocą pól wyboru wybierz jedną lub kilka animacji do eksportu. Domyślnie wszystkie animacje są zaznaczone, a pole wyboru nad listą zaznacza lub odznacza wszystkie ramki.

TinyImage przechowuje tę listę w pamięci podręcznej, dopóki wtyczka pozostaje na tej samej stronie. Wybierz Rescan this page po dodaniu animacji Motion lub zmianie tego, które ramki zawierają animowane warstwy. Aby znaleźć animację na innej stronie, najpierw przejdź na tę stronę w Figmie; TinyImage nie skanuje wszystkich stron w pliku.

Sprawdzanie wybranych ramek

TinyImage wyświetla statyczną miniaturę obok każdej ramki Motion na liście eksportu. Ikona ramki przenosi do tej animacji na płótnie Figmy bez zmiany tego, które animacje są zaznaczone do eksportu.

Miniatury pomagają potwierdzić listę eksportu bez renderowania animacji, otwierania karty Video Export w Figmie ani pobierania pliku podglądu.

Konfiguracja eksportu

Wybierz format wyjściowy z menu obok przycisku eksportu:

• Animated GIF
• Animated PNG (APNG)
• Animated WebP
• MP4 Video
• WebM Video

Ustaw liczbę klatek na sekundę i rozmiar wyjściowy. Te same ustawienia dotyczą każdej zaznaczonej animacji. Wartość Size to skala, więc ramki w tym samym eksporcie masowym mogą zachować różne wymiary w pikselach. GIF, APNG i animowane WebP oferują też wybór między ciągłym zapętleniem a jednokrotnym odtworzeniem. MP4 i WebM mają zamiast tego presety jakości Low, Medium i High.

W przypadku eksportu do GIF wybierz kompresję odpowiadającą Twoim potrzebom:

• No compression pozostawia GIF z Figmy bez zmian, chyba że zmniejszysz liczbę kolorów.
• Lossless compression optymalizuje klatki i strukturę pliku GIF bez stratnej kompresji pikseli.
• Balanced compression używa lekkiej kompresji stratnej (poziom 40), dającej umiarkowane oszczędności przy niskim ryzyku widocznych artefaktów.
• Strong compression używa silniejszej kompresji stratnej (poziom 80), która może bardziej zmniejszyć plik, ale może wprowadzić widoczne artefakty.
• Maximum compression używa najsilniejszej kompresji stratnej (poziom 140), aby uzyskać najprawdopodobniej najmniejszy plik, przy najwyższym ryzyku pasmowania i artefaktów.

Wybierz 256 colors, aby zachować oryginalny limit kolorów Figmy, lub zmniejsz go do 128 colors, 64 colors albo 32 colors. Zmniejszenie palety działa niezależnie od presetu kompresji, więc mniejsza paleta może zmienić kolory lub dodać pasmowanie nawet przy wybranej opcji Lossless compression.

Włącz Size Target i wpisz maksymalny rozmiar w KB, gdy eksportowany GIF musi zmieścić się w sztywnym limicie przesyłania. TinyImage automatycznie testuje stratność i palety 256, 128, 64 i 32 kolorów, a potem zachowuje najmniej agresywny przetestowany wynik, który mieści się w limicie. Gdy cel jest aktywny, ręczne ustawienia kompresji i liczby kolorów zastępuje pole docelowego rozmiaru.

Jeśli żadne z przetestowanych ustawień nie osiągnie celu, TinyImage przygotowuje najmniejszy znaleziony prawidłowy wynik i przed pobraniem podaje jego rozmiar. Plik można jeszcze bardziej zmniejszyć, ograniczając rozmiar eksportu Motion, liczbę klatek na sekundę lub długość animacji.

Ustawienia domyślne eksportują natywny GIF z Figmy bez zmian. Gdy włączona jest dodatkowa kompresja, TinyImage używa zoptymalizowanego wyniku tylko wtedy, gdy jest mniejszy niż oryginalny plik z Figmy. Jeśli optymalizacja się nie powiedzie lub zwiększy rozmiar pliku, TinyImage bezpiecznie eksportuje oryginalny GIF.

Figma ogranicza eksport Motion w planie Starter do 1920 × 1080 i 30 FPS. TinyImage najpierw próbuje wykonać żądany eksport, aby nie obniżać jakości wyniku w płatnych planach. Jeśli Figma odrzuci żądanie przekraczające ten limit, TinyImage automatycznie ponawia próbę z tymczasowej kopii dopasowanej do 1920 × 1080 i ogranicza ją do 30 FPS. Tymczasowa kopia jest usuwana po renderowaniu, a oryginalna ramka pozostaje bez zmian. Niebieskie powiadomienie informuje o wyeksportowanych wymiarach i liczbie klatek na sekundę.

Figma renderuje pliki GIF, MP4 i WebM bezpośrednio. W przypadku APNG i animowanego WebP TinyImage zaczyna od natywnego renderu GIF z Figmy i konwertuje go bez kolejnego przebiegu kompresji stratnej. Te przekonwertowane formaty zachowują wygląd, czas, przezroczystość i paletę kolorów natywnego renderu GIF.

Eksport animacji

Wybierz Export GIF, Export APNG, Export WebP, Export MP4 lub Export WebM. Podczas renderowania każdej animacji Figma może otworzyć lub zaktualizować swoją kartę Video Export.

Gdy zaznaczona jest jedna animacja, TinyImage pobiera ten plik bezpośrednio. Gdy zaznaczonych jest więcej animacji, TinyImage renderuje je w kolejności z listy i pobiera jedno archiwum Figma Motion animations.zip. Każdy plik ma nazwę swojej ramki w Figmie, a TinyImage dodaje numer, gdy zaznaczone ramki dałyby powtarzające się nazwy plików.

Figma Motion i jego API eksportu dla wtyczek są obecnie w wersji beta. Jeśli Figma odrzuci renderowanie mieszczące się już w limitach planu Starter, otwórz ramkę w Figma Motion, sprawdź, czy nadal zawiera animowane warstwy, a potem spróbuj ponownie wyeksportować animację.

Zapisywanie pobranych plików z Figmy. Jeśli korzystasz z aplikacji desktopowej Figma, pojawi się okno pobierania pliku. Jeśli jednak używasz Figmy w przeglądarce internetowej, plik zostanie domyślnie automatycznie pobrany na komputer (zwykle do folderu Downloads / Pobrane).