Figma에서 디자인하다가 개발자를 기다린 적 있으셨나요. 프로토타입이 너무 정적이라 팀 설득에 실패한 적은요. 피그마 메이크(Figma Make)가 7월 24일 전체 유료 플랜에 정식 출시됐어요. 이제 Figma 안에서 프롬프트 몇 줄로 로그인, 데이터베이스, 실제로 동작하는 앱까지 만들 수 있어요.
이게 뭔 도구인데?
피그마 메이크는 자연어 프롬프트로 Figma 안에서 바로 작동하는 앱을 만드는 vibe coding 도구예요. 2025년 5월 Config에서 베타로 공개됐다가, 7월 24일 Professional·Organization·Enterprise 플랜 전 사용자에게 정식 출시됐어요. 개발자가 아니어도, 코드를 몰라도 돼요.
Bolt, Lovable, v0 같은 vibe coding 도구들과 결정적으로 다른 점이 하나 있어요. 다른 도구들은 Figma 파일을 "참고 자료"로 쓰지만, 피그마 메이크는 Figma 디자인 라이브러리 자체가 소스 오브 트루스예요. 팀의 컬러 팔레트, 타이포그래피, 컴포넌트 스타일이 생성된 앱에 그대로 적용돼요.
GA에서 추가된 두 가지 핵심 기능이 있어요:
- Figma 디자인 라이브러리 임포트
기존에 구축된 Figma 디자인 시스템 — 컬러, 타이포그래피, 핵심 스타일링 요소 — 을 Make 파일에 그대로 불러올 수 있어요. 팀의 브랜드 가이드가 자동 적용된 앱이 만들어지는 거예요. - Supabase 백엔드 연결
프롬프트에 데이터 저장이 필요하다고 쓰면, AI가 Supabase 연결을 자동으로 제안해요. 클릭 한 번으로 프로덕션급 Postgres DB, 이메일/소셜(GitHub·Google) 로그인, 파일 스토리지까지 연결돼요. 더미 데이터가 실제 DB로 바뀌는 거예요.
Figma 내부 팀이 직접 쓴 사례도 공개됐어요. 리서처 Rie McGwier는 수학 모델과 UI를 결합한 설문 트래픽 계산기를, PM Tara Nadella는 디자인 시스템 점검 인터페이스를 Make로 만들었어요. 프로덕트 디자이너 Kelly Hu와 Giorgio Caviglia는 그리드 레이아웃 프로토타이핑에 Make를 써서 며칠 걸리던 작업을 1.5시간 만에 끝냈어요.
Figma Make가 내부적으로 만드는 것
React + Tailwind 코드예요. Supabase 연동 시 Postgres DB, 이메일/소셜 인증, 파일 스토리지, Edge Functions, 벡터 임베딩까지 자동으로 설정돼요. 나중에 엔지니어가 받아서 확장할 수 있는 실제 코드 기반이에요.
Bolt·Lovable이랑 뭐가 다른 건데?
vibe coding 도구가 쏟아지는 시장에서 피그마 메이크의 포지션은 명확해요. 출발점이 달라요.
| Bolt / Lovable / v0 | Figma Make | |
|---|---|---|
| 디자인 소스 | AI가 새로 생성 (Figma는 참고만) | 기존 Figma 라이브러리가 소스 오브 트루스 |
| 작업 공간 | 별도 플랫폼으로 이동 필요 | Figma 안에서 완결 |
| 디자인 시스템 적용 | 별도 설정 필요 | 팀 라이브러리 자동 적용 |
| 프로토타입 공유 | 배포 URL 필요 | Figma 링크로 바로 공유 |
| 팀 협업 | 플랫폼별 별도 협업 기능 | 기존 Figma 협업 그대로 사용 |
한 시니어 UX 디자이너의 리뷰에서 나온 표현이 정확해요: "Bolt나 Replit은 코드가 제품이에요. 피그마 메이크는 디자인이 제품이에요." 디자인을 핸드오프의 시작점이 아니라 제품 자체로 보는 시각이 다른 도구들과 근본적으로 달라요.
물론 한계도 있어요. 실사용 리뷰들이 공통적으로 지적하는 것들이에요.
| 항목 | 현재 상태 |
|---|---|
| 코드 구조 | 단일 파일 — 대규모 프로덕션에 한계 |
| GitHub 연동 | 미지원 (2025년 기준) |
| Make → Figma Design 역변환 | 불가 (단방향) |
| Supabase 적합성 | 단순 CRUD는 OK, 복잡한 관계형 DB는 한계 |
| 크레딧 투명성 | 소비량 추적이 불명확하다는 사용자 지적 |
"디자인은 손실이 많은 과정이에요. 언어는 미끄러운 짐승이거든요."
— Gui Seiz, Design Director at Figma
Figma의 Design Director Gui Seiz는 "이건 마인드셋의 전환이에요. 더 재밌는 솔루션을 찾기 위해 리스크를 감수하고 실험하게 만들어요"라고 했어요. 언어로만 설명하면 팀이 오해할 수 있는 것들을 동작하는 프로토타입으로 보여주면, 의사결정이 빨라지는 거죠.
핵심만 정리: 시작하는 법
- Make 파일 열기
Figma에서 새 파일을 만들고, 파일 타입에서 "Make"를 선택해요. Professional 플랜 이상이면 바로 사용 가능해요. Starter 플랜 사용자도 Make 파일 생성은 되지만, 공유/발행은 Full Seat이 필요해요. - 프롬프트로 첫 화면 만들기
원하는 앱을 설명해요. "사용자가 목표를 입력하면 AI가 단계별 플랜을 만들어주는 앱"처럼 구체적일수록 좋아요. 레퍼런스 이미지를 첨부하면 그 스타일도 참고해줘요. - Figma 라이브러리 연결
사이드바에서 Design Libraries를 열고, 기존 팀 라이브러리를 임포트해요. 이후 생성되는 UI에 팀 컬러, 타이포, 스타일이 자동 적용돼요. - Supabase 연동 (선택)
데이터 저장이 필요한 기능을 프롬프트에 넣으면 AI가 Supabase 연결을 제안해요. 승인하면 DB, 인증, 스토리지가 자동으로 설정돼요. Supabase 계정은 무료로 만들 수 있어요. - 공유 링크로 팀 피드백 받기
Share 버튼으로 링크를 생성하면 팀원이나 클라이언트가 인터랙티브 프로토타입을 바로 체험할 수 있어요. 계정 없이도 열람 가능해요. 이 단계에서 실제 사용성 테스트도 할 수 있어요.
처음 쓸 때 알아두면 좋은 것
Professional 플랜은 월 3,000크레딧으로 프롬프트 50~70개 정도예요. 한 프롬프트에 40~60크레딧이 소모돼서, 복잡한 기능을 넣을수록 크레딧이 빠르게 줄어요. 처음엔 단순한 기능 하나부터 검증하는 게 좋아요. Figma 파일 레이어 이름이 일관성 있고 auto-layout이 잘 정리되어 있을수록 더 좋은 결과가 나온다는 팁도 있어요.
