Figma, GoogleSheetsSync, Window Console를 통한 단순 반복 업무 자동화

Figma를 활용한 단순 반복 작업 자동화

이 글에 Main이 될, Figma의 플러그인인 Google Sheets Sync

 

이번 프로젝트는 글로벌 서비스로 하나의 어플을 72개국으로 서비스를 내야했다. 각 국가별 프로모션 이미지들이 필요해, 해당 국가의 언어별로 작업이 필요했다.

 

너무나 많은 단순 박복 작업이 필요했기에 Figma의 Plugin인 Google Sheets Sync를 통해 업무 자동화를 시도해보았다. 작업에 필요한 부분을 정리 해보았는데 다음과 같이 2가지로 구분이 되었다.

 

 

프론트에서는 “언어” 번역본 스트링 파일의 값을, 백엔드에서는 “국가” 음원 정보를. 아래와 같이 프론트, 백엔드 정보를 Google Sheets Sync를 이용하기 위해 아래와 같이 해당 색상에 맞춰 네이밍을 변경했다.(예시 이미지1, 2)

 

예시 이미지1

예시 이미지2

진행 중 Export시 문제점이 있었는데 Google Sheets Sync 플러그인을 사용했을 때, 레이어 이름 뒤에 “//국가1”이런 식으로 표기가 되어서 Figma에서 레이어 이름을 국가별로 구분해서 Export 할 수가 없었다. (예시 이미지3, 4)

 

예시 이미지3

 

예시 이미지4ㅣ

그래서 대안책으로 Window console 명령어로 자동화 시켜보았다. (아래 이미지 순서대로 참조)

 

순서1 (국가별로 다른 스트링, 음원 정보들)

 

순서2(Figma에서 Export시 문제점)

 

순서3(Excel로 window console 명령어 정리)

 

순서4, 5(그림 요약)

 

아래는 이해를 돕기위한 gif 이미지 파일.

순서3~5 gif

위의 예시 사례가 아닌 실제로는 너무나 많은 이미지들이 필요해 노가다성으로 작업하기에는 너무 비효율적이라 생각했고, 다음 글로벌 프로젝트에도 활용하기 위해 자동화 해보았다.

 

---

 

※추신: 너무 간단한 해결책을 발견했다! Google Sheets Sync의 구별하는 요소를 “//” 문자열로 구분이 가능하다.

 

간단한 해결책