디자인에 Data Table 레이어 직접 추가

Data Table 레이어를 추가하려면 디자인에서 Column 레이어를 클릭하고, 플러그인 하단의 빠른 추가 메뉴에서 Data Table 옵션을 선택한 다음 Add를 클릭해 디자인에 레이어를 삽입하세요.

데이터 테이블 행이나 열 추가. 처음에 만들어진 테이블 행이나 테이블 데이터 셀 Figma 레이어를 복사해 붙여 넣으면 행이나 열을 빠르게 추가할 수 있어요.

기본적으로 Data Table은 데스크톱과 모바일에서 똑같이 렌더링돼요. 테이블 열을 두세 개 넘게 추가한다면 테이블 너비에 유의해 주세요.

아이콘/텍스트로 된 간결한 테이블이나 체크리스트 형태의 행이라면, 메인 Data Table 레이어를 선택하고 Settings를 클릭한 다음 Mobile Alignment를 켜고 Center를 선택하세요. 그러면 아이콘/텍스트 간격은 그대로 유지한 채 내보낸 테이블 자체가 모바일에서 가운데 정렬돼요. 여러 모바일 클라이언트에서 가운데 정렬처럼 보이도록 왼쪽/오른쪽 패딩을 직접 추가하는 것보다 더 안정적이에요.

모바일에서 Data Table 이미지 확장

Data Table 안의 이미지를 선택하고 Settings를 연 다음 100% Width Image on Mobile을 켜세요. 데스크톱 디자인에서 너비가 150px보다 넓은 이미지는 모바일에서 테이블 셀을 채우도록 확장될 수 있으며, 이는 Column 이미지에 쓰이는 최소 너비와 같아요. 너비가 150px 이하인 이미지는 작은 아이콘이 늘어나지 않도록 크기를 그대로 유지해요.

너비는 중첩된 메인 컴포넌트의 너비가 아니라 이미지 레이어가 렌더링된 너비를 기준으로 확인해요. 모바일 너비나 높이를 직접 재정의했다면 그 값이 우선해요. 이미지가 쌓인 행을 채우게 하려면 Data Table Row도 모바일에서 셀을 쌓도록 설정하세요.

Google Sheet URL이나 CSV/Excel 파일 데이터에서 Data Table 가져오기

Google Sheet나 CSV/Excel 파일에 이미 데이터가 있다면, 디자인에서 Column 레이어를 클릭한 다음 플러그인 하단의 빠른 추가 메뉴에서 Spreadsheet 옵션을 선택해 스프레드시트 데이터가 담긴 새 Data Table을 자동으로 만들 수 있어요.

Spreadsheet 옵션을 선택했다면 공개 Google Sheet URL을 붙여 넣거나 CSV/Excel 파일을 플러그인으로 끌어다 놓은 다음 Add를 클릭해 디자인에 레이어를 삽입하세요.

Emailify가 스프레드시트를 읽을 수 있도록 권한이 필요해요. Google Sheets에서 Share를 선택하고 URL을 복사하기 전에 Restricted를 Anyone with the link로 바꾸세요.

동적 데이터로 Data Table Row 반복

이메일 플랫폼의 데이터를 반복하려면 Data Table Row를 선택하고 Settings를 여세요. Opening Code Wrapper(예: {% for product in collection.products %})와 Closing Code Wrapper(예: {% endfor %})에 반복 문법을 추가하세요. Emailify가 내보낸 HTML에서 해당 행의 <tr></tr> 요소 앞뒤에 태그를 넣어요.

Data Table Row 레이어에 래퍼 태그를 추가했다면 필요에 따라 행의 레이어 안에 동적 콘텐츠를 채울 수 있어요.

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