figma, 플러그인 Google Sheets Sync, 데이터를 활용한 이미지 자동 세팅

라용·2023년 2월 4일
0

figma

목록 보기
19/22

Google sheets Sync 플러그인을 사용하면, 구글 시트에 정리한 데이터를 피그마 디자인에 적용할 수 있다. 오토레이아웃을 잘 활용하면 카드뉴스 템플릿을 같은 것을 만들고, 데이터를 구글 시트로 한번에 관리하는 식으로 사용할 수도 있을 것 같은데, 아직 거기까지 해보진 않았다. 일단 간단한 사용법만 알아보면,

우선 카드 ui 를 만들고, 구글 시트 데이터로 교체할 부분의 레이어 이름 앞에 # 을 붙여준다. 아래에서는 이미지는 #img, 텍스트는 #mainText, #subText 로 설정했다.

여기서 #으로 표기한 내용이 구글 시트에서 데이터를 분류하는 이름이라고 보면 된다. (한글 이름도 가능)

이미지는 url 주소 형태로 두었고, 이렇게 3가지 데이터을 준비하고 피그마에서도 3가지 카드를 준비한 후

세가지 카드를 선택하고 플러그인을 실행한다. 이때 구글 시트 공유링크를 넣어야 하는데, 접근 권한을 링크가 있는 모든 사용자로 해서 넣어주어야 한다.

그리고 Fetch & Sync 를 하면 모든 데이터가 한번에 바뀐다.

profile
Today I Learned

0개의 댓글