코딩을 몰라도 Figma 자동화 – JSON 데이터를 UI에 연결하는 법

by

디자인을 하다 보면 텍스트나 이미지처럼 반복되는 데이터를 프레임에 하나하나 붙여 넣는 일이 꽤 귀찮을 때가 있어요.


예를 들어 제품 목록, 사용자 카드, 뉴스 피드처럼 반복되는 UI를 작업할 때 매번 복사해서 붙이고, 또 수정하고…
이런 반복 작업은 시간도 많이 들고, 오류가 생기기 쉽습니다.
그럴 때 Figma에서 JSON 데이터를 자동으로 UI에 연결하는 방법을 알게 되면, 업무 효율이 눈에 띄게 올라갑니다.

신기하게도, 이 작업을 코딩 없이도 할 수 있습니다.
단순히 JSON 파일만 준비하면, 텍스트, 이미지, 버튼 텍스트까지 한 번에 불러와 UI에 적용할 수 있습니다.
자, 어떤 방식으로 하는지 지금부터 알아보시죠.

JSON이 뭐길래, 왜 Figma에 연결하나요?

JSON은 JavaScript Object Notation의 약자로,
쉽게 말해 데이터를 깔끔하게 정리해놓은 텍스트 파일입니다.
예를 들어 이런 식이죠:

json
[
  {
    "title": "여기가 제목이구요 01",
    "price": "$9,000",
    "image": "https://example.com/샘플.jpg"
  },
  {
    "title": "여기가 제목이구요 02",
    "price": "$9,000",
    "image": "https://example.com/샘플1.jpg"
  }
]

이런 형식의 데이터를 제품 카드에 자동으로 넣고 싶을 때,
Figma에서는 플러그인을 활용하면 아주 쉽게 연결할 수 있습니다.

사용 준비 – 필요한 플러그인

대표적으로 많이 사용하는 플러그인은 다음과 같습니다.

  1. Google Sheets Sync by Figma
    • Google Sheets와 연동하여 데이터를 UI에 자동 배치
    • JSON처럼 구조화된 데이터를 Sheet에 붙여넣고 연동 가능
  2. JSON to Figma
    • JSON 파일을 직접 읽어 Figma에 텍스트나 이미지로 삽입
    • 간단한 UI 반복 요소에 아주 유용
  3. Content Reel
    • JSON 데이터를 미리 불러와 텍스트 및 이미지로 배치
    • 다국어 텍스트, 사용자 이름, 이메일 주소 같은 더미 콘텐츠 넣기에 적합

이번 글에서는 Google Sheets Sync 플러그인을 기준으로 설명드리겠습니다.
JSON을 직접 붙여넣거나 변환할 수 있고, 실시간 업데이트까지 가능하기 때문에
실무에서 가장 많이 사용됩니다.

단계별 설명 – 코딩 없이 자동으로 붙이기

  1. Google Sheet 만들기
    • Google 스프레드시트에 JSON 구조를 복사해서 붙여넣습니다.
    • 첫 번째 줄은 키 이름 (예: title, price, image 등)
    • 두 번째 줄부터는 실제 데이터 입력
  2. Figma에서 플러그인 실행
    • 플러그인 > Google Sheets Sync 실행
    • UI 요소에 텍스트나 이미지를 미리 배치해 둡니다
  3. 텍스트 요소에 속성 연결하기
    • 예를 들어 제품명 텍스트 상자를 선택한 뒤
      {title} 형식으로 키 값을 입력해 둡니다
    • 이미지 프레임에도 {image}로 설정 가능
  4. Google Sheets 링크 붙이기 & 싱크
    • 스프레드시트 URL을 플러그인에 입력하고 연결
    • “Sync” 버튼을 누르면 자동으로 데이터가 삽입됩니다

실제로 어디에 쓸 수 있을까요?

  • e커머스 제품 카드
    제품 이름, 가격, 이미지, 버튼을 자동으로 반복 UI에 넣을 수 있습니다.
  • 팀 멤버 소개 페이지
    이름, 직함, 프로필 사진 등을 텍스트와 이미지로 쉽게 연결 가능합니다.
  • 뉴스나 블로그 리스트 디자인
    제목, 날짜, 요약 텍스트를 자동 삽입하여 가독성 높은 리스트를 빠르게 완성할 수 있습니다.
  • 다국어 UI 테스트
    한 화면에서 여러 언어 데이터를 불러와 비교할 때도 유용합니다.

마무리

Figma는 더 이상 단순한 디자인 툴이 아닙니다.
데이터와 연결해서 반복되는 UI를 빠르게 구성하고,
나중에는 실제 개발 데이터와 유사한 환경에서 디자인 검토까지 가능하게 합니다.

이번에 소개한 JSON 자동화 방식은 코딩을 몰라도 충분히 쓸 수 있으며,
팀 작업 속도와 정확도를 동시에 높여줍니다.
단순 반복 작업에 시간을 쓰기보다는,
이런 툴을 잘 활용해서 디자이너가 해야 할 더 중요한 작업에 집중해 보세요.

다음 글에서는 이 방식으로 만든 템플릿을 저장하고,
다른 프로젝트에도 재사용하는 방법을 다뤄보겠습니다.
UI 자동화는 생각보다 훨씬 쉬울 수 있습니다.

Leave a Comment