Poradnik wideo: dodawanie własnego kodu HTML, CSS i JavaScript do banerów eksportowanych z Figmy

Ten film pokazuje, jak za pomocą wtyczki Bannerify dodać własny kod HTML, CSS i JavaScript do banerów eksportowanych z Figmy.

Jeśli chcesz dodać własny kod HTML/CSS/JavaScript do wszystkich eksportowanych banerów HTML, włącz przełącznik Inject Custom Code w ustawieniach eksportu. Pozwala to dodać własny kod HTML przed zamykającym znacznikiem </body> (aby dodać treść) lub </head> (aby dodać metatagi lub linki do zasobów), dodać własny CSS w nowym znaczniku style albo dodać własny kod JavaScript w nowym znaczniku <script></script>.

Przykład nakładki z przełączanym zastrzeżeniem. Jako podstawowy przykład typowego zastosowania tej funkcji możesz wykorzystać ten przykład kodu HTML/CSS/JS w CodePen, który dodaje do banerów wyskakujące okno z zastrzeżeniem, otwierane i zamykane przełącznikiem. Możesz dowolnie kopiować i modyfikować style oraz treść.

Zapisane ustawienia własnego kodu (opcjonalnie)

Funkcja Saved Custom Code Presets pozwala zapisywać i ponownie wykorzystywać różne konfiguracje własnego kodu HTML, CSS i JavaScript podczas eksportu banerów. Aby z niej skorzystać, wpisz własny kod w czterech dostępnych polach (Head HTML, Body HTML, CSS i JavaScript), podaj opisową nazwę i kliknij Save as New Preset, aby zapisać konfigurację do przyszłego użytku.

Zapisane ustawienie możesz szybko wczytać z listy rozwijanej Load Saved Preset (Optional), aby od razu wypełnić wszystkie pola własnego kodu zapisaną konfiguracją. Dzięki temu nie musisz ręcznie kopiować i wklejać fragmentów kodu przy każdym eksporcie banerów o innych wymaganiach. Ustawieniami możesz zarządzać: usuwać te, których już nie potrzebujesz, albo aktualizować istniejące – wczytaj je, wprowadź zmiany i zapisz pod tą samą nazwą. Wszystkie ustawienia są przechowywane lokalnie w bieżącej aplikacji Figma (za pomocą API clientStorage z Figmy) i pozostają dostępne po każdym ponownym otwarciu panelu kodu Bannerify, także w innych plikach Figmy. Ułatwia to utrzymanie spójnego kodu w wielu sesjach eksportu.

Dodawanie własnych fontów do edytowalnego tekstu HTML

Użyj pliku fontu webowego dla każdej grubości i stylu używanych w edytowalnym tekście. Zainstalowanie fontu w Figmie nie dołącza go do eksportu HTML.

1. Zdobądź zatwierdzone przez markę pliki .woff2 lub .woff przeznaczone do użytku w sieci.
2. Włącz eksport tekstu jako akapitów. Edytowalny tekst pozostaw w Figmie odblokowany.
3. W panelu eksportu HTML włącz Inject Custom Code, a potem wybierz Add custom CSS styles.
4. Wklej regułę @font-face do pola CSS bez otaczającego znacznika <style>. Zastąp przykładową rodzinę dokładną nazwą rodziny fontów używaną w Figmie i w deklaracji font-family eksportowanego tekstu, a grubość i styl dopasuj do faktycznego fontu.

@font-face {
  font-family: "Your Brand Font";
  src: url("fonts/brand-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

5. Dodaj osobną regułę dla każdej dodatkowej grubości lub stylu (na przykład 700 dla pogrubienia lub italic dla pliku kursywy).
6. Wyeksportuj i rozpakuj baner. Umieść pliki fontów w folderze fonts obok pliku HTML każdego baneru, a potem ponownie spakuj całą zawartość tego baneru. Bannerify wstawia CSS, ale nie kopiuje tych lokalnych plików fontów do pliku ZIP. Względne URL-e fontów są rozwiązywane względem lokalizacji arkusza stylów – jeśli CSS jest zapisany w innym folderze, dostosuj ścieżkę.
7. Przetestuj paczkę na lokalnym serwerze WWW lub w podglądzie platformy docelowej, także na urządzeniu bez zainstalowanego fontu. Sprawdź wczytywanie fontu, łamanie wierszy i dłuższe teksty zastępcze. Pliki fontów wliczają się do rozmiaru paczki, a platforma docelowa musi na nie zezwalać.

Zamiast tego możesz użyć bezpośredniego URL HTTPS do hostowanego pliku fontu, jeśli Twoja platforma reklamowa zezwala na zewnętrzne żądania fontów. Serwer fontów musi zezwalać na wczytywanie fontów z innych domen (cross-origin). Zobacz dokumentację MDN dotyczącą @font-face.