Airtable의 콘텐츠를 Figma에 동기화하기

스프레드시트를 Airtable로 만들었다면 Figma 디자인과 동기화할 수 있어요.

영상 튜토리얼: Airtable 스프레드시트 콘텐츠를 Figma에 동기화하기(영어)

이 영상에서는 CopyDoc 플러그인으로 Airtable 스프레드시트 콘텐츠를 Figma에 동기화하는 방법을 보여 줘요.

영상 튜토리얼: 스프레드시트로 Figma 레이어 자동 반복 및 동기화하기(영어)

이 영상에서는 CopyDoc 플러그인으로 스프레드시트를 사용해 Figma 레이어를 자동으로 반복하고 동기화하는 방법을 보여 줘요.

Airtable 콘텐츠를 Figma 레이어에 동기화하기 ​

CopyDoc의 Sync Content 기능에 Airtable 콘텐츠를 추가하려면 플랫폼 드롭다운에서 Sync from Airtable URL 옵션을 선택하세요. 그런 다음 필드 3개를 입력해야 해요.

Airtable 시트 URL ​

시트를 만들려면 Airtable에 로그인해 Create a base를 클릭하고, 베이스를 추가할 Workspace를 선택한 다음 Create를 클릭하세요.

Airtable 시트 URL은 다음과 같은 형태예요. https://airtable.com/appzkSCDvQhxjfrl3/tbl9Ug0eTNoZFX5ne/viwULclwtTCrQq4dR?blocks=hide

Airtable 개인 액세스 토큰 ​

Airtable 개인 액세스 토큰 페이지에서 토큰을 생성할 수 있어요.

Airtable 개인 액세스 토큰은 다음과 같은 형태예요. patCDDXkwmgP4CyJK.19aa66430076753f90aaf1b27ae0a4ddf14f445dce8add9bd539bcbefcbe35df

토큰의 Scopes를 data.records:read와 schema.bases:read로 설정하고, 동기화할 베이스에 대한 접근 권한을 부여하세요. 스키마 범위가 있으면 CopyDoc이 모든 레코드에서 비어 있는 열을 인식해, 일치하는 텍스트 레이어를 비울 수 있어요. data.records:read만 있는 토큰으로도 반환된 열은 동기화할 수 있지만, 완전히 비어 있는 열은 템플릿 텍스트가 바뀌지 않은 채 남을 수 있어요.

사용자 지정 Airtable 레이블 ​

사용할 때 Airtable URL을 쉽게 알아볼 수 있도록 사용자 지정 레이블(예: My Airtable Snippets)을 지정해야 해요.

필드를 모두 입력했다면 Save New Airtable + 버튼을 클릭해 콘텐츠 미리보기를 불러오고 뷰를 Figma 파일에 저장하세요. 같은 테이블의 여러 뷰를 서로 다른 레이블로 저장할 수 있어요. 같은 뷰를 다시 추가하면 이미 저장된 항목이 선택돼요.

빈 필드 ​

schema.bases:read를 사용하면, 선택한 뷰에서 열 전체가 비어 있더라도 빈 셀이 일치하는 텍스트 레이어를 비워요. 테이블 열과 일치하지 않는 레이어는 기존 콘텐츠를 그대로 유지해요. CopyDoc은 선택한 뷰의 모든 레코드 페이지를 불러와요.

CopyDoc이 필드 목록을 읽을 수 없으면 메시지를 표시하고, 레코드와 함께 반환된 필드를 계속 사용해요. 요청이 있으면 토큰에 스키마 범위를 추가한 다음 콘텐츠 미리보기를 다시 불러오세요. 필드 목록을 일시적으로 사용할 수 없다면 다시 불러와서 재시도하세요.

MODERATED BY 같은 레이블은 해당 Airtable 셀에 그 텍스트가 들어 있으면 계속 표시돼요. 레이블을 없애려면 그 셀도 비우세요.

폰트가 누락된 Figma 텍스트 레이어는 업데이트할 수 없어요. Figma 텍스트 레이어에 누락된 폰트가 있으면 플러그인이 해당 레이어를 업데이트할 수 없어요. CopyDoc 플러그인으로 어떤 방식으로든 업데이트하려는 텍스트 레이어는 누락된 폰트 문제를 먼저 해결해 주세요.

스프레드시트 행으로 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)).