스프레드시트로 Figma에 Auto Layout 표 생성

CopyDoc의 Sync Content 기능은 스프레드시트 행을 Figma 레이어와 동기화할 뿐 아니라, 어떤 스프레드시트(.xlsx/.csv 파일 또는 공개 Google Sheet URL)든 여러 행의 반복 텍스트와 이미지 콘텐츠를 선택한 Figma 레이어에 동기화할 수 있어요.

스프레드시트로 XLSX, CSV, Google Sheet 중 무엇을 사용하든 구조는 항상 같아요. 스프레드시트의 맨 첫 번째 행(“헤더”)은 표의 첫 번째 헤더 행(“컴포넌트” 행)으로 사용되고, 그 아래 행은 모두 이 첫 번째 헤더의 인스턴스가 돼요.

공개 Google Sheets URL을 Your Public Google Sheet URL 입력란에 붙여 넣으면 스프레드시트 내용을 미리 볼 수 있어요. 올바르게 구성된 유효한 공개 URL이라면, 붙여 넣은 뒤 URL에 들어 있는 헤더의 미리보기가 자동으로 로드돼요.

미리보기가 로드되면 Generate Table from Rows 버튼을 클릭하세요. 스프레드시트의 콘텐츠가 현재 Figma 페이지에 표로 들어가요.

표 가져오기를 위한 스프레드시트 구조 예시 ​

스프레드시트로 XLSX, CSV, Google Sheet 중 무엇을 사용하든 구조는 항상 같아요. 스프레드시트의 맨 첫 번째 행(“헤더”)에는 그 아래 나머지 행과 동기화할 Figma 레이어 이름이 들어 있어야 해요.

이름은 원하는 대로 지정할 수 있지만, #Title이나 #Description처럼 짧으면서도 알아보기 쉬운 해시태그 형식을 쓰는 것이 가장 편해요. 그런 다음 Figma에서 텍스트 레이어 이름도 #Title이나 #Description으로 지정하세요. 그러면 나중에 플러그인에서 스프레드시트를 동기화할 때 서로 연결돼요.

#Title#Genre#Age Rating#Total Reviews
No Time To DieAction13123 Reviews
DuneSci-Fi Action14124 Reviews
Black WidowAction18125 Reviews
Suicide SquadAction18125 Reviews

표 텍스트 콘텐츠에 지원되는 Markdown 서식 ​

스프레드시트 콘텐츠에 기본 Markdown 서식(굵게, 기울임꼴)과 링크를 선택적으로 추가할 수 있어요. 스니펫이 Figma 텍스트 레이어에 동기화될 때 서식이 자동으로 적용돼요.

Figma 텍스트 레이어는 일반 텍스트로 시작해도 돼요. 굵게나 기울임꼴 샘플을 미리 서식 지정해 둘 필요는 없어요. Figma에서 굵게, 기울임꼴, 굵은 기울임꼴 배리언트를 쓸 수 있는 폰트 패밀리를 사용하세요. 스프레드시트 미리보기는 브라우저 폰트를 사용하므로, 미리보기 모양만으로는 Figma 폰트에 해당 배리언트가 있는지 확인할 수 없어요.

  • 별표 두 개 **Snippet text to bold** 또는 밑줄 두 개 __Snippet text to bold__로 굵은 텍스트를 지정할 수 있어요.
  • 별표 하나 *Italic Snippet Text* 또는 밑줄 하나 _Italic Snippet Text_로 기울임꼴 텍스트를 지정할 수 있어요.
  • 별표 세 개 ***Bold Italic Snippet Text*** 또는 밑줄 세 개 ___Bold Italic Snippet Text___로 굵은 기울임꼴 텍스트를 지정할 수 있어요.
  • This is [my link here](https://example.com) in a text snippet 같은 Markdown 문법으로 하이퍼링크를 지정할 수 있어요(링크의 [] 텍스트 영역 안에 굵게/기울임꼴 문법을 추가해 링크 텍스트에 서식을 적용할 수도 있어요).