피그마와 엑셀의 연동 : CopyDoc Text Kit

가끔 일을 하다 보면, 피그마에 실제 데이터를 불러 올 일이 있지. 
몇 개의 이미지와 텍스트라면 수작업이 편하겠지만, 가~아끔 큰 규모의 데이터를 써야 할 일이 있을 때는 여간 성가신 게 아니었어.

콘텐츠 디자인 파트에서 400여 권의 데이터를 갖고 와야 하는 일이 생겨서 머리를 싸매고 있길래 (이벤트 페이지인데 400권의 정보가 담긴 이미지가 필요한 상황) 방법을 찾다 보니 피그마에 답이 있었어.

먼저 준비할 것은, 
데이터가 담긴 엑셀 파일, 그리고 CopyDoc Text Kit라는 플러그인이야.

먼저, 반복할 컴퍼넌트를 만들어 주는데, 레이어의 이름이 중요해. #뒤에 원하는 변수명을 적어주고, 이를 엑셀과 연동시키면 되는 단순한 방법이야. 위와 같이 피그마 컴퍼넌트를 준비해 두고,

엑셀의 1열에 그 변수를 똑같이 적어주면 준비는 끝. #Cover에는, 이미지 경로를 적어주면 되는데, 이 경로가 public하게 사용되는 링크여야 한다는 게 중요해. 즉, 회원 정보 확인이 필요한 구글 드라이브 등은 활용할 수 없다는 게 한계지.

만든 컴퍼넌트를 여러 번 복사해서 리스트를 만들어 주고, 전부 선택한 상태에서 CopyDoc Text 플러그인을 켜주면 돼.

이 플러그인에는 정말 많은 기능이 있는데, 아직 모든 기능을 파악하지 못했고, 오늘 얘기할 건 (1) Sync Spread Sheet 버튼. 이걸 누르면, 두 번째 페이지가 뜨는데, 여기서는 (2) 엑셀 파일을 끌어다 넣거나, (4) public 링크 URL을 통해 엑셀을 넣어주면 돼. 마지막 페이지에서는 (3) Sync Rows를 눌러주면 되는데, 필요에 따라 정렬방법(5)을 바꿔줄 수도 있어. 

그럼 이렇게 뙇! 이미지와 텍스트가 들어가게 돼. 좋지?

그런데 단점도 있어. 오토 레이아웃이 먹히지 않아서 디테일한 정리는 해주어야 하고 (두 번째 줄 보면, 책 이름과 저자명이 겹쳐 있음), 컴퍼넌트의 내부 구조가 조금이라도 복잡하면 제대로 작동하지 않는 것 같아. 

아직 사용해보진 않았지만, 엑셀로의 export 기능도 있는 것 같고, (이젠 피그마의 기본기능이 되어서 의미가 없지만) 스펠링 교정 같은 것도 있고... 조금 공부하면 여러 용도로 활용할 수 있을 것 같아.

업무에 잘 활용해 보아. 노가다는 안 할수록 좋은 거잖아? ^^