레이어의 기본 Auto Layout 항목 간격 바꾸기

Row, Column 또는 다른 Emailify 레이아웃 레이어(Wrapper, Hero, Social 아이콘 컨테이너 등)의 Item Spacing 속성을 조정하면 해당 레이어 안의 하위 요소 사이 기본 간격을 정할 수 있어요.

예를 들어 Column 레이어의 항목 간격 값을 16으로 설정하면, 해당 Column 레이어 안의 모든 요소(예: 텍스트, 이미지, 버튼 등) 사이에 같은 간격(16픽셀)이 고르게 들어가요.

열에 사용자 지정 세로 스페이서 요소 추가하기

기본 항목 간격을 이미 설정했지만 Column 안의 특정 레이어 사이에 세로 간격이 조금 더 필요하다면, 특별한 Emailify 스페이서 요소를 추가할 수 있어요. “Column” 레이어를 클릭하고 플러그인 하단의 Quick Add 드롭다운 메뉴에서 “Spacer” 항목을 고른 다음, Add + 버튼을 클릭해 Column에 스페이서 레이어를 넣으세요.

Column에 스페이서 레이어를 추가한 뒤에는 레이어 패널에서 드래그 앤 드롭으로 어느 레이어 사이에 둘지 순서를 바꿀 수 있고, Figma 레이어 속성 패널에서 레이어의 Height를 조정해 크기를 바꿀 수 있어요.

사용자 지정 스페이서 요소 주변에도 상위 요소의 기본 Item Spacing이 적용되니, 스페이서의 Height 값을 정할 때 이 점을 고려하세요.

열 레이어 사이에 자동 세로 항목 간격 추가하기

Column의 위쪽에 레이어 하나를, 아래쪽에 다른 레이어를 두려면 Column의 세로 Auto Layout 크기 조정을 Fill container로 설정하세요. 그런 다음 Item spacing을 Auto로 설정하세요. 콘텐츠 길이가 바뀌면 Figma가 남는 공간을 레이어 사이에 나눠 배치해요.

모바일용 항목 간격 값 재정의하기. 이 방법으로 데스크톱 디자인에 위아래로 나뉜 세로 레이아웃을 만든다면, 모바일용 Item Spacing 재정의 값도 추가하는 것이 좋아요. 위 단계를 적용한 같은 “Column” 레이어를 클릭하고 Settings 버튼을 클릭한 다음, Mobile Item Spacing 토글을 켜고 원하는 숫자 값(픽셀 단위)을 입력하세요. 그러면 데스크톱의 “auto” 간격 크기와 상관없이 모바일에서는 항목 간격이 고정된 일정한 크기가 돼요.

텍스트 레이어 단락 사이에 사용자 지정 세로 여백 추가하기

Figma 텍스트 속성 패널을 열고 Basics 탭에서 Paragraph spacing 값을 조정하면 Figma 텍스트 레이어의 단락 사이 세로 간격을 바꿀 수 있어요. 이 값은 HTML 이메일을 생성할 때 해당 텍스트 레이어 콘텐츠 안의 <p> 태그에 추가할 margin-bottom 크기를 정해요.

참고로 단락 줄을 추가로 넣었다면(예: Enter나 Return을 두 번 눌러 두 줄 띄우기), 빈 추가 단락도 그대로 포함되고, 그 아래에도 사용자 지정 단락 간격이 margin-bottom으로 추가돼요. 위 영상처럼 이런 추가 단락이나 빈 단락을 지우면 텍스트의 단락 간격을 더 세밀하게 조절할 수 있어요.

Settings를 연 다음 Figma에서 같은 유형의 Emailify 레이어를 여러 개 선택하면 설정을 일괄 적용할 수 있어요. 변경한 설정은 선택한 모든 레이어에 적용돼요.