Emailify nie obsługuje projektów e-maili w Figmie, które powstały poza wtyczką.

Emailify w skrócie

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:

• 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:

• 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 w Gmailu lub Outlooku albo wyświetlania niestandardowych fontów w klientach innych niż Apple Mail).

Czym Emailify różni się od innych wtyczek do e-maili w Figmie?

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”

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”

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?

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 (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 z filmami do każdego szablonu Figmy.

Struktura warstw Figmy w projektach Emailify

Gdy tworzysz układy e-maili w Emailify za pomocą narzędzi projektowych – komponentów startowych 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

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

• ✉️ 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ć

Więcej o każdym typie warstwy przeczytasz w dokumentacji Emailify, w opisach poszczególnych elementów układu i elementów projektu.

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

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.

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.

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.

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

• Zbuduj swój pierwszy e-mail według przewodnika „Zacznij tutaj” dla Emailify.
• Dowiedz się, jak wyrównywać treść w układach Emailify, a następnie dodaj responsywne style e-maila.
• Poznaj wtyczkę Emailify do Figmy, która eksportuje HTML gotowy do produkcji i integruje się z platformami e-mailowymi.