Szablony miniatur w Figma - jak zbudować system grafik do setek ofert
Aleksandra Marecka
Aleksandra Marecka
Head of Digital Marketing
Szablony miniatur w Figma - jak zbudować system grafik do setek ofert
Szablony miniatur w Figma budujesz z trzech warstw: stylów i zmiennych (kolory, fonty, odstępy), komponentów z wariantami (plakietki, ikony cech, ramki) oraz ramek-szablonów o stałych wymiarach dla każdego kanału. Gdy zmieniasz komponent główny, zmiana pojawia się we wszystkich grafikach, które z niego korzystają, więc setki miniatur i infografik pozostają spójne. Taki system skraca przygotowanie kolejnych ofert do podmiany zdjęcia i tekstu.
Sklep z kilkudziesięcioma produktami poradzi sobie z grafikami robionymi od zera. Przy kilkuset ofertach w kilku kanałach to przestaje działać: każda grafika wygląda trochę inaczej, zmiana koloru plakietki promocyjnej oznacza poprawianie wszystkiego ręcznie, a nowa osoba w zespole nie wie, który plik jest aktualny. Figma, dzięki komponentom i wariantom, pozwala zamienić zbiór pojedynczych grafik w system. Poniżej opisujemy, jak go zaplanować, z jakich elementów się składa i jak go utrzymać przy rosnącym katalogu.
[#wazne] W skrócie: system szablonów miniatur w Figma składa się ze stylów i zmiennych, komponentów z wariantami oraz ramek o wymiarach dla każdego kanału. Zmiana komponentu głównego aktualizuje wszystkie jego kopie, dlatego setki grafik zostają spójne. Biblioteki współdzielone między plikami publikuje się w płatnych planach Figma (stan na lipiec 2026 - sprawdź aktualną pomoc Figma). Pamiętaj, że zdjęcie główne na wielu marketplace'ach musi pokazywać sam produkt, więc szablon trzeba dopasować do zasad kanału. W Vinson budujemy takie systemy grafik dla sklepów i przekazujemy je zespołom klientów.
Czym są szablony miniatur w Figma i komu się przydają
Szablon miniatury to zapisany układ grafiki oferty: wymiar, położenie produktu, marginesy, miejsce na plakietki, ikony i tekst. W Figma taki szablon to ramka zbudowana z komponentów, czyli elementów wielokrotnego użytku. Każde użycie komponentu w projekcie to jego kopia (instancja), która dziedziczy wygląd po komponencie głównym.
Według centrum pomocy Figma wariant to wersja komponentu, która różni się w przewidywalny sposób, np. rozmiarem, stanem lub kolorem, a warianty grupuje się w zestawy. W praktyce sklepu oznacza to, że jedna plakietka „Nowość” może mieć warianty kolorystyczne dla każdej kategorii, a ikona cechy produktu - wersję jasną i ciemną. Zamiast kopiować i przerabiać pliki, przełączasz wariant w panelu właściwości.
System szablonów najbardziej pomaga sklepom, które mają dużo podobnych produktów, sprzedają w kilku kanałach i regularnie dodają nowe oferty. Przydaje się też wtedy, gdy grafiki robi kilka osób albo gdy część pracy wykonuje zespół sklepu, a część zewnętrzny grafik.
Budowę systemu warto rozplanować w kilku krokach:
[#chart:pgr83a]
Z czego składa się system szablonów miniatur w Figma
Dobrze zaprojektowany system ma kilka warstw, które się na sobie opierają. Poniższa tabela pokazuje, co powinna zawierać każda z nich i jaką korzyść daje sklepowi:
| Warstwa | Co zawiera | Korzyść dla sklepu |
|---|---|---|
| Style i zmienne | kolory marki, fonty, rozmiary tekstu, odstępy | jedna zmiana koloru lub fontu w całym systemie |
| Komponenty podstawowe | plakietki, ikony cech, strzałki, ramki wymiarów | identyczne elementy na wszystkich grafikach |
| Warianty komponentów | kolory kategorii, wersje jasne i ciemne, długości tekstu | szybkie przełączanie zamiast nowych plików |
| Ramki-szablony | układy miniatury, infografiki, grafiki wymiarów | nowa grafika to podmiana zdjęcia i tekstu |
| Strony eksportu | gotowe grafiki pogrupowane według kanału | porządek w plikach i łatwy eksport partii |
Style, zmienne i typografia
Fundamentem są kolory i fonty zapisane jako style lub zmienne, a nie wpisywane ręcznie w każdym elemencie. Jeśli kolor plakietki jest zdefiniowany jako zmienna, jego zmiana w jednym miejscu zmienia wszystkie plakietki. To samo dotyczy fontów i rozmiarów tekstu. Zanim zaczniesz, upewnij się, że masz ustaloną paletę kolorów marki sklepu oraz fonty z licencją pozwalającą na użycie w grafikach handlowych.
Komponenty, właściwości i auto layout
Komponenty w e-commerce to najczęściej plakietki (nowość, bestseller, zestaw), ikony cech produktu, ramki z wymiarami i bloki tekstu na infografikach. Właściwości komponentów pozwalają zmieniać tekst, pokazywać lub ukrywać element i podmieniać ikonę bez odłączania kopii od komponentu głównego. Auto layout sprawia z kolei, że plakietka sama dopasowuje szerokość do długości tekstu, a lista cech układa się równo niezależnie od liczby punktów. Bez tych dwóch funkcji system szybko zaczyna wymagać ręcznego poprawiania odstępów.
Jak uporządkować strony i nazwy w pliku Figma
Przy setkach grafik porządek w pliku jest równie ważny jak sam projekt. Sprawdza się prosty podział na strony: osobna strona na style i komponenty, osobna na szablony, a gotowe grafiki pogrupowane według kategorii produktów lub kanału sprzedaży. Komponenty nazywaj według wzoru typ/nazwa/wariant, np. plakietka/nowość/różowa, bo Figma grupuje elementy w panelu według ukośników. Ramki z gotowymi grafikami nazywaj numerem SKU i typem grafiki. Taka konwencja wydaje się formalnością, ale po kilku miesiącach decyduje o tym, czy nowa osoba w zespole znajdzie właściwy plik w minutę, czy w godzinę.
Szablony miniatur w Figma budujesz z trzech warstw: stylów i zmiennych (kolory, fonty, odstępy), komponentów z wariantami (plakietki, ikony cech, ramki) oraz ramek-szablonów o stałych wymiarach dla każdego kanału. Gdy zmieniasz komponent główny, zmiana pojawia się we wszystkich grafikach, które z niego korzystają, więc setki miniatur i infografik pozostają spójne. Taki system skraca przygotowanie kolejnych ofert do podmiany zdjęcia i tekstu.
Sklep z kilkudziesięcioma produktami poradzi sobie z grafikami robionymi od zera. Przy kilkuset ofertach w kilku kanałach to przestaje działać: każda grafika wygląda trochę inaczej, zmiana koloru plakietki promocyjnej oznacza poprawianie wszystkiego ręcznie, a nowa osoba w zespole nie wie, który plik jest aktualny. Figma, dzięki komponentom i wariantom, pozwala zamienić zbiór pojedynczych grafik w system. Poniżej opisujemy, jak go zaplanować, z jakich elementów się składa i jak go utrzymać przy rosnącym katalogu.
[#wazne] W skrócie: system szablonów miniatur w Figma składa się ze stylów i zmiennych, komponentów z wariantami oraz ramek o wymiarach dla każdego kanału. Zmiana komponentu głównego aktualizuje wszystkie jego kopie, dlatego setki grafik zostają spójne. Biblioteki współdzielone między plikami publikuje się w płatnych planach Figma (stan na lipiec 2026 - sprawdź aktualną pomoc Figma). Pamiętaj, że zdjęcie główne na wielu marketplace'ach musi pokazywać sam produkt, więc szablon trzeba dopasować do zasad kanału. W Vinson budujemy takie systemy grafik dla sklepów i przekazujemy je zespołom klientów.
Czym są szablony miniatur w Figma i komu się przydają
Szablon miniatury to zapisany układ grafiki oferty: wymiar, położenie produktu, marginesy, miejsce na plakietki, ikony i tekst. W Figma taki szablon to ramka zbudowana z komponentów, czyli elementów wielokrotnego użytku. Każde użycie komponentu w projekcie to jego kopia (instancja), która dziedziczy wygląd po komponencie głównym.
Według centrum pomocy Figma wariant to wersja komponentu, która różni się w przewidywalny sposób, np. rozmiarem, stanem lub kolorem, a warianty grupuje się w zestawy. W praktyce sklepu oznacza to, że jedna plakietka „Nowość” może mieć warianty kolorystyczne dla każdej kategorii, a ikona cechy produktu - wersję jasną i ciemną. Zamiast kopiować i przerabiać pliki, przełączasz wariant w panelu właściwości.
System szablonów najbardziej pomaga sklepom, które mają dużo podobnych produktów, sprzedają w kilku kanałach i regularnie dodają nowe oferty. Przydaje się też wtedy, gdy grafiki robi kilka osób albo gdy część pracy wykonuje zespół sklepu, a część zewnętrzny grafik.
Budowę systemu warto rozplanować w kilku krokach:
[#chart:pgr83a]
Z czego składa się system szablonów miniatur w Figma
Dobrze zaprojektowany system ma kilka warstw, które się na sobie opierają. Poniższa tabela pokazuje, co powinna zawierać każda z nich i jaką korzyść daje sklepowi:
| Warstwa | Co zawiera | Korzyść dla sklepu |
|---|---|---|
| Style i zmienne | kolory marki, fonty, rozmiary tekstu, odstępy | jedna zmiana koloru lub fontu w całym systemie |
| Komponenty podstawowe | plakietki, ikony cech, strzałki, ramki wymiarów | identyczne elementy na wszystkich grafikach |
| Warianty komponentów | kolory kategorii, wersje jasne i ciemne, długości tekstu | szybkie przełączanie zamiast nowych plików |
| Ramki-szablony | układy miniatury, infografiki, grafiki wymiarów | nowa grafika to podmiana zdjęcia i tekstu |
| Strony eksportu | gotowe grafiki pogrupowane według kanału | porządek w plikach i łatwy eksport partii |
Style, zmienne i typografia
Fundamentem są kolory i fonty zapisane jako style lub zmienne, a nie wpisywane ręcznie w każdym elemencie. Jeśli kolor plakietki jest zdefiniowany jako zmienna, jego zmiana w jednym miejscu zmienia wszystkie plakietki. To samo dotyczy fontów i rozmiarów tekstu. Zanim zaczniesz, upewnij się, że masz ustaloną paletę kolorów marki sklepu oraz fonty z licencją pozwalającą na użycie w grafikach handlowych.
Komponenty, właściwości i auto layout
Komponenty w e-commerce to najczęściej plakietki (nowość, bestseller, zestaw), ikony cech produktu, ramki z wymiarami i bloki tekstu na infografikach. Właściwości komponentów pozwalają zmieniać tekst, pokazywać lub ukrywać element i podmieniać ikonę bez odłączania kopii od komponentu głównego. Auto layout sprawia z kolei, że plakietka sama dopasowuje szerokość do długości tekstu, a lista cech układa się równo niezależnie od liczby punktów. Bez tych dwóch funkcji system szybko zaczyna wymagać ręcznego poprawiania odstępów.
Jak uporządkować strony i nazwy w pliku Figma
Przy setkach grafik porządek w pliku jest równie ważny jak sam projekt. Sprawdza się prosty podział na strony: osobna strona na style i komponenty, osobna na szablony, a gotowe grafiki pogrupowane według kategorii produktów lub kanału sprzedaży. Komponenty nazywaj według wzoru typ/nazwa/wariant, np. plakietka/nowość/różowa, bo Figma grupuje elementy w panelu według ukośników. Ramki z gotowymi grafikami nazywaj numerem SKU i typem grafiki. Taka konwencja wydaje się formalnością, ale po kilku miesiącach decyduje o tym, czy nowa osoba w zespole znajdzie właściwy plik w minutę, czy w godzinę.
- Grafiki ofertowe, banery i miniatury
- Projekty pod marketplace’y i sklep
- Szybka wycena bez zobowiązań
Wycenę przygotuje Aleksandra Marecka, Head of Digital MarketingFigma szablon oferty - jak dopasować go do kanałów sprzedaży
Ten sam produkt potrzebuje innych grafik w różnych kanałach. Zdjęcie główne na wielu marketplace'ach musi pokazywać sam produkt - np. Amazon wymaga czysto białego tła na zdjęciu głównym, a Google Merchant Center nie przyjmuje zdjęć z nakładkami promocyjnymi. Dlatego szablon dla zdjęcia głównego to zwykle tylko ramka z ustalonym marginesem i położeniem produktu, bez tekstu i plakietek. Plakietki, ikony i opisy cech umieszczasz na dalszych zdjęciach galerii, w grafikach w opisie oferty, we własnym sklepie i w reklamach (stan na lipiec 2026 - sprawdź aktualne zasady każdej platformy).
W pliku Figma warto więc przygotować osobne ramki-szablony dla każdego typu grafiki:
Zdjęcie główne - kwadrat w wymiarze spełniającym wymagania marketplace'ów, białe tło, produkt wycentrowany ze stałym marginesem.
Infografika cech - zdjęcie produktu i 3-5 ikon z krótkimi opisami korzyści.
Grafika wymiarów - produkt z liniami wymiarowymi i opisem w centymetrach.
Zawartość zestawu - układ pokazujący wszystkie elementy w opakowaniu.
Grafiki sklepu i reklam - formaty pionowe i poziome z miejscem na hasło i plakietkę.
Szablony dla kategorii i wariantów produktów
Sklep z różnymi kategoriami rzadko obejdzie się jednym zestawem szablonów. Infografika dla kosmetyku pokazuje pojemność i skład, a dla mebla - wymiary i materiał. Zamiast budować osobne systemy, przygotuj wspólne podstawy i warianty komponentów dla kategorii, np. inny kolor akcentu albo inny zestaw ikon. Przy produktach w wielu kolorach przydaje się szablon, w którym podmieniasz tylko zdjęcie wariantu, a układ, opisy i plakietki zostają bez zmian. Dzięki temu cała rodzina produktów wygląda spójnie w wynikach wyszukiwania, a klient od razu rozpoznaje ofertę Twojego sklepu.
Poniżej przykładowy podział komponentów, które najczęściej trafiają do systemu szablonów sklepu:
[#chart:pgr83b]
Jak zbudować system grafik do setek ofert krok po kroku
Najczęstszy błąd to zaczynanie od rysowania gotowych miniatur. System buduje się od dołu: najpierw podstawy, potem komponenty, na końcu szablony. Kolejność pracy wygląda tak:
Zbierz wymagania kanałów: wymiary, proporcje, zasady tła i tekstu dla każdej platformy, na której sprzedajesz.
Zapisz style i zmienne: kolory, fonty, rozmiary tekstu, odstępy i zaokrąglenia.
Zaprojektuj komponenty podstawowe i ich warianty, korzystając z auto layoutu.
Złóż ramki-szablony dla każdego typu grafiki i kanału.
Przetestuj system na 10-20 różnych produktach, także tych o nietypowych kształtach i długich nazwach.
Popraw komponenty, które się nie sprawdziły, i dopiero wtedy przygotuj grafiki dla całego katalogu.
Opisz zasady użycia na osobnej stronie pliku: co wolno zmieniać, a czego nie.
[#tip] Nie odłączaj kopii komponentów od komponentu głównego, żeby szybko coś poprawić. Odłączona kopia przestaje się aktualizować, a po kilku miesiącach w pliku są dziesiątki grafik, które nie reagują na zmiany. Jeśli potrzebujesz innej wersji, dodaj nowy wariant do komponentu.
Biblioteki i praca zespołowa
Gdy system rośnie, komponenty warto przenieść do osobnego pliku i opublikować jako bibliotekę, z której korzystają pliki z grafikami ofert. Według centrum pomocy Figma publikowanie bibliotek jest dostępne w planach płatnych, m.in. Professional, Organization i Enterprise. W darmowym planie Starter komponenty i style utworzysz, ale nie opublikujesz ich jako biblioteki dla innych plików (stan na lipiec 2026 - sprawdź aktualną pomoc Figma). Przy małym sklepie wystarczy jeden plik z komponentami i grafikami na osobnych stronach. Gdy jednak grafiki przygotowuje kilka osób albo kilka marek w jednej firmie, osobna biblioteka szybko się zwraca w postaci mniejszej liczby pomyłek.
Biblioteka ma jeszcze jedną zaletę: zmiany w komponentach publikuje się świadomie, a pliki, które z niej korzystają, dostają informację o aktualizacji. Dzięki temu grafik może przygotować nową wersję plakietki promocyjnej i wdrożyć ją we wszystkich grafikach w jednym momencie, np. na start wyprzedaży.
Eksport szablonów miniatur z Figma
Według dokumentacji Figma statyczne pliki eksportuje się w formatach PNG, JPG, SVG i PDF, z wybraną skalą. Jeśli sklep potrzebuje plików WebP, konwersję trzeba zrobić innym narzędziem albo zostawić ją platformie sklepowej. Przy setkach grafik ważne jest, żeby ramki miały czytelne nazwy, np. SKU produktu i typ grafiki. Wtedy eksportowane pliki dostają uporządkowane nazwy, a połączenie grafiki z produktem przy imporcie nie wymaga ręcznego szukania.
System szablonów oszczędza czas wtedy, gdy jedna seria grafik obejmuje wiele produktów. Prosty sposób, by to policzyć:
[#chart:pgr83c]
Do wypełniania szablonów danymi z arkusza, np. nazwami produktów czy cechami, można użyć wtyczek z Figma Community. Ich możliwości i licencje różnią się, dlatego przed wdrożeniem sprawdź, czy wtyczka jest aktualizowana, kto ją udostępnia i jakie dane przetwarza.
Przy eksporcie zwróć też uwagę na skalę. Ramkę zaprojektowaną w mniejszym wymiarze można wyeksportować w skali 2x lub większej, ale zdjęcie produktu w środku musi mieć wystarczającą rozdzielczość - Figma nie doda szczegółów, których nie ma w oryginalnym pliku. Bezpieczniej projektować ramki od razu w docelowym wymiarze i wgrywać do nich zdjęcia w pełnej jakości.
Jak utrzymać system szablonów przy rosnącym katalogu
System grafik nie jest projektem, który kończy się w dniu oddania. Katalog rośnie, platformy zmieniają zasady, a marka odświeża kolory czy hasła. Żeby system nie rozjechał się po kilku miesiącach, warto ustalić, kto jest jego właścicielem. Jedna osoba - grafik w zespole albo zewnętrzny partner - odpowiada za zmiany w komponentach i publikację nowych wersji, a pozostali korzystają z szablonów bez przerabiania elementów podstawowych.
Dobrym nawykiem jest też krótki przegląd systemu co kwartał i przed dużymi kampaniami, np. przed sezonem wyprzedaży. Sprawdź wtedy, czy wszystkie kanały mają aktualne szablony, czy w pliku nie pojawiły się odłączone kopie komponentów i czy plakietki promocyjne odpowiadają bieżącej komunikacji. Zmiany wprowadzaj w komponentach głównych, a nie w pojedynczych grafikach - tylko wtedy setki ofert zaktualizują się jednocześnie. Po każdej większej zmianie wyeksportuj kilka grafik testowych i obejrzyj je na telefonie, bo tam klienci najczęściej oglądają miniatury ofert i tam najszybciej widać zbyt drobny tekst.
Najczęstsze błędy w systemach szablonów miniatur
Systemy szablonów psują się zwykle nie od razu, ale po kilku miesiącach używania. Najczęściej spotykane problemy to kolory wpisane ręcznie zamiast ze zmiennych, kopie odłączone od komponentów, zbyt długie teksty, które nie mieszczą się w plakietkach, i brak testu na telefonie. Przed publikacją każdej partii warto przejść przez krótką listę kontrolną błędów w grafikach ofertowych.
Drugi częsty problem to typografia. Tekst, który dobrze wygląda w dużym podglądzie, na miniaturze w wynikach wyszukiwania staje się nieczytelny. Fonty do systemu wybieraj z myślą o małych rozmiarach i sprawdź warunki licencji - więcej o tym w tekście o typografii marki w e-commerce.
Jak Vinson pomaga zbudować szablony miniatur w Figma
Projektujemy systemy grafik dla sklepów: style, komponenty z wariantami, szablony miniatur, infografik i grafik reklamowych dopasowane do zasad każdego kanału. Przekazujemy uporządkowany plik z instrukcją, żeby zespół sklepu mógł samodzielnie przygotowywać kolejne oferty, albo prowadzimy produkcję grafik u siebie. Szczegóły znajdziesz na stronie projektowanie graficzne dla e-commerce.
Vinson to agencja e-commerce z Bochni, działająca od 2021 roku. Jesteśmy Allegro Ads Partner+, Google Partner, Meta Business Partner, certyfikowanym partnerem Base, partnerem Empik Place i autoryzowanym partnerem Shoper. Klienci oceniają nas na 4,9/5 ze 171 opinii, a współpracowaliśmy z ponad 500 firmami.
Najczęściej zadawane pytania
Jak zrobić szablon miniatury w Figma?
Zacznij od stylów kolorów i fontów, potem zaprojektuj komponenty, takie jak plakietki i ikony, i złóż z nich ramkę w docelowym wymiarze. Każda nowa miniatura to kopia ramki, w której podmieniasz zdjęcie i tekst, a wygląd elementów zmieniasz w komponentach głównych.
Czy w darmowej Figma można tworzyć szablony ofert?
Tak, komponenty, warianty i style utworzysz także w darmowym planie Starter. Ograniczeniem jest publikowanie bibliotek współdzielonych między plikami, które według pomocy Figma wymaga planu płatnego (stan na lipiec 2026 - sprawdź aktualną pomoc Figma).
Czy na miniaturze oferty można umieścić tekst i plakietki?
To zależy od platformy. Na wielu marketplace'ach zdjęcie główne musi pokazywać sam produkt, np. na Amazon na czysto białym tle, a Google Merchant Center nie przyjmuje nakładek promocyjnych. Plakietki i teksty umieszczaj na dalszych zdjęciach galerii, we własnym sklepie i w reklamach.
W jakich formatach Figma eksportuje grafiki?
Według dokumentacji Figma pliki statyczne eksportuje się jako PNG, JPG, SVG i PDF. Jeśli potrzebujesz WebP do sklepu, przekonwertuj pliki osobnym narzędziem albo sprawdź, czy platforma sklepowa robi to automatycznie przy wgrywaniu.
Ile czasu zajmuje zbudowanie systemu szablonów w Figma?
Zależy od liczby kanałów, typów grafik i komponentów. Prosty system dla jednego kanału powstaje szybciej niż biblioteka dla sklepu z wieloma kategoriami i kampaniami. Najwięcej czasu warto przeznaczyć na testy na nietypowych produktach, bo to one ujawniają słabe miejsca szablonów.
Dobrze zbudowane szablony miniatur w Figma to spójne oferty, szybsze wystawianie nowych produktów i łatwe zmiany w całym katalogu. Jeśli chcesz dostać gotowy system grafik dla swojego sklepu, zajrzyj na stronę projektowania graficznego dla e-commerce.
Figma szablon oferty - jak dopasować go do kanałów sprzedaży
Ten sam produkt potrzebuje innych grafik w różnych kanałach. Zdjęcie główne na wielu marketplace'ach musi pokazywać sam produkt - np. Amazon wymaga czysto białego tła na zdjęciu głównym, a Google Merchant Center nie przyjmuje zdjęć z nakładkami promocyjnymi. Dlatego szablon dla zdjęcia głównego to zwykle tylko ramka z ustalonym marginesem i położeniem produktu, bez tekstu i plakietek. Plakietki, ikony i opisy cech umieszczasz na dalszych zdjęciach galerii, w grafikach w opisie oferty, we własnym sklepie i w reklamach (stan na lipiec 2026 - sprawdź aktualne zasady każdej platformy).
W pliku Figma warto więc przygotować osobne ramki-szablony dla każdego typu grafiki:
Zdjęcie główne - kwadrat w wymiarze spełniającym wymagania marketplace'ów, białe tło, produkt wycentrowany ze stałym marginesem.
Infografika cech - zdjęcie produktu i 3-5 ikon z krótkimi opisami korzyści.
Grafika wymiarów - produkt z liniami wymiarowymi i opisem w centymetrach.
Zawartość zestawu - układ pokazujący wszystkie elementy w opakowaniu.
Grafiki sklepu i reklam - formaty pionowe i poziome z miejscem na hasło i plakietkę.
Szablony dla kategorii i wariantów produktów
Sklep z różnymi kategoriami rzadko obejdzie się jednym zestawem szablonów. Infografika dla kosmetyku pokazuje pojemność i skład, a dla mebla - wymiary i materiał. Zamiast budować osobne systemy, przygotuj wspólne podstawy i warianty komponentów dla kategorii, np. inny kolor akcentu albo inny zestaw ikon. Przy produktach w wielu kolorach przydaje się szablon, w którym podmieniasz tylko zdjęcie wariantu, a układ, opisy i plakietki zostają bez zmian. Dzięki temu cała rodzina produktów wygląda spójnie w wynikach wyszukiwania, a klient od razu rozpoznaje ofertę Twojego sklepu.
Poniżej przykładowy podział komponentów, które najczęściej trafiają do systemu szablonów sklepu:
[#chart:pgr83b]
Jak zbudować system grafik do setek ofert krok po kroku
Najczęstszy błąd to zaczynanie od rysowania gotowych miniatur. System buduje się od dołu: najpierw podstawy, potem komponenty, na końcu szablony. Kolejność pracy wygląda tak:
Zbierz wymagania kanałów: wymiary, proporcje, zasady tła i tekstu dla każdej platformy, na której sprzedajesz.
Zapisz style i zmienne: kolory, fonty, rozmiary tekstu, odstępy i zaokrąglenia.
Zaprojektuj komponenty podstawowe i ich warianty, korzystając z auto layoutu.
Złóż ramki-szablony dla każdego typu grafiki i kanału.
Przetestuj system na 10-20 różnych produktach, także tych o nietypowych kształtach i długich nazwach.
Popraw komponenty, które się nie sprawdziły, i dopiero wtedy przygotuj grafiki dla całego katalogu.
Opisz zasady użycia na osobnej stronie pliku: co wolno zmieniać, a czego nie.
[#tip] Nie odłączaj kopii komponentów od komponentu głównego, żeby szybko coś poprawić. Odłączona kopia przestaje się aktualizować, a po kilku miesiącach w pliku są dziesiątki grafik, które nie reagują na zmiany. Jeśli potrzebujesz innej wersji, dodaj nowy wariant do komponentu.
Biblioteki i praca zespołowa
Gdy system rośnie, komponenty warto przenieść do osobnego pliku i opublikować jako bibliotekę, z której korzystają pliki z grafikami ofert. Według centrum pomocy Figma publikowanie bibliotek jest dostępne w planach płatnych, m.in. Professional, Organization i Enterprise. W darmowym planie Starter komponenty i style utworzysz, ale nie opublikujesz ich jako biblioteki dla innych plików (stan na lipiec 2026 - sprawdź aktualną pomoc Figma). Przy małym sklepie wystarczy jeden plik z komponentami i grafikami na osobnych stronach. Gdy jednak grafiki przygotowuje kilka osób albo kilka marek w jednej firmie, osobna biblioteka szybko się zwraca w postaci mniejszej liczby pomyłek.
Biblioteka ma jeszcze jedną zaletę: zmiany w komponentach publikuje się świadomie, a pliki, które z niej korzystają, dostają informację o aktualizacji. Dzięki temu grafik może przygotować nową wersję plakietki promocyjnej i wdrożyć ją we wszystkich grafikach w jednym momencie, np. na start wyprzedaży.
Eksport szablonów miniatur z Figma
Według dokumentacji Figma statyczne pliki eksportuje się w formatach PNG, JPG, SVG i PDF, z wybraną skalą. Jeśli sklep potrzebuje plików WebP, konwersję trzeba zrobić innym narzędziem albo zostawić ją platformie sklepowej. Przy setkach grafik ważne jest, żeby ramki miały czytelne nazwy, np. SKU produktu i typ grafiki. Wtedy eksportowane pliki dostają uporządkowane nazwy, a połączenie grafiki z produktem przy imporcie nie wymaga ręcznego szukania.
System szablonów oszczędza czas wtedy, gdy jedna seria grafik obejmuje wiele produktów. Prosty sposób, by to policzyć:
[#chart:pgr83c]
Do wypełniania szablonów danymi z arkusza, np. nazwami produktów czy cechami, można użyć wtyczek z Figma Community. Ich możliwości i licencje różnią się, dlatego przed wdrożeniem sprawdź, czy wtyczka jest aktualizowana, kto ją udostępnia i jakie dane przetwarza.
Przy eksporcie zwróć też uwagę na skalę. Ramkę zaprojektowaną w mniejszym wymiarze można wyeksportować w skali 2x lub większej, ale zdjęcie produktu w środku musi mieć wystarczającą rozdzielczość - Figma nie doda szczegółów, których nie ma w oryginalnym pliku. Bezpieczniej projektować ramki od razu w docelowym wymiarze i wgrywać do nich zdjęcia w pełnej jakości.
Jak utrzymać system szablonów przy rosnącym katalogu
System grafik nie jest projektem, który kończy się w dniu oddania. Katalog rośnie, platformy zmieniają zasady, a marka odświeża kolory czy hasła. Żeby system nie rozjechał się po kilku miesiącach, warto ustalić, kto jest jego właścicielem. Jedna osoba - grafik w zespole albo zewnętrzny partner - odpowiada za zmiany w komponentach i publikację nowych wersji, a pozostali korzystają z szablonów bez przerabiania elementów podstawowych.
Dobrym nawykiem jest też krótki przegląd systemu co kwartał i przed dużymi kampaniami, np. przed sezonem wyprzedaży. Sprawdź wtedy, czy wszystkie kanały mają aktualne szablony, czy w pliku nie pojawiły się odłączone kopie komponentów i czy plakietki promocyjne odpowiadają bieżącej komunikacji. Zmiany wprowadzaj w komponentach głównych, a nie w pojedynczych grafikach - tylko wtedy setki ofert zaktualizują się jednocześnie. Po każdej większej zmianie wyeksportuj kilka grafik testowych i obejrzyj je na telefonie, bo tam klienci najczęściej oglądają miniatury ofert i tam najszybciej widać zbyt drobny tekst.
Najczęstsze błędy w systemach szablonów miniatur
Systemy szablonów psują się zwykle nie od razu, ale po kilku miesiącach używania. Najczęściej spotykane problemy to kolory wpisane ręcznie zamiast ze zmiennych, kopie odłączone od komponentów, zbyt długie teksty, które nie mieszczą się w plakietkach, i brak testu na telefonie. Przed publikacją każdej partii warto przejść przez krótką listę kontrolną błędów w grafikach ofertowych.
Drugi częsty problem to typografia. Tekst, który dobrze wygląda w dużym podglądzie, na miniaturze w wynikach wyszukiwania staje się nieczytelny. Fonty do systemu wybieraj z myślą o małych rozmiarach i sprawdź warunki licencji - więcej o tym w tekście o typografii marki w e-commerce.
Jak Vinson pomaga zbudować szablony miniatur w Figma
Projektujemy systemy grafik dla sklepów: style, komponenty z wariantami, szablony miniatur, infografik i grafik reklamowych dopasowane do zasad każdego kanału. Przekazujemy uporządkowany plik z instrukcją, żeby zespół sklepu mógł samodzielnie przygotowywać kolejne oferty, albo prowadzimy produkcję grafik u siebie. Szczegóły znajdziesz na stronie projektowanie graficzne dla e-commerce.
Vinson to agencja e-commerce z Bochni, działająca od 2021 roku. Jesteśmy Allegro Ads Partner+, Google Partner, Meta Business Partner, certyfikowanym partnerem Base, partnerem Empik Place i autoryzowanym partnerem Shoper. Klienci oceniają nas na 4,9/5 ze 171 opinii, a współpracowaliśmy z ponad 500 firmami.
Najczęściej zadawane pytania
Jak zrobić szablon miniatury w Figma?
Zacznij od stylów kolorów i fontów, potem zaprojektuj komponenty, takie jak plakietki i ikony, i złóż z nich ramkę w docelowym wymiarze. Każda nowa miniatura to kopia ramki, w której podmieniasz zdjęcie i tekst, a wygląd elementów zmieniasz w komponentach głównych.
Czy w darmowej Figma można tworzyć szablony ofert?
Tak, komponenty, warianty i style utworzysz także w darmowym planie Starter. Ograniczeniem jest publikowanie bibliotek współdzielonych między plikami, które według pomocy Figma wymaga planu płatnego (stan na lipiec 2026 - sprawdź aktualną pomoc Figma).
Czy na miniaturze oferty można umieścić tekst i plakietki?
To zależy od platformy. Na wielu marketplace'ach zdjęcie główne musi pokazywać sam produkt, np. na Amazon na czysto białym tle, a Google Merchant Center nie przyjmuje nakładek promocyjnych. Plakietki i teksty umieszczaj na dalszych zdjęciach galerii, we własnym sklepie i w reklamach.
W jakich formatach Figma eksportuje grafiki?
Według dokumentacji Figma pliki statyczne eksportuje się jako PNG, JPG, SVG i PDF. Jeśli potrzebujesz WebP do sklepu, przekonwertuj pliki osobnym narzędziem albo sprawdź, czy platforma sklepowa robi to automatycznie przy wgrywaniu.
Ile czasu zajmuje zbudowanie systemu szablonów w Figma?
Zależy od liczby kanałów, typów grafik i komponentów. Prosty system dla jednego kanału powstaje szybciej niż biblioteka dla sklepu z wieloma kategoriami i kampaniami. Najwięcej czasu warto przeznaczyć na testy na nietypowych produktach, bo to one ujawniają słabe miejsca szablonów.
Dobrze zbudowane szablony miniatur w Figma to spójne oferty, szybsze wystawianie nowych produktów i łatwe zmiany w całym katalogu. Jeśli chcesz dostać gotowy system grafik dla swojego sklepu, zajrzyj na stronę projektowania graficznego dla e-commerce.
Aleksandra Marecka
Head of Digital Marketing
Projektuje i skaluje strategie marketingowe e-commerce: social media, e-mail, content. Optymalizuje działania pod zwrot z inwestycji.
Projektuje i skaluje strategie marketingowe e-commerce: social media, e-mail, content. Optymalizuje działania pod zwrot z inwestycji.
Projektowanie graficzne dla e-commerce
Aleksandra i nasz zespół pomogą Ci wdrożyć to na Twoim koncie - bez zobowiązań.
- Analiza Twojego konta i obecnych działań
- Konkretny plan poprawek do wdrożenia
- Bezpłatna konsultacja – bez zobowiązań
Przeczytaj także
Więcej porad z naszej bazy wiedzy - przesuń, aby zobaczyć kolejne artykuły.
Masz pytania? Chętnie porozmawiamy!
Masz pytania? Chętnie porozmawiamy!
Odpowiadamy w ciągu 24 godzin w dni robocze. Pierwsza rozmowa jest bezpłatna i do niczego nie zobowiązuje.
Masz pytania? Chętnie porozmawiamy!
Odpowiadamy w ciągu 24 godzin w dni robocze. Pierwsza rozmowa jest bezpłatna i do niczego nie zobowiązuje.
Bartłomiej Stokłosa
CEO & Founder
"Jeżeli czegoś nie da się zrobić, potrzebny jest ktoś, kto o tym nie wie - przyjdzie i to zrobi."
Bartłomiej Stokłosa
CEO & Founder
"Jeżeli czegoś nie da się zrobić, potrzebny jest ktoś, kto o tym nie wie - przyjdzie i to zrobi."
Wybierz dogodny termin w kalendarzu - bez wymiany maili w tę i z powrotem.
Napisz do nas
Opisz krótko, czego potrzebujesz - oddzwonimy lub odpiszemy w ciągu 24 godzin w dni robocze.
Na zapytanie odpowie Aleksandra Marecka, Head of Digital MarketingNapisz do nas
Opisz krótko, czego potrzebujesz - oddzwonimy lub odpiszemy w ciągu 24 godzin w dni robocze.
Na zapytanie odpowie Aleksandra Marecka, Head of Digital Marketing