Eksport z Figmy do Adobe After Effects

Eksportuj projekty z Figmy do Adobe XD na potrzeby pracy w After Effects i konfiguruj opcje eksportu.

Poradnik wideo: konwersja z Figmy do Adobe After Effects

Ten film pokazuje, jak jednym kliknięciem automatycznie przekonwertować projekty z Figmy do After Effects bezpośrednio w Figmie za pomocą wtyczki Convertify.

Aby wyeksportować projekty z Figmy do Adobe After Effects, wykonaj kroki konwersji, pobierania i otwierania pliku .xd, który następnie możesz wyeksportować z Adobe XD do Adobe After Effects.

Wybór jednej strony Figmy do konwersji na potrzeby Adobe After Effects ​

Gdy wtyczka Convertify jest uruchomiona, kliknij kartę Export from Figma, wybierz Export Figma to Adobe After Effects w menu wyboru konwersji, a potem wybierz stronę Figmy, którą chcesz przekonwertować na potrzeby Adobe After Effects.

Wtyczka automatycznie wyeksportuje stronę Figmy, którą aktualnie oglądasz. Aby zmienić eksportowaną stronę, kliknij dowolną stronę pliku Figmy w lewej kolumnie Figmy, pod nagłówkiem Pages.

Po wybraniu strony możesz przekonwertować projekt do pliku Adobe XD (aby potem wyeksportować go do After Effects), klikając przycisk Export This Page we wtyczce Convertify. Rozpocznie się automatyczny proces konwersji.

Szacowany czas Szacowany czas (na przykład ~14 seconds to convert 555 layers) zależy od liczby warstw na stronie Figmy i pokazuje, ile mniej więcej potrwa konwersja. Strony Figmy zawierające duże obrazy prawdopodobnie wydłużą czas potrzebny na konwersję strony do pliku Adobe XD.

Adobe XD nie obsługuje wielu stron w jednym dokumencie. Wybieranie wielu stron dotyczy tylko eksportu do Sketcha, ponieważ aplikacja Adobe XD obsługuje obecnie tylko pliki jednostronicowe.

Eksport wybranych ramek ze strony Figmy do XD ​

Jeśli nie chcesz konwertować całej strony Figmy do pliku Adobe XD (aby potem wyeksportować go do After Effects), możesz przekonwertować do Adobe XD tylko wybrane ramki projektu. Zaznacz ramki w Figmie, które chcesz przekonwertować, a potem kliknij przycisk Export Selected Frames we wtyczce Convertify. Rozpocznie się automatyczny proces konwersji.

Adobe XD nie obsługuje wielu stron w jednym dokumencie. Wybieranie wielu stron dotyczy tylko eksportu do Sketcha, ponieważ aplikacja Adobe XD obsługuje obecnie tylko pliki jednostronicowe.

Pobieranie pliku .xd do eksportu do After Effects ​

Gdy Convertify skończy przetwarzać stronę Figmy, zobaczysz komunikat potwierdzenia. Plik .xd pobierzesz, klikając przycisk Download .xd (for exporting to AE).

Po pobraniu pliku .xd z Figmy na komputer otwórz w eksploratorze plików folder, w którym został zapisany. Dwukrotne kliknięcie wyeksportowanego pliku .xd otworzy go w wersji Adobe XD zainstalowanej na Twoim komputerze.

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).

Eksport obszaru roboczego z Adobe XD do After Effects ​

Instalacja Adobe XD Jeśli używasz Maca lub Windowsa i masz płatne konto Adobe CC, możesz zainstalować Adobe XD w Creative Cloud (lub pobrać instalator .dmg bezpośrednio stąd), co powinno pozwolić Ci uruchomić program na komputerze. W internecie znajdziesz też samodzielny instalator dla Windowsa.

Po otwarciu pliku .xd w Adobe XD możesz natywnie eksportować obszary robocze do After Effects. Kliknij obszar roboczy na stronie (ten, którego chcesz użyć w After Effects), a potem kliknij File → Export → After Effects.

