Figma에서 병합 태그를 스프레드시트 데이터로 바꾸기

CopyDoc은 강력한 병합 태그 문법을 지원해요. 서식을 유지하면서 텍스트 레이어 안의 콘텐츠를 동적으로 바꾸고, 한 레이어에서 여러 값을 바꿀 수 있어요.

영상 튜토리얼: 스프레드시트로 Figma 텍스트 레이어의 병합 태그 동기화

이 영상에서는 CopyDoc 플러그인으로 스프레드시트에서 Figma 텍스트 레이어의 병합 태그를 동기화하는 방법을 보여 줘요.

영상 튜토리얼: 스프레드시트 셀의 고급 병합 태그로 콘텐츠 동기화

이 영상에서는 CopyDoc 플러그인으로 스프레드시트 셀의 고급 병합 태그를 사용해 Figma 텍스트 콘텐츠를 동기화하고 Figma 레이어 이름을 바꾸는 방법을 보여 줘요.

병합 태그 문법 ​

CopyDoc은 #{columnName}이라는 간단한 병합 태그 문법을 사용해요. 이 병합 태그를 텍스트 레이어 어디에든 넣으면 스프레드시트의 값으로 바뀌어요.

사용 예시 ​

Figma 텍스트 레이어:

Hello #{firstName} #{lastName},
Your order #{orderId} is ready for pickup!

스프레드시트 열:

firstNamelastNameorderId
JohnSmith12345
SarahJohnson67890

동기화 후 결과:

  • Hello John Smith, Your order 12345 is ready for pickup!
  • Hello Sarah Johnson, Your order 67890 is ready for pickup!

주요 장점 ​

  • 서식 유지: 텍스트 스타일, 폰트, 색상이 그대로 유지돼요.
  • 여러 병합 태그: 한 레이어에 병합 태그를 필요한 만큼 사용할 수 있어요.
  • 유연한 열 이름: 다양한 열 헤더 형식을 지원해요.
  • 스마트 대체: 일치하는 열이 없으면 병합 태그 텍스트가 그대로 유지돼요.
  • 다른 행 참조: .N 문법으로 특정 행의 데이터를 가져와요.
  • 동적 레이어 이름: 병합 태그로 프레임과 레이어 이름을 바꿔요.

유연한 열 헤더 ​

CopyDoc은 열 헤더를 똑똑하게 매칭해요. 다음 형식은 모두 작동해요.

  • 기본: firstName은 #{firstName}과 일치해요.
  • # 접두사 사용: #firstName은 #{firstName}과 일치해요.
  • 전체 병합 태그: #{firstName}은 #{firstName}과 일치해요.

고급 기능 ​

행 번호 지정(.N 문법) ​

.N 문법으로 특정 행의 데이터를 가져올 수 있어요. 여기서 N은 행 번호예요(1행은 헤더이므로 2부터 시작해요).

예시:

스프레드시트:

firstNamelastName
JohnSmith
SarahJohnson
MikeWilliams

1행의 Figma 텍스트 레이어:

Current: #{firstName} #{lastName} Next up: #{firstName.3} #{lastName.3}

결과:

Current: John Smith Next up: Sarah Johnson

이 기능은 다음과 같은 경우에 유용해요.

  • “다음 순서”나 “이전” 참조 만들기
  • 다른 행의 관련 데이터 표시
  • 비교 화면 구성
  • 참조 목록 만들기

병합 태그로 레이어 이름 바꾸기 ​

병합 태그는 프레임과 레이어 이름을 바꿀 때도 사용할 수 있어요. 스프레드시트의 열 값에 병합 태그를 넣어 레이어 이름을 동적으로 생성하세요.

예시:

스프레드시트:

frameNamefirstNamelastName
#{firstName} #{lastName}JohnSmith
#{firstName} #{lastName}SarahJohnson

결과: 프레임 이름이 다음과 같이 바뀌어요.

  • "John Smith"
  • "Sarah Johnson"

레이어 이름에도 행 번호 지정을 사용할 수 있어요.

  • #{firstName.2}와 #{firstName.3}으로 비교용 프레임 이름을 만들 수 있어요.
  • “전/후”나 “옵션 A와 옵션 B 비교” 같은 경우에 딱 맞아요.

레이어 이름 일괄 변경 ​

더 간단하게 이름을 바꾸려면, 예를 들어 이름이 모두 #My Frame인 Figma 프레임 6개가 있을 때 이 이름을 스프레드시트의 열 이름으로 사용하고, 고정 값이나 병합 태그 조합으로 이름을 일괄 변경할 수 있어요.

스프레드시트 셀 콘텐츠 보간 ​

스프레드시트 셀은 병합 태그 문법으로 다른 열을 참조할 수 있어요. 이 처리는 값이 Figma 레이어에 적용되기 전에 이루어지므로, 계산된 값을 만들 수 있어요.

예시:

스프레드시트:

firstNamelastNamefullNamegreeting
JohnSmith#{firstName} #{lastName}Hello, #{fullName}!
SarahJohnson#{firstName} #{lastName}Hello, #{fullName}!

작동 방식:

  1. fullName 열이 “John Smith” 또는 “Sarah Johnson”으로 변환돼요.
  2. 그다음 greeting 열이 변환된 값을 사용해 “Hello, John Smith!” 또는 “Hello, Sarah Johnson!”이 돼요.
  3. 이 최종 값이 Figma 텍스트 레이어에 적용돼요.

장점:

  • 스프레드시트에서 재사용할 수 있는 수식을 만들어요.
  • 여러 열을 서식 있는 문자열로 합쳐요.
  • 간단한 데이터 조각으로 복잡한 콘텐츠를 만들어요.
  • 비슷한 콘텐츠 패턴의 일관성을 유지해요.

행 참조를 사용한 고급 예시:

productpricecompetitorcomparison
Widget A$99Widget B#{product} (#{price}) vs #{product.3} (#{price.3})
Widget B$149Widget C#{product} (#{price}) vs #{product.4} (#{price.4})
Widget C$199Widget A#{product} (#{price}) vs #{product.2} (#{price.2})

이렇게 하면 “Widget A ($99) vs Widget B ($149)” 같은 동적 비교 텍스트가 만들어져요.

주요 활용 사례 ​

  • 이메일 템플릿: 받는 사람 이름과 세부 정보를 개인화해요.
  • 명함: 연락처 정보가 다른 여러 버전을 생성해요.
  • 마케팅 자료: 콘텐츠가 다른 현지화 버전을 만들어요.
  • 데이터 시각화: 레이블과 제목을 동적으로 업데이트해요.
  • 제품 카탈로그: 제품명, 가격, 설명을 일괄 업데이트해요.
  • 비교 레이아웃: 여러 행의 데이터를 나란히 보여 줘요.
  • 동적 레이어 정리: 콘텐츠에 따라 프레임 이름을 자동으로 지정해요.

팁 ​

  • CSV에서 쉼표가 들어간 값은 따옴표로 감싸세요: "42,580"
  • 디자인 전체에 적용하기 전에 먼저 레이어 몇 개로 테스트하세요.
  • 스프레드시트를 이해하기 쉽도록 의미 있는 열 이름을 사용하세요.
  • 행 번호는 2부터 시작하므로(1행은 헤더), .2는 첫 번째 데이터 행을 가리켜요.
  • 스프레드시트 셀 보간이 먼저 처리되고, 그다음 Figma 레이어 보간이 처리돼요.
  • 병합 태그를 창의적으로 조합해 복잡한 동적 콘텐츠를 만들어 보세요.