Background
행사를 기획해 본 사람이라면 누구나 공감하는 디자인 베리에이션 지옥. 행사가 잦았던 토스 특성상 디자인 베리에이션을 할 일이 정말 많았는데요.
당시 인터널 프로덕트 디자이너였던 영화님이 알려 주신 치트키 덕에 매 행사마다 100개 이상의 이름표를 1분 만에 만들 수 있었어요. (영화님이 어떤 분인지 궁금하시다면 이 아티클을 보세요)
그럼 오늘은 그 꿀팁을 여러분께 공개해 볼게요.
필요한 것
- Figma 계정
- 구글 계정
fyi. Figma는 교육용으로 선택하시면 무료로 사용하실 수 있어요.flow 정리
만드는 순서
아래 순서에 따라 단계를 진행해주세요.
1. 구글 스프레드 시트 플러그인 설치하기
아래와 같이 Plugins에 들어가 google sheet를 검색하여 플러그인을 설치해 주세요.
2. 피그마 디자인 파일 만들기
베리에이션 하고자 하는 디자인 파일을 피그마에 만들어 주세요.
이 때 중요한 것은 어떤 레이어를 바꿔줄 것인지 선택하고 바꾸고자 하는 레이어의 이름 앞에는 #을 붙여야 합니다. 이 이미지에서는 #Title, #Tools #No 레이어를 변경해 볼 거예요.
3. 구글 스프레드 시트 만들기
2번 단계에서 #뒤에 넣었던 레이어의 이름을 시트 첫 행에 입력해주세요. 주의할 점은 대소문자조차도 같아야 합니다. 다만, 라벨 순서나 레이어 순서는 상관 없어요. 두번째 행 부터는 바꿀 값들을 넣어주세요. 
4. 구글 스프레드 시트 공유 설정 바꾸기
공유 버튼을 클릭하고 모든 사용자가 볼 수 있도록 허용 해 주세요. 이 부분이 제한될 경우, 에러가 발생합니다. 그리고 꼭 링크를 복사해주세요.
5. 피그마 마스터 컴포넌트로 바꾸기
피그마에 돌아가 프레임을 마스터 컴포넌트로 바꿔주세요. 그리고 바로 옆에 같은 파일을 복사한 뒤, 해당 파일을 프레임으로 바꿔주세요. 위 단계가 모두 완료되었다면 데이터 행 개수만큼 프레임을 복사하여 붙여넣기 합니다.
6. 구글 스프레드 시트 플러그인 실행하기
아까 설치한 구글 스프레드 시트 플러그인을 실행하고, 복사한 링크를 붙여넣습니다. 마지막으로 Fetch&Sync 버튼을 눌러주세요. 
마치며
제가 Figma를 쓰고 있던 사람인지라 설명이 부족했을 수도 있어요. 혹여 보시면서 이해가 안 되는 부분이 있거나, 궁금한 점이 있다면 댓글로 남겨주세요!
다음 편은 구글 캘린더를 트리거로 한 슬랙 리마인더 만드는 방법으로 찾아올게요🥰
