Tworzenie pierwszej ramki e-maila Emailify w Figmie

Każdy projekt e-maila w Emailify zaczyna się od specjalnej, pustej ramki e-maila w Figmie, którą wypełnisz układami i treścią Emailify.

Gdy po raz pierwszy uruchomisz wtyczkę Emailify na stronie w Figmie, która nie zawiera jeszcze żadnych ramek-kontenerów Emailify, wtyczka automatycznie otworzy okno New Email, w którym wybierzesz, jak chcesz zacząć.

Okno New Email otwiera się na karcie Blank, a po niej są karty Templates, Layouts i AI Designer. W lokalnie włączonych wersjach deweloperskich na końcu widać też eksperymentalną kartę Import.

Na karcie Blank nadaj e-mailowi nazwę (na przykład „My Email Template”), a następnie kliknij przycisk Add New Emailify Container, aby dodać pustą ramkę e-maila do strony w Figmie.

Wtyczka Emailify automatycznie rozpozna tę nową, specjalną ramkę jako e-mail i pozwoli Ci dodawać do niej układy oraz komponenty za pomocą swoich funkcji projektowych.

Jeśli dopiero poznajesz wtyczkę lub szukasz inspiracji, w oknie New Email możesz skorzystać z Layouts, wypróbować podkategorię Randomize, zduplikować Figma Templates albo użyć AI Designer (BETA).

Dodawanie kolejnych kontenerów Emailify ​

Dodaj tyle ramek-kontenerów Emailify, ile potrzebujesz. Wtyczka traktuje każdy kontener jako osobny e-mail.

Jeśli masz już na stronie ramkę Emailify, w każdej chwili możesz dodać nową, pustą ramkę, klikając przycisk z ikoną + (plus) obok wyboru e-maila we wtyczce Emailify. Wtyczka poprosi Cię o nazwę i utworzy nową, pustą ramkę e-maila w Figmie.

Jeśli nie chcesz zaczynać od zera, możesz też skopiować i wkleić istniejącą ramkę Emailify. Kopiowanie i wklejanie komponentów z jednej ramki Emailify do drugiej również działa.

Wybieranie ramki Emailify ​

Aby wybrać e-mail i zacząć dodawać komponenty, użyj listy rozwijanej z wyborem e-maila we wtyczce Emailify albo kliknij ramkę nadrzędną na płótnie Figmy.

Wybranie e-maila z listy automatycznie przenosi też widok strony w Figmie na wybrany e-mail.

Sprawdzanie, która ramka e-maila jest aktywna. Nazwa e-maila wyświetlana jako wybrana na liście rozwijanej we wtyczce Emailify zawsze wskazuje aktualnie wybrany e-mail.

Breakpoint mobilny e-maili ​

E-maile HTML eksportowane z Emailify mają jeden „breakpoint”, który jest automatycznie ustawiany na podstawie szerokości ramki desktopowej w Figmie. Jeśli na przykład ramka Emailify ma 600px, style i nadpisania mobilne zaczną działać od 599px w dół.

Zwykle zaleca się szerokość e-maila od 600px do 640px, ponieważ panele odczytu niektórych klientów lub aplikacji pocztowych mogą mieć mniej niż 700px szerokości. Węższy panel odczytu może wyrenderować style mobilne zamiast układu desktopowego. Szerokość ramki Emailify od 600px do 640px pomaga spójnie wyświetlać układ desktopowy w klientach poczty na komputerach i tabletach.