Notion DB를 활용한 Figma 플러그인 만들기

핵심 내용

• 디자인 작업에서 반복되는 더미 데이터 입력 시간을 줄이기 위해 비개발자 디자이너가 Figma 플러그인을 직접 제작한 사례
• Notion DB를 데이터 관리 창구로 두고, Figma에서 텍스트 레이어와 필드를 매칭해 더미 데이터를 즉시 주입하는 흐름 구성
• CSV 업로드와 AI 기반 데이터 생성/수정 기능을 추가해 팀원들이 데이터셋을 쉽게 만들고 수정할 수 있도록 개선

구조와 흐름

• 초기에는 Supabase에 JSONL 형태로 데이터를 저장하고 Figma에서 불러오는 방식 사용
• 팀원 편의성을 높이기 위해 Notion DB를 중심으로 구조 변경, Supabase는 링크 목록 관리 역할로 축소
• PRD 작성, Cursor와 Claude를 활용한 개발, 피그마 플러그인 생성 후 즉시 테스트하는 반복 과정

문제 상황

• 더미 데이터를 현실적으로 만들고 여러 화면에서 일관되게 유지하는 데 많은 시간 소요
• Figma 플러그인에서 Notion API 직접 호출 시 CORS 에러 발생
• AI가 예시 포맷을 무시하고 엉뚱한 데이터를 생성하는 문제 발생

해결 방법

• 중간 서버로 Supabase Edge Function을 두어 Notion API 요청을 전달
• 필드별 제약 조건과 구체적인 힌트를 프롬프트에 포함해 생성 규칙을 명확화
• Notion DB 기반으로 전환하고 CSV 업로드, AI 생성/수정 기능을 추가해 데이터셋 확장성과 접근성 개선