Obrócona ramka nadrzędna psuje położenie warstw

Zwykle dzieje się tak, gdy ramka nadrzędna została obrócona o kąt inny niż 0 stopni (np. „-90” lub „180”) przed dodaniem zawartości, co zaburza położenie warstw podrzędnych. Aby to naprawić, utwórz nową, nieobróconą ramkę o tych samych wymiarach i skopiuj lub przeciągnij do niej warstwy podrzędne z oryginalnej, obróconej ramki.

Ramka ograniczająca warstwy tekstowej (przycinanie)

Położenie warstwy tekstowej może być też nieprawidłowe (albo warstwa może być przycięta), gdy rozmiar pola tekstowego nie pasuje do rozmiaru samego tekstu. Jeśli na przykład tekst ma kilka wierszy, a wysokość „ramki ograniczającej” jest bardzo mała, położenie zostanie błędnie przesunięte. Aby to naprawić, dopasuj wysokość ramki ograniczającej do rozmiaru samego tekstu.

Rozmyte pliki SVG z cieniami w Safari

Istnieje znany problem z plikami SVG zawierającymi cienie w Safari: przeglądarka rasteryzuje wektor do pikseli, przez co wygląda on mniej ostro.

Jedna z sugestii w powyższym wątku to rozdzielenie cienia i przycisku (lub innej treści) na dwie osobne warstwy. Górna warstwa przycisku bez cienia nadal będzie wyświetlana w Safari jako ostry SVG, a warstwa pod nią posłuży tylko do dodania cienia.

Możesz też we wtyczce zmienić format obrazu tylko dla warstwy przycisku CTA na „PNG” i ustawić skalę tej warstwy na @2x (retina). Dzięki temu CTA zostanie wyeksportowane jako obraz PNG 2x, który pozostanie ostry i nie będzie miał problemu z cieniami SVG w Safari.

Kolory i gradienty w GIF-ach są ziarniste

GIF-y różnią się od zwykłych obrazów JPG i PNG, bo mogą zawierać maksymalnie 256 kolorów. Jeśli używasz bardzo szczegółowych obrazów lub gradientów z dużą liczbą odcieni, z powodu tego ograniczenia formatu GIF wynik nie będzie tak ostry ani tak wierny kolorystycznie jak obrazy źródłowe.

Przezroczystość nie działa w GIF-ach

Format GIF obsługuje krycie 0% albo 100%, ale nic pomiędzy. Możesz więc mieć animowany GIF z całkowicie przezroczystym tłem za elementami, które są w pełni kryjące i widoczne. Warstwy muszą być zatem albo całkowicie przezroczyste, albo nie: warstwy o kryciu poniżej 50% będą przezroczyste, a warstwy o kryciu powyżej 50% – kryjące.

Oznaczanie przezroczystych GIF-ów w Figmie. Domyślnie eksporty GIF nie zawierają przezroczystości. Jeśli Twój GIF jej wymaga, dodaj słowo transparent w dowolnym miejscu nazwy warstwy w Figmie.

Gdzie hostować pliki wideo .mp4

Przy dodawaniu filmów do Bannerify wtyczka wczyta każdy URL prowadzący bezpośrednio do pliku .mp4, więc niestety linki do Vimeo, YouTube ani innych odtwarzaczy w przeglądarce nie zadziałają. Dobrą opcją do hostowania filmów jest Backblaze B2: po założeniu darmowego konta dostajesz 10 GB bezpłatnego miejsca, a jeśli utworzysz publiczny bucket, możesz kopiować linki do przesłanych plików wideo i wklejać link do pliku .mp4 w Bannerify. Inną popularną opcją jest Dropbox, gdzie możesz przesłać plik .mp4 i użyć jego linku we wtyczce Bannerify. Bannerify automatycznie zmieni ?dl=0 na ?raw=1, aby link prowadził bezpośrednio do pliku wideo (a nie do odtwarzacza na stronie Dropbox).

Cienka biała linia wokół eksportowanych obrazów

Czasami obrazy mają wokół krawędzi słabą, cienką białą linię. Figma tak działa, gdy warstwa nie jest ustawiona na pełnych pikselach (np. Y: 156.76 lub X: 56.3) – wtedy ta linia subpikselowa automatycznie trafia do eksportu. Bannerify próbuje automatycznie zaokrąglać te wartości w warstwach, których rozmiar można zmieniać przez Figma Plugin API, ale jeśli chcesz rozwiązać problem ręcznie, upewnij się, że wszystkie warstwy mają położenie w pełnych pikselach.

Banery w wysokiej rozdzielczości nie eksportują się do MP4

