디자인을 하다보면 불필요한 반복 작업들을 해야만 할때가 있다. 예를 들면 누군가에게 보고를 하거나 프로토타입을 만들때 콘텐츠 안에 들어가는 데이터가 가짜 데이터가 아닌 진짜 데이터를 넣어야한 할때이다.
피그마의 Google Sheet Sync라는 플러그인을 사용하면 구글 스프레드 시트에 있는 데이터들을 연동만 시켜 값을 디자인 파일에 집어넣을 수가 있다. 다같이 작업하면서 자료 정리를 미리 해당 양식에 맞춰 둔다면 직군별 유지보수와 디자인의 효율이 향상될것이다.
1. Google Sheet Sync
플러그인 설명서
Getting Started - Google Sheets Sync
STEP 3: Run this plugin, paste your shareable link, and click ‘Fetch & Sync’
docs.sheetssync.app
플러그인 다운로드
https://www.figma.com/community/plugin/735770583268406934/Google-Sheets-Sync
Google Sheets Sync | Figma Community
Figma Community plugin - Sync content from Google Sheets directly into your Figma file. This is not an official plugin created by Google • It is simply created with ❤️ by David Williames If you want to support the continued development of this plugin
www.figma.com
2. 플러그인 사용 방법
01. 어떤 데이터가 필요한지 정하기
나는 피그마 커뮤니티 중 유튜브에 내용을 정리해주신 분의 호텔 콘텐츠의 카드 중심으로 정리해 보았다.
필요한 데이터는 총 11가지 이다. 상단 1행에는 레이어와 동일하게 Bold처리로 라벨링을 해두어야한다.
연동할 구글 스프레드 시트는 오픈되어있어야하니 회사에서 사용할때 이 점을 주의 해야한다.
이미지 데이터를 넣을때는 해당 이미지의 링크를 가져와 삽입하면 된다. 이미지의 경로가 달라지면 노출되지 않는다는 단점은 있지만 크게 걱정 되는 문제는 아닌것같다. 간혹 너무 많은 이미지를 가져온다면 에러가 나는 일이 있으니 캐쉬를 지워보거나 조금 기다려줘야한다.
| Name | Location | Price | Image | Breakfast | About | Rating | RatingStatus | RatingColor | Card | SalePrice |
https://docs.google.com/spreadsheets/d/1bH1QrRPTx59xpxRhDShjrXmr6M49bzZL7CSd9askHF8/edit?usp=sharing
Sync Hotels
Part1 Name,Location,Price,Image,Breakfast,About,Rating,RatingStatus,RatingColor,Card,SalePrice Hotel Palm,Miami, USA,135,<a href="https://drive.google.com/file/d/1I068vandCqkwnUp-MYqfl-oO6h8K-xwk/view?usp=sharing">https://drive.google.com/file/d/1I068vandC
docs.google.com
피그마에서는 레이어 이름 앞에 "#"기호를 추가해야 구글 스프레드시트에 연동했을때 레이어와 연동된다. 연동하고 싶은 요소들을 선택 후 플러그인을 사용하면 사용 방법은 끝이다.
02. 구글 스프레드 시트 값을 활용하여 디자인 변형
총 4가지 (투명도, 숨김, 색, 가로 새로)를 변형 할 수 있다.
| 기능 | 표현 | |
| Layer Opacity | /NN% | |
| Visibility | /Show | /Hide |
| Fill Color | /#000000 | |
| Width / Height | /250w | /180h |
댓글