---
url: "/pl/bannerify/design/figma-frames.md"
description: "Bannerify traktuje każdą **ramkę i instancję najwyższego poziomu** na aktywnej stronie Figmy jako **baner**, także elementy w zestawie komponentów."
---

# Projektowanie banerów w Figmie

> Bannerify traktuje każdą **ramkę i instancję najwyższego poziomu** na aktywnej stronie Figmy jako **baner**, także elementy w zestawie komponentów.

### 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ć.
[Embedded media](https://www.youtube-nocookie.com/embed/-TA088FNulA)

## Zaczynanie od pustej strony w Figmie {#starting-from-a-blank-figma-page}

[Video](/assets/videos/bannerify/design/blank-frames.mp4)

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 {#structuring-your-figma-banner-frame-layers}

[Video](/assets/videos/bannerify/design/frame-children.mp4)

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

> **Note:** **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.

> **Tip:** **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 {#starting-with-banners-you-ve-already-designed}

[Video](/assets/videos/bannerify/design/loading-existing.mp4)

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 {#refreshing-or-re-loading-multiple-all-banners}

[Video](/assets/videos/bannerify/design/refreshing-all-banners.mp4)

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 {#refreshing-a-single-banner}

[Video](/assets/videos/bannerify/design/refreshing-single-banners.mp4)

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 {#setting-a-solid-banner-background-fill}

[Video](/assets/videos/bannerify/design/setting-background-fill.mp4)

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 {#auto-scrolling-banners-into-view}

[Video](/assets/videos/bannerify/design/scroll-layers.mp4)

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 {#resizing-the-plugin-window}

[Video](/assets/videos/bannerify/design/resize-window.mp4)

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.