스프레드시트로 Figma 레이어 자동 반복 및 동기화
이 영상에서는 CopyDoc 플러그인으로 스프레드시트에서 Figma 레이어를 자동으로 반복하고 동기화하는 방법을 보여 줘요.
반복되는 그리드나 목록을 실제 콘텐츠로 자동으로 채워야 하는 디자인에 특히 유용해요.
이 기능으로 스프레드시트에서 레이어 이름을 바꾸거나 CSS 스타일을 적용할 수도 있어요.
Figma 레이어 콘텐츠 동기화를 위한 스프레드시트 구조 예시
스프레드시트로 XLSX, CSV, Google Sheet 중 무엇을 사용하든 구조는 항상 같아요. 스프레드시트의 맨 첫 번째 행(“헤더”)에는 그 아래 나머지 행과 동기화할 Figma 레이어 이름이 들어 있어야 해요.
이름은 원하는 대로 지정할 수 있지만, #Title이나 #Description처럼 짧으면서도 알아보기 쉬운 해시태그 형식을 쓰는 것이 가장 편해요. 그런 다음 Figma에서 텍스트 레이어 이름도 #Title이나 #Description으로 지정하세요. 그러면 나중에 플러그인에서 스프레드시트를 동기화할 때 서로 연결돼요.
| #Title | #Genre | #Age Rating | #Total Reviews |
|---|---|---|---|
| No Time To Die | Action | 13 | 123 Reviews |
| Dune | Sci-Fi Action | 14 | 124 Reviews |
| Black Widow | Action | 18 | 125 Reviews |
| Suicide Squad | Action | 18 | 125 Reviews |
스프레드시트 행으로 Figma 레이어 하나를 자동 반복하기
Content 또는 Styles 동기화 탭 옵션을 사용할 때 Auto Repeat 토글을 켜면 Figma 레이어 하나를 자동으로 반복할 수 있어요. 처음 선택한 Figma 레이어를 스프레드시트 데이터의 행 수만큼 자동으로 복제해요.
이 기능으로 카드, 카탈로그 항목, 캠페인 레이아웃 하나를 스프레드시트 행마다 콘텐츠가 채워진 디자인으로 만들 수 있어요. 디자인 안의 텍스트 레이어와 이미지 레이어에는 일치하는 스프레드시트 열의 값이 들어가요.
메인 컴포넌트를 선택하면 CopyDoc이 행마다 인스턴스를 만들어요. 기존 인스턴스를 선택하면 그 인스턴스를 복제하고, 프레임을 선택하면 프레임을 복제해요.
선택한 Figma 레이어가 이미 Auto Layout이 켜진 다른 Figma 레이어 바로 안에 있다면, 선택한 레이어가 그 부모 레이어 안에서 자동으로 복제돼요. 그렇지 않으면 CopyDoc이 완전히 새로운 Auto Layout 프레임을 만들고 그 안에 새 Figma 레이어를 복제해요.
자동 반복되는 부모 레이어의 동적 이름
복제된 각 Figma 레이어의 이름을 스프레드시트에서 가져오려면 선택한 템플릿 레이어의 이름을 열 머리글과 맞추세요. CopyDoc은 각 행에서 해당 열의 값을 새 레이어 이름으로 사용해요.
맨 앞의 # 하나는 있어도 되고 없어도 돼요. #Title이라는 레이어는 Title 열과 일치할 수 있고, Title이라는 레이어는 #Title 열과 일치할 수 있어요. 두 머리글이 모두 있으면 값이 비어 있더라도 정확히 일치하는 쪽이 우선해요. 대소문자와 공백은 여전히 일치해야 해요.
스프레드시트에 일치하는 레이어 이름이 없으면 CopyDoc 플러그인은 원래 Figma 레이어 이름에 행 번호를 붙여 사용해요(예: My Frame Layer (Row 3)).
텍스트 콘텐츠에 지원되는 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 문법으로 하이퍼링크를 지정할 수 있어요(링크의[]텍스트 영역 안에 굵게/기울임꼴 문법을 추가해 링크 텍스트에 서식을 적용할 수도 있어요).