Gdy eksportujesz z wtyczki banery w wysokiej rozdzielczości do wideo MP4, Figma czasem osiąga swój limit pamięci 2 GB i nie może bezpośrednio wygenerować pliku .mp4. Aby to obejść, wyeksportuj banery z Bannerify do formatu WebM, a potem przekonwertuj wyeksportowane pliki .webm do .mp4 poza Figmą, w transkoderze wideo Handbrake.

Google Ads nie zatwierdza banerów

Jest kilka typowych powodów, dla których baner HTML nie przesyła się do Google lub nie przechodzi walidacji. Zwykle plik baneru jest za duży albo wymiary banerów nie odpowiadają dokładnie „standardowym” rozmiarom. Przed przesłaniem możesz sprawdzić banery w walidatorach dla Google Ads lub DoubleClick.

Wyeksportowany baner HTML nie animuje się w przeglądarce

Jeśli wyeksportowany baner HTML wygląda na zamrożony, nie animuje się albo działa w podglądzie Bannerify, ale nie po otwarciu pliku HTML w przeglądarce, sprawdź, czy nie masz włączonego rozszerzenia blokującego reklamy lub chroniącego prywatność. Niektóre rozszerzenia mogą blokować poprawne działanie lokalnych plików HTML lub plików związanych z reklamami. Tymczasowo wyłącz rozszerzenie dla lokalnego pliku podglądu, otwórz eksport w innej przeglądarce albo prześlij baner do swojego zwykłego środowiska podglądu lub stagingu i przetestuj go tam.

Puste rozszerzenia plików w aplikacji desktopowej Figma w Windows

Istnieje znany problem z aplikacją desktopową Figma (tylko w Windows), który dotyczy też zwykłych eksportów plików z Figmy. Podczas zapisywania pliku możesz zobaczyć etykietę „all files”. Jeśli ją zignorujesz i klikniesz „Save”, plik i tak powinien zapisać się z prawidłowym rozszerzeniem i otworzyć się normalnie po pobraniu na komputer. Jeśli plik nadal zapisuje się bez rozszerzenia, zmień jego nazwę i ręcznie dopisz prawidłowe rozszerzenie.

Walidator HTML Google zamienia elementy SVG z cieniem na PNG (przy przesyłaniu z telefonu)

Z nieznanego powodu, gdy przesyłasz plik .zip z banerem do DCM Validator w przeglądarce na urządzeniu mobilnym (na przykład iPhonie), walidator automatycznie zamienia wszystkie elementy SVG z cieniem na PNG, przez co w podglądzie wyglądają one na bardziej rozpikselowane.

Rozpikselowane eksporty obrazów

Jeśli eksportujesz banery, gdy obrazy w Figmie jeszcze się stopniowo wczytują, mogą zostać wyeksportowane w rozpikselowanej postaci, bo nie zdążyły się w pełni wczytać w pliku Figmy. Aby tego uniknąć, przed eksportem banerów wtyczką Bannerify upewnij się, że wszystkie obrazy są wczytane w 100% i wyglądają ostro w pliku Figmy. Możesz też użyć funkcji „Downsizer” we wtyczce TinyImage, aby zmniejszyć wypełnienia obrazem do rozmiaru ich warstw. Zmniejszy to rozmiar plików, dzięki czemu obrazy będą się wczytywać w pliku Figmy znacznie szybciej.

Dodawanie atrybutów aria-hidden='true' do warstw

Jeśli ze względu na dostępność potrzebujesz atrybutów aria-hidden, możesz je dodać do poszczególnych warstw, umieszczając aria-hidden w nazwie warstwy w Figmie. Podczas eksportu banerów do HTML do tego elementu HTML zostanie automatycznie dodany atrybut aria-hidden="true".

W Chinach może być potrzebny VPN

Uwaga: jeśli jesteś w Chinach, serwer kont może być blokowany przez „Wielki Firewall Chiński”. Jeśli mimo prawidłowego klucza widzisz błąd aktywacji, prawdopodobnie musisz użyć VPN, aby rozwiązać problem.

„An error occurred while loading the plugin environment”

Może się to zdarzyć w aplikacji desktopowej Figma, jeśli przez pomyłkę włączono ustawienie debugowania Use Developer VM. Aby upewnić się, że jest wyłączone, kliknij prawym przyciskiem myszy w dowolnym miejscu płótna w Figmie, najedź kursorem na Plugins, potem na Development i sprawdź, czy opcja Use Developer VM jest odznaczona. Gdy opcja jest odznaczona (i nie ma obok niej znacznika wyboru), wtyczka po ponownym uruchomieniu powinna działać normalnie.