영상 튜토리얼: HTML 이메일 내보내기용 사용자 지정 컴포넌트 만들기

Emailify 플러그인으로 이메일 디자인에 사용자 지정 컴포넌트를 추가하고, Figma에서 바로 쓸 수 있는 반응형 HTML 이메일을 내보내는 방법을 보여 주는 영상이에요.

Emailify에 기본으로 포함된 컴포넌트 중에 원하는 것이 없다면, 기본 제공 컴포넌트 빌더 기능으로 나만의 사용자 지정 컴포넌트를 만들 수 있어요.

컴포넌트 카테고리 헤더에서 Custom 탭을 클릭한 다음 Build New Custom Component + 버튼을 클릭하면 컴포넌트 빌더가 열려요. 여기서 컴포넌트 레이아웃과 콘텐츠 요소를 원하는 대로 구성할 수 있어요.

구조가 마음에 들면 Create & Insert New Component 버튼을 클릭하세요. Figma의 이메일 디자인에 컴포넌트가 추가되고, 나중에 쓸 수 있도록 Custom 카테고리에도 저장돼요.

저장한 사용자 지정 컴포넌트 편집 및 포크

컴포넌트 카테고리의 Custom 탭에 있는 컴포넌트 옆의 Settings 아이콘 버튼을 클릭하면 저장한 사용자 지정 컴포넌트를 편집할 수 있어요.

Update Saved Component 버튼을 클릭해 수정한 컴포넌트를 원래 컴포넌트에 다시 저장할 수 있어요. 저장된 컴포넌트는 업데이트되지만, 디자인에서 이미 사용한 곳의 컴포넌트에는 영향을 주거나 수정하지 않아요.

또는 Create & Insert New Component 버튼을 클릭해 원래 컴포넌트를 포크하고 완전히 새로운 사용자 지정 컴포넌트로 “다른 이름으로 저장”할 수도 있어요. 원래 저장된 컴포넌트를 덮어쓰지 않고 목록에 완전히 새로운 사용자 지정 컴포넌트로 저장돼요.

저장한 사용자 지정 컴포넌트 삭제

Trash 아이콘 버튼을 클릭해 저장한 사용자 지정 컴포넌트를 삭제할 수도 있어요. 저장된 컴포넌트가 Custom 및 Favourites 카테고리에서 삭제되지만, 디자인에서 이미 사용한 곳의 컴포넌트는 삭제되거나 수정되지 않아요.