피그마메이크

피그마 메이크로 만든 제품에 실제 데이터(Real Data)를 연동하는 3가지 방법

피그마 튜터2025. 12. 29.

1. 피그마 메이크 커넥터 활용

노션에 DB를 저장하고,커넥터로 데이터 베이스 연결하기

1. 데이터베이스 구축 (SQL 적용)

Supabase에 필요한 테이블을 생성하기.

가이드 요청: 구현하고 싶은 화면과 필요한 정보를 언급하며 "SQL을 포함한 가이드 만들어달라"고 요청

SQL 실행: 제공받은 SQL 코드를 복사하여 Supabase의 SQL Editor에 붙여넣고 Run 버튼 누르기.

생성 확인: 좌측의 Database 메뉴를 눌러 테이블이 정상적으로 생성되었는지 확인하기.

2. 연동 정보(Key) 확보하기

Figma Make와 연결하기 위해 Supabase의 고유 정보를 복사해야 합니다.

경로: Supabase 설정(Settings) > API 메뉴

복사할 정보:

Project URL (Data API 섹션)

anon key (API Keys 섹션)

3. 환경변수 등록 방법 (2가지)

방법 1: 직접 입력 창 요청

Figma Make 채팅창에"Supabase 시크릿키 등록할 수 있는 창 띄워달라"고 요청합니다.입력 창이 뜨면 복사해둔 Project URL과 anon key를 입력..

방법 2: Edge Functions Secrets 활용

연결된 Supabase의 Edge Functions 설정으로 이동합니다.

Secrets 메뉴에 키를 등록하고 불러오는 방식을 사용합니다.

[프로젝트 생성 및 SDK 준비]

파이어베이스 콘솔에서 새 프로젝트를 생성합니다.

프로젝트 설정 메뉴로 이동하여 Firebase SDK 추가를 선택합니다.

웹(Web) 아이콘을 클릭하고 앱을 등록한 뒤, 나타나는 설정 코드를 복사해 둡니다.

[Firestore 데이터베이스 만들기]

좌측 메뉴에서 Firestore Database를 선택하고 데이터베이스 만들기를 클릭합니다.

데이터베이스 옵션에서 Standard 버전을 선택합니다.

데이터베이스 위치는 서울(asia-northeast3)로 설정합니다.

보안 규칙 설정에서 프로덕션 모드에서 시작을 선택하고 생성을 완료합니다.

[보안 규칙 수정]

생성된 데이터베이스의 규칙(Rules) 탭으로 들어갑니다.

코드 내의 allow read, write: if false; 부분을 true로 변경하여 누구나 읽고 쓸 수 있도록 설정합니다. (개발 단계용 설정)

2. 이제 피그마 메이크에 아래 프롬프트 요청하기

원하는 작업)을 할 수 있도록 파이어베이스에 연동해줘+초기 설정 단계에서 복사해 둔 npm 코드(SDK 설정 코드) 함께 입력하기

1이 완료되면 Firestore에 저장될 데이터를 주고 데이터 데이터베이스 구조를 생성해달라고 요청하기