레이아웃 레이어에 패딩 추가하기

레이아웃 레이어의 높이를 정하고 위아래 간격을 지정하려면 Figma에서 Auto Layout의 Vertical Padding 속성을 조정하세요.

레이아웃 레이어 안쪽 콘텐츠의 너비를 정하고 왼쪽이나 오른쪽 간격을 지정하려면 Figma에서 Auto Layout의 Horizontal Padding 속성을 조정하세요.

Row나 Column 레이어의 높이는 항상 Padding으로 설정하세요(레이어의 Auto Layout 높이 속성은 Hug로 설정). Figma에서 Fixed 높이를 설정해도 최종 HTML에는 반영되지 않아요. HTML에서 요소의 높이는 콘텐츠 크기(와 위아래 패딩)에 따라 정해지기 때문이에요. 그래서 HTML로 내보낼 이메일을 시각적으로 디자인할 때는 Padding을 쓰는 것이 가장 확실한 방법이에요.

여러 Row 레이어 주위에 바깥 패딩 추가하기

여러 행 주위에 패딩을 넣고 싶다면 특별한 Wrapper 레이아웃 레이어를 이메일에 추가하세요. Emailify 프레임을 클릭하고 Quick Add 드롭다운 메뉴에서 Row Wrapper를 고른 다음, Add + 버튼을 클릭하면 새 Figma 레이어로 이메일에 들어가요.

디자인에 Wrapper를 추가한 뒤에는 Row를 새 Wrapper 레이어 안으로 옮기고, Figma에서 Auto Layout의 Horizontal Padding과 Vertical Padding 속성을 조정해 Wrapper 안의 Row 레이어 주위에 바깥 패딩을 만들 수 있어요.

텍스트 레이어에 안쪽 패딩 추가하기

원하면 텍스트에 안쪽 패딩을 추가할 수 있어요. Settings 패널이 열린 상태에서 이메일의 Figma 텍스트 레이어를 선택하고 Inner Padding 토글을 켠 다음, 선택한 텍스트 레이어에 적용할 패딩 값을 입력하세요.

그러면 HTML로 렌더링할 때 텍스트 레이어 안에 “안쪽” 패딩이 추가돼요. Column의 다른 레이어에 영향을 주지 않고 특정 텍스트 레이어에만 패딩 값을 지정할 수 있어요.

Mobile Padding 토글을 켜고 선택한 텍스트 레이어에 적용할 패딩 값을 입력하면 모바일에서 텍스트 레이어 패딩을 재정의할 수도 있어요. 이 값은 모바일에서 HTML 이메일을 볼 때만 적용돼요.

구분선 레이어에 안쪽 패딩 추가하기

원하면 구분선에 안쪽 패딩을 추가할 수 있어요. Settings 패널이 열린 상태에서 이메일의 Emailify 구분선 레이어를 선택하고 Inner Padding 토글을 켠 다음, 선택한 구분선 레이어에 적용할 패딩 값을 입력하세요.

그러면 HTML로 렌더링할 때 구분선 레이어 안에 “안쪽” 패딩이 추가돼요. Column의 다른 레이어에 영향을 주지 않고 특정 레이어에만 패딩 값을 지정할 수 있어요.

Mobile Padding 토글을 켜고 선택한 구분선 레이어에 적용할 패딩 값을 입력하면 모바일에서 Emailify 구분선 레이어 패딩을 재정의할 수도 있어요. 이 값은 모바일에서 HTML 이메일을 볼 때만 적용돼요.