--- url: "/pl/emailify/design/fundamentals.md" description: "Zanim zaczniesz projektować i eksportować e-maile HTML w Emailify, koniecznie poznaj kilka podstawowych zasad działania wtyczki." --- # Jak działa wtyczka Emailify > Zanim zaczniesz projektować i eksportować e-maile HTML w Emailify, koniecznie poznaj kilka podstawowych zasad działania wtyczki. > **Warning:** Emailify **nie obsługuje** projektów e-maili w Figmie, które powstały poza wtyczką. ## Emailify w skrócie {#emailify-overview} Emailify pomaga projektować e-maile w Figmie. Daje Ci zestaw typowych komponentów startowych, których treść, style i wygląd marki dostosujesz zwykłymi narzędziami projektowymi Figmy. Potem możesz zastosować style responsywne i wyeksportować e-maile do HTML gotowego do produkcji. ### Emailify _robi_ to: {#emailify-does} - Daje Ci komponenty startowe i narzędzia projektowe do tworzenia układów e-maili. - Pozwala dostosować w Figmie dowolne teksty, obrazy, style wizualne i linki. - Eksportuje Twoje e-maile (zaprojektowane we wtyczce Emailify) do HTML gotowego do produkcji. - Integruje się z platformami e-mail marketingu, aby przesyłać szablony HTML przez API. ### Emailify _nie_ robi tego: {#emailify-does-not} - Nie konwertuje automatycznie projektów e-maili, które zostały ręcznie zaprojektowane w Figmie bez użycia wtyczki Emailify (jeśli masz taki projekt, musisz go odtworzyć narzędziami projektowymi Emailify, aby wyeksportować go do HTML). - Nie oferuje specjalnych obejść dla braku obsługi niektórych właściwości HTML/CSS, które działają tylko w wybranych klientach poczty (na przykład [nadpisywania stylów trybu ciemnego](https://www.caniemail.com/search/?s=dark%20mode) w Gmailu lub Outlooku albo [wyświetlania niestandardowych fontów](https://www.caniemail.com/features/css-at-font-face/) w klientach innych niż Apple Mail). ## Czym Emailify różni się od innych wtyczek do e-maili w Figmie? {#how-is-emailify-different-from-other-email-figma-plugins} W przeciwieństwie do innych wtyczek do Figmy, które pomagają eksportować e-maile z Figmy do HTML, Emailify _nie_ próbuje automatycznie wziąć dowolnego pliku zaprojektowanego ręcznie w Figmie i _magicznie_ zamienić go w kod HTML, który możesz wysłać e-mailem. ### Problem z innymi wtyczkami do Figmy typu „projekt e-maila do HTML” {#the-problem-with-other-email-design-to-html-figma-plugins} Podstawowy problem z konwersją _dowolnego_ ręcznie zaprojektowanego pliku Figmy z makietą e-maila do HTML polega na tym, że **nie ma w nim pojęcia _intencji_**. Najprostszy przykład: wyobraź sobie, czym według projektanta ma być warstwa „Frame” w Figmie, w której znajdują się warstwa „Rectangle” i warstwa „Text”: - klikalnym przyciskiem? - pojedynczym statycznym obrazem (z osadzonym w nim tekstem)? - blokiem hero z obrazem tła i tekstem sformatowanym na wierzchu? - linkiem z ikoną społecznościową? Nawet gdyby wtyczka do Figmy potrafiła poprawnie odgadnąć intencję tych 3 warstw, nadal nie wiedziałaby, jak ten element ma wyglądać na urządzeniach mobilnych, czy po kliknięciu ma prowadzić pod jakiś adres ani czy ma inne atrybuty (na przykład tekst `alt`). Powyższy przykład jest już wystarczająco trudny, a to i tak łagodne ujęcie – chodzi tylko o zrozumienie intencji 3 warstw Figmy. Dalej złożoność tylko rośnie. _Prawdziwy_ projekt makiety e-maila w Figmie może zawierać tysiące warstw, często zagnieżdżonych w dziesiątkach (albo setkach) innych warstw typu „frame” lub „group”, które również nie mówią nic o tym, jak mają zostać wyrenderowane jako HTML. Dlatego uzyskanie potrzebnego HTML z takich danych wejściowych (setek nieustrukturyzowanych prostokątów, ramek, grup i warstw tekstowych utworzonych w Figmie) szybko staje się niemal niemożliwe. E-maile HTML już same w sobie _bardzo_ trudno wyrenderować spójnie we wszystkich klientach poczty. Dlatego uważamy, że _odgadywanie_ intencji projektanta z nieskończonej liczby możliwych struktur warstw w Figmie – gdy każdy projektant pracuje inaczej – jest zdecydowanie zbyt ryzykowne. ### Jak Emailify rozwiązuje problem „intencji” {#how-emailify-solves-the-intent-problem} **Aby rozwiązać problem intencji**, Emailify stosuje bardziej określone podejście do projektowania e-maili, które prowadzi Cię „po szynach”. Pomaga tworzyć w Figmie specjalne warstwy, które podczas eksportu kodu odpowiadają bezpośrednio _prawdziwym_ elementom HTML. Dzięki temu wtyczka dokładnie wie, czym ma być każdy element e-maila (na przykład „Button” _jest_ przyciskiem, „Column” _jest_ kolumną itd.). Na przykład dodanie warstwy _Button_ do projektu e-maila w Figmie za pomocą wtyczki Emailify tworzy zupełnie nową warstwę ze specjalnymi danymi, które mówią Emailify, że to _jest_ przycisk, a nie tylko prostokąt, który może (lub nie) mieć być „przyciskiem”. Te narzędzia projektowe pomagają szybko tworzyć układy i elementy treści, które Emailify rozumie i które potem może za Ciebie niezawodnie wyeksportować do HTML. ## Jakie projekty możesz tworzyć w Emailify i Figmie? {#what-kind-of-designs-can-you-create-with-emailify-and-figma} [Video](/assets/videos/emailify/design/template-examples.mp4) Emailify daje Ci szereg narzędzi do tworzenia układów, których treść i style możesz dostosować w Figmie i dla których możesz też określić zachowanie responsywne. Łącząc narzędzia wtyczki z Figmą do stylizacji i treści, stworzysz projekt e-maila w pełni dopasowany do Twojej marki. Jeśli szukasz inspiracji, zajrzyj do tych [bezpłatnych szablonów Figmy zgodnych z Emailify](https://www.figma.com/@adambrock) (zaprojektowanych w całości w Emailify w Figmie) i zobacz, jak dopasować e-maile do własnej marki. W opisie strony każdego szablonu Figmy znajdziesz też link do pełnego poradnika wideo krok po kroku, który pokazuje, jak powstał. Możesz też przejrzeć [całą playlistę w YouTube](https://www.youtube.com/watch?v=_84LY0fL0Ag&list=PLUGeoZ1yrQAr2_hHBW7WXmXkExRQB1nXZ&index=2) z filmami do każdego szablonu Figmy. ## Struktura warstw Figmy w projektach Emailify {#understanding-the-figma-layer-structure-in-emailify-designs} Gdy tworzysz układy e-maili w Emailify za pomocą narzędzi projektowych – [komponentów startowych](/pl/emailify/design/presets) i **Quick Add Element** (listy rozwijanej na dole wtyczki) – wtyczka automatycznie tworzy za Ciebie wymaganą strukturę warstw. **Bardzo ważne jest zachowanie tej podstawowej struktury warstw.** Nie zagnieżdżaj wygenerowanych warstw w innych ramkach ani grupach dodanych ręcznie w Figmie. W przeciwnym razie wtyczka się pogubi i potraktuje te bloki jako obce warstwy (renderowane jako statyczne obrazy zamiast treści HTML z tekstem sformatowanym). ### Przykładowa struktura warstw Emailify {#example-emailify-layer-structure} Na zrzucie ekranu poniżej widzisz zestaw warstw Figmy, które wtyczka Emailify utworzyła automatycznie. Struktura warstw jest bardzo spójna: nadrzędna ramka e-maila dodana przez Emailify może zawierać bezpośrednio jedną lub więcej warstw „Row”. Każda z nich może zawierać jedną lub więcej warstw „Column”, a każda warstwa „Column” – jedną lub więcej warstw „Content” (na przykład tekst, obrazy, przyciski itd.). ![Podstawowy przykład struktury warstw Emailify](/assets/images/emailify/example-layer-structure.jpg) #### Podstawowy przykład struktury warstw Emailify {#basic-example-of-emailify-layer-structure} - ✉️ Email - 🦸 Hero - ✍️ Text - ✍️ Text - 🔗 Button - ✍️ Button Text - 🚣 Row - 🏛️ Column - 📷 Image - 🏛️ Column - ✍️ Text - ✍️ Text - 🚣 Row - 🏛️ Column - 📷 Image - 🏛️ Column - 🪑 Data Table - 🪑🚣 Data Table Row - 🪑🏛️ Data Table Cell (Content) - 📷 Vector Icon - 🪑🏛️ Data Table Cell (Content) - ✍️ Text - 🪑🚣 Data Table Row - 🪑🏛️ Data Table Cell (Content) - 📷 Vector Icon - 🪑🏛️ Data Table Cell (Content) - ✍️ Text - 🚣 Row - 🏛️ Column - 📷 Image - ✍️ Text - 🐦 Social - 🔗 Social Icon Link - 📷 SVG Vector Icon - 🔗 Social Icon Link - 📷 SVG Vector Icon - 🔗 Social Icon Link - 📷 SVG Vector Icon - 🔗 Social Icon Link - 📷 SVG Vector Icon - 🍔 Navigation - 🔗 Nav Link - ✍️ Nav Link Text - 🔗 Nav Link - ✍️ Nav Link Text - 🚣 Row - 🏛️ Column - 🪑 Data Table - 🪑🚣 Data Table Row - 🪑🏛️ Data Table Cell (Content) - ✍️ Text - 🪑🏛️ Data Table Cell (Content) - ✍️ Text - 🪑🚣 Data Table Row - 🪑🏛️ Data Table Cell (Content) - ✍️ Text - 🪑🏛️ Data Table Cell (Content) - ✍️ Text - 🎁 Wrapper (For Multiple Rows) - 🚣 Row - 🏛️ Column - 📷 Image - 🏛️ Column - ✍️ Text - 🚣 Row - 🏛️ Column - 📷 Image - 🏛️ Column - ✍️ Text ### Typy warstw Emailify, których możesz używać {#emailify-layer-types-you-can-use} Więcej o każdym typie warstwy przeczytasz w dokumentacji Emailify, w opisach poszczególnych [elementów układu](/pl/emailify/elements/email) i [elementów projektu](/pl/emailify/elements/text). Jeszcze raz: zachowanie tej struktury jest bardzo ważne, ponieważ przestawienie warstw w złej kolejności sprawi, że HTML nie wyrenderuje się zgodnie z oczekiwaniami (na przykład nie możesz umieścić „Row” w innym „Row”, umieścić warstwy „Text” bezpośrednio w ramce „Email” ani umieścić „Row” w „Column” itd.). Najprostszy sposób, aby mieć pewność, że dodajesz poprawną strukturę, to dodawanie komponentów startowych z wtyczki Emailify i dostosowywanie treści oraz stylów bez zasadniczych zmian w strukturze warstw układu. ### Dostosowywanie warstw w Figmie {#customizing-your-layers-in-figma} ### Poradnik wideo: projektowanie i eksport e-maili z Figmy do HTML Ten film pokazuje, jak zaprojektować w Figmie responsywny e-mail HTML gotowy do produkcji i wyeksportować go za pomocą wtyczki Emailify. [Embedded media](https://www.youtube-nocookie.com/embed/OWv4WX3eqvU) Gdy dodasz do e-maila dowolny komponent Emailify, zostanie on wyrenderowany na płótnie Figmy, gdzie możesz pracować z jego warstwami jak zwykle (tak jakbyś dodał je ręcznie). Oznacza to na przykład, że w warstwie tekstowej możesz zmienić treść, rozmiar fontu, interlinię, odstępy między literami, odstępy między akapitami i wyrównanie w poziomie w zwykłym panelu ustawień Figmy. Emailify celowo renderuje bardzo proste elementy, aby obrazy, teksty i wartości układu można było dopasować do własnej marki i przewodnika po stylu. > **Tip:** **Ponowne użycie komponentów jako instancji Figmy.** Po dostosowaniu komponentu możesz użyć go wielokrotnie jako instancji Figmy, także w innych projektach e-maili w przyszłości. > **Note:** **Komponenty treści Emailify korzystają z Auto Layout w Figmie.** Komponenty dołączone do Emailify używają Auto Layout, dzięki czemu bardzo łatwo zmienisz wartości układu, takie jak wypełnienie (padding) czy odstępy między kolumnami lub elementami. ## Kolejne kroki {#next-steps} - Zbuduj swój pierwszy e-mail według [przewodnika „Zacznij tutaj” dla Emailify](/pl/emailify/overview/quickstart). - Dowiedz się, jak [wyrównywać treść w układach Emailify](/pl/emailify/design/alignment), a następnie dodaj [responsywne style e-maila](/pl/emailify/design/responsive). - Poznaj [wtyczkę Emailify do Figmy](https://www.hypermatic.com/emailify/), która eksportuje HTML gotowy do produkcji i integruje się z platformami e-mailowymi.