첫 Emailify 이메일 Figma 프레임 만들기

Emailify의 모든 이메일 디자인은 특별한 빈 이메일 Figma 프레임에서 시작해요. 이 프레임을 Emailify 레이아웃과 콘텐츠로 채우면 돼요.

Emailify 컨테이너 프레임이 하나도 없는 Figma 페이지에서 Emailify 플러그인을 처음 실행하면, 시작 방법을 고를 수 있도록 플러그인이 New Email 창을 자동으로 열어요.

New Email 창은 Blank 탭에서 열리고, 그 뒤로 Templates, Layouts, AI Designer 탭이 있어요. 로컬에서 활성화한 개발 빌드에서는 맨 끝에 실험 기능인 Import 탭도 표시돼요.

Blank 탭에서 이메일 이름(예: “My Email Template”)을 입력한 다음 Add New Emailify Container 버튼을 클릭하면 Figma 페이지에 빈 이메일 프레임이 추가돼요.

플러그인이 만든 이 특별한 Figma 프레임은 Emailify Figma 플러그인이 이메일로 자동 인식하고, 플러그인의 디자인 기능으로 레이아웃과 컴포넌트를 추가할 수 있게 돼요.

플러그인을 처음 쓰거나 아이디어가 필요하다면 New Email 창에서 Layouts를 쓰거나, Randomize 하위 카테고리를 써 보거나, Figma 템플릿을 복제하거나, AI Designer(베타)를 사용해 보세요.

Emailify 컨테이너 추가하기 ​

Emailify 컨테이너 프레임은 필요한 만큼 추가할 수 있어요. 플러그인은 각 컨테이너를 별도의 이메일로 처리해요.

페이지에 이미 Emailify 프레임을 추가했다면, Emailify 플러그인의 이메일 선택기 옆에 있는 +(더하기) 아이콘 버튼을 클릭해 언제든 새 빈 Emailify 프레임을 추가할 수 있어요. 버튼을 클릭하면 이름을 입력하고 새 빈 이메일 Figma 프레임을 만들라는 안내가 표시돼요.

처음부터 시작하고 싶지 않다면 기존 Emailify 프레임을 복사해서 붙여 넣을 수도 있어요. 한 Emailify 프레임 안의 컴포넌트를 다른 프레임으로 복사해 붙여 넣는 것도 가능해요.

Emailify 프레임 선택하기 ​

이메일을 선택하고 컴포넌트를 추가하려면 Emailify 플러그인의 이메일 선택기 드롭다운을 쓰거나 Figma 캔버스에서 상위 프레임을 클릭하세요.

선택 상자에서 이메일 항목을 클릭하면 Figma 페이지의 화면도 선택한 이메일로 자동 이동해요.

활성화된 이메일 프레임 확인하기 Emailify 이메일 선택기 드롭다운에 선택된 것으로 표시된 이메일 이름이 항상 현재 선택된 이메일이에요.

이메일의 모바일 브레이크포인트 ​

Emailify에서 내보낸 HTML 이메일에는 Figma 데스크톱 프레임의 너비에 따라 자동으로 정해지는 “브레이크포인트”가 하나 있어요. 예를 들어 Emailify 프레임이 600px이면 599px 이하에서 모바일 스타일과 재정의가 표시되기 시작해요.

일부 이메일 클라이언트나 앱의 읽기 패널은 너비가 700px보다 좁을 수 있어서, 보통 이메일 너비를 600px~640px로 유지하는 것을 권장해요. 읽기 패널이 좁으면 데스크톱 레이아웃 대신 모바일 스타일이 렌더링될 수 있어요. Emailify 프레임 너비를 600px~640px로 유지하면 데스크톱과 태블릿 이메일 클라이언트에서 데스크톱 레이아웃이 일관되게 렌더링돼요.