Jeśli XD nie eksportuje obszaru roboczego do After Effects, najpierw zaznacz pole wyboru Mark for Export w panelu po prawej stronie.

Wyeksportowane warstwy w After Effects ​

Po kliknięciu File → Export → After Effects dla wybranego obszaru roboczego w Adobe XD na komputerze automatycznie otworzy się aplikacja Adobe After Effects (upewnij się, że jest zainstalowana) i natywnie wyeksportuje wybrany obszar roboczy ze wszystkimi jego warstwami z Adobe XD na oś czasu After Effects.

Po zakończeniu eksportu możesz zapisać nowy plik After Effects i zamknąć Adobe XD, aby dalej pracować nad animacją z użyciem warstw pochodzących z pliku Figmy, które możesz teraz animować w After Effects.

Konfiguracja opcji eksportu do Adobe After Effects ​

Przed eksportem projektów z Figmy do Adobe After Effects (przez import pliku .xd) możesz skonfigurować kilka opcjonalnych ustawień, które mogą się przydać.

Renderowanie warstw z prefiksem * jako obrazów ​

Włączenie przełącznika Render layers with * prefix (eg. "* Frame") as images sprawia, że warstwy z Figmy, których nazwy zaczynają się od „*” (na przykład „*Frame 1”), są eksportowane jako warstwy obrazów zamiast w swoim zwykłym typie.

Dołączanie nakładek z obrazami referencyjnymi obszarów roboczych ​

Włączenie przełącznika Include reference image overlays for artboards sprawia, że na każdym obszarze roboczym w eksportowanym pliku umieszczany jest jego obraz referencyjny z kryciem warstwy 50%. Może to pomóc przy ręcznych poprawkach lub korygowaniu położenia warstw.

Rozgrupowanie wszystkich warstw podrzędnych obszarów roboczych z Figmy ​

Włączenie przełącznika Ungroup all Figma artboard child layers automatycznie rozgrupowuje wszystkie warstwy typu „Group” w pliku Figmy.

Skalowanie kompozycji After Effects ​

Wybranie opcji Scale Comps automatycznie skaluje istniejące obszary robocze z Figmy w zakresie @0.25x - @4x (domyślnie @1x, co w ogóle nie zmienia skali projektów). Dzięki temu kompozycje zostaną powiększone lub pomniejszone po wyeksportowaniu przekonwertowanego pliku .xd do After Effects.

Dokładniejsze pozycjonowanie dla zainstalowanych fontów ​

Adobe XD nie obsługuje takich właściwości tekstu jak wyrównanie w pionie i inaczej niż Figma oblicza interlinię.

Włączenie przełącznika More accurate positioning for installed fonts (slower) sprawia, że wartości tekstu z Figmy są eksportowane do XD dokładniej (dla fontów w projekcie, które są zainstalowane na Twoim komputerze).

Dłuższy czas konwersji. Włączenie opcji More accurate positioning for installed fonts (slower) może sprawić, że konwersja będzie trwać znacznie dłużej niż zwykle (w zależności od liczby warstw tekstowych).

Różnice między Figmą a After Effects ​

Convertify stara się przekonwertować wszystkie warstwy i atrybuty z Figmy do Adobe XD na potrzeby eksportu do After Effects. Istnieją jednak naturalne ograniczenia wynikające z tego, że Adobe XD obsługuje mniej natywnych funkcji niż Figma.

Funkcje Figmy niedostępne w Adobe XD (i nieeksportowane z XD do After Effects) ​

Te funkcje są dostępne w Figmie, ale nie występują natywnie w Adobe XD, więc nie zostaną przeniesione do After Effects podczas eksportu pliku.

  • Ukrywanie nadrzędnych obszarów roboczych
  • Obrócone nadrzędne obszary robocze
  • Elipsy z właściwościami „arc”
  • Wiele wypełnień lub obrysów na jednej warstwie
  • Warstwy wektorowe z zaokrągleniem narożników
  • Obrysy lub wypełnienia zastosowane do grup
  • Wyrównanie w pionie w warstwach tekstowych
  • Zagnieżdżone maski warstw