영상 튜토리얼: 스프레드시트로 Figma 컴포넌트 배리언트 동기화
이 영상에서는 CopyDoc 플러그인으로 스프레드시트를 사용해 Figma의 컴포넌트 배리언트를 동기화하는 방법을 보여 줘요.
1단계: Figma에서 컴포넌트 레이어 배리언트 설정
스프레드시트를 동기화해 컴포넌트 배리언트를 바꾸기 전에, 먼저 아래 단계에 따라 배리언트가 있는 Figma 컴포넌트 세트를 Figma 레이어로 설정해야 해요(위 영상에서도 볼 수 있어요).
- 새 Figma 컴포넌트 레이어를 만들고 스프레드시트 헤더와 일치하도록 이름을 지정하세요(예: #Tag).
- Figma 컴포넌트 레이어를 마우스 오른쪽 버튼으로 클릭하고 Main component에 마우스를 올린 뒤 Add variant를 클릭해 새 Figma 컴포넌트 세트를 만드세요.
- 컴포넌트 세트 레이어를 선택한 상태에서 레이어 하단의 + 아이콘 버튼을 클릭해 필요한 만큼 새 배리언트를 추가하고, 새 배리언트마다 스타일을 바꾸세요(예: 배경이나 색상 변경 등).
- 컴포넌트 배리언트를 만들었다면 속성 이름과 배리언트 이름을 원하는 대로 바꿀 수 있어요. Figma 기본 이름을 바꿔 두면 스프레드시트에서 알아보고 사용하기가 더 쉬워요(예: “Property 1”을 “Genre”로, “Variant 1”을 “Synthwave”로 변경).
- Figma의 Assets 패널로 이동해 새 Figma 컴포넌트(예: #Tag)를 Figma 파일로 끌어다 놓고, 스프레드시트에서 동기화할 Figma 프레임 안으로 옮기세요.
- 아래 2단계 안내에 따라 스프레드시트의 행을 Figma 프레임과 동기화해 컴포넌트의 배리언트 옵션을 자동으로 바꾸세요.
2단계: 스프레드시트 동기화로 배리언트 바꾸기
일반 텍스트 콘텐츠를 동기화할 때와 마찬가지로, 스프레드시트에서 배리언트를 바꾸려면 먼저 컴포넌트 레이어 이름(예: Tag)을 스프레드시트 첫 번째 행에 새 헤더 열 값으로 추가해야 해요.
그런 다음 사이드바에서 Figma 배리언트 레이어를 더블클릭하면 보이는 속성 이름과 배리언트 이름을 복사해, 같은 열의 다음 행들에 붙여 넣으세요. 이 값에는 속성 이름과 배리언트 이름을 나타내는 = 등호가 들어 있어요(예: Genre=Synthwave). 아래 예시와 위 영상을 참고하세요.
| #Tag |
|---|
| Genre=Synthwave |
| Genre=Outrun |
| Genre=Vaporwave |
| Genre=Darksynth |
스프레드시트를 Figma와 동기화하면 이름이 일치하는 컴포넌트 Figma 레이어(예: #Tag)의 배리언트 값이 스프레드시트 행에 지정한 배리언트 값에 따라 자동으로 바뀌어요.
같은 스프레드시트에 다른 레이어용 열을 추가로 만들면, 그 레이어의 텍스트나 이미지 콘텐츠도 평소처럼 함께 동기화할 수 있어요.