본문 바로가기

Design

Figma에서 Data 사용하기 (Google Sheet Sync)

Google Sheets Sync

작업을 하다 보면 실데이터를 넣어서 확인해야 할 때가 있다. 스케치에서는 Data 기능을 사용하면 되고, 피그마에서는 Google Sheet Sync라는 플러그인을 사용해서 작업물에 데이터를 끼얹어볼 수 있다. 사용법을 알아보기에 앞서 설치할 수 있는 링크를 공유한다. 아래 링크 말고도 Figma - Plugin 메뉴에서도 검색해서 다운로드할 수 있다.

Plugin Download
https://www.figma.com/community/plugin/735770583268406934/Google-Sheets-Sync

 


어떤 Data를 넣을까

컴포넌트에 어떤 데이터가 필요한 지 체크해보자. 예제로 내가 좋아하는 웹툰으로! 파란 박스 영역에는 웹툰의 썸네일을, 그리고 각 텍스트에는 요일과 제목 데이터를 넣을 것이다. 데이터는 네이버 웹툰에서 긁어오기로 한다.

 

 


 

 

Google Sheet 생성

이제 구글 시트를 생성하자. 여기서는 반드시 Public Share가 가능한 계정을 사용해야한다. 나 같은 경우는 회사 계정으로 문서를 만들었는데, 보안 문제로 외부 공유 기능이 막혀있더라. 이 플러그인은 Public Share가 가능한 계정에서 문서를 만들어야만 작동한다. 공유 제한이 걸려있는 회사 계정으로는 팀 드라이브에 만들던, 개인 드라이브에 만들던 공유가 안되므로 개인 계정으로 문서를 새로 만들었다. (퇴사했을 때 문서관리가 약간 걱정스럽긴 하지만 나중에 생각하자)

 

 


 

Data 입력

이제 구글 시트에 데이터를 넣어보자. 1열이 데이터 한 묶음이라고 생각하면 된다.
Figma : 데이터를 넣을 레이어에 #을 붙여 이름을 지정한다.
Sheet : 상단 1행에 위 레이어명을 넣는다. 시트에서는 #을 제거하고 bold 스타일을 지정한다. 

 

 

 

 

스케치는 로컬의 이미지 파일을 싱크하는 방식이라면 피그마는 인터넷에 있는 이미지를 가져오는 방식이다. 그래서 피그마는 구글 시트 하나로 모두 관리할 수 있다. 위처럼 인터넷 이미지에 오른쪽 키를 눌러 이미지 주소 복사를 한 뒤 구글 시트에 붙여넣으면 된다.

 

 


 

Data 싱크

이제 데이터도 준비되었고 싱크할 준비도 끝났다. 연결을 해보자.
피그마에서 데이터를 넣을 instance를 잡고 Google Sheet Sync 플러그인을 켜면 아래와 같이 구글시트 링크를 넣는 팝업이 뜬다. 데이터를 입력해놓은 시트 주소를 넣으면 데이터가 싱크 된다.

 

여기서 유의해야 할 점은 Master Component에는 Data를 싱크 할 수 없다. Instance나 Frame에 데이터를 입히는 방식으로 Master에 왜 데이터가 안 들어갈까 고민하지 말자 (like me)

 


 

1개의 컴포넌트에 여러 데이터를 넣을 때

디자인을 컴포넌트화해 두었다면, 1개의 컴포넌트는 다양한 화면에 활용하게 될 것이다. 이럴 경우 데이터는 여러 케이스로 들어가야할텐데 구글 시트 플러그인은 어떻게 대응해두었을까. 예제로 위 컴포넌트의 썸네일에는 웹툰/웹소설 이미지가 들어갈 수 있어야 하고 타이틀에도 웹툰/웹소설 타이틀이 각각 들어갈 수 있게 만들어본다. (귀찮으니 요일 데이터는 하나로 쓰자)

 

 

 

 


각 데이터는 구글 문서 하단에서 시트를 추가해서 분리해준 뒤 적절한 이름을 지어준다. 동일한 컴포넌트를 사용하므로 각 시트 1행에는 동일한 레이어 명이 들어갈 것이다. 시트 세팅이 완료되었다면 피그마 Pages에 페이지 명//시트 명으로 이름을 변경한다. //이 각 페이지와 시트를 연결해주는 역할을 한다. 나는 피그마 webtoon 페이지와 toon이라는 구글 시트를, webnovel이라는 페이지에 novel이라는 구글시트를 연결해주었다.

 

 

 

데이터를 싱크 해보니 제대로 잘 들어오는 것을 확인했다. 사실 처음에 가이드라인을 제대로 읽지 않고, 레이어를 2개 만들거나 구글 문서를 분리하는 등의 삽질을 했다. 역시 가이드라인을 제대로 읽으면 삽질 시간을 줄일 수 있다는 것을 다시 한번 마음에 새긴다. 

제작자의 가이드라인 확인하기

 


 

스케치와 비교해보면?

데이터 관리
초기 세팅은 피그마가 더 간편한 느낌이었다. 온라인 동시 편집은 확실히 편리하다. 다만 이미지 링크를 눌러보거나 데이터를 연결해봐야 맞게 넣었는지 확인이 가능한 것은 좀 번거로웠다. 스케치는 로컬에서 이미지가 보이니 세팅 후 관리할 때 더 편리했다.

사용성 

데이터를 입히는 과정에 스케치가 이미지 데이터를 썸네일로 보여서 좀 더 쉽고 명확하게 느껴졌다. 스케치는 데이터를 사용하는 데 제약사항이 거의 없었는데 피그마는 데이터에 맞춰 페이지 구조를 조정해야 한다는 것이 상당히 부담스럽다. 레이어 명이나 시트에서 이름이 변경되면 연결이 틀어지기 때문에 관리에 꽤 유의해야 할 것 같다. 특히나 여러 팀원이 작업한다면 더욱...

이미지 링크가 사라지면?
만약 피그마에 세팅해둔 이미지 링크가 사라지면 세팅해둔 데이터를 못쓰게 될 확률도 있을 것 같다. 아마 그럴 확률이 많지는 않겠지만.