AI design

Figma Make: 정의, 작동 방식, 크레딧 및 한도(2026)7 min read

Reading Time: 6 minutesFigma Make는 Figma의 AI 프롬프트-앱 도구입니다. 이것이 무엇인지, 단계별 작동 방식, 사용할 수 있는 사람, AI 크레딧 작동 방식, 코드 게시 및 내보내기 방법, 제한 사항은 다음과 같습니다.

Figma Make complete review: features, cost, updates, with Figma and Anima logos

Figma Make: 정의, 작동 방식, 크레딧 및 한도(2026)7 min read

Reading Time: 6 minutes

Figma Make는 Figma의 AI 프롬프트-앱 도구입니다. 원하는 것을 설명하거나 Figma 디자인에서 시작하면 미리 보고, 채팅으로 다듬고, 코드로 편집하고 게시할 수 있는 작동하는 프로토타입이나 웹 앱이 구축됩니다. Figma 내부에 전용 Make 파일로 위치하므로 디자인과 라이브러리를 컨텍스트로 사용할 수 있습니다. 디자이너, 제품 관리자 및 아이디어를 사람들이 클릭할 수 있는 것으로 바꿔야 하는 모든 사람을 대상으로 합니다.

2026년 11월 1일에 Figma Make 페이지 및 Figma 도움말 센터에서 확인된 사실입니다. 계획, 크레딧 및 기능은 자주 변경되므로 구매하기 전에 Figma에서 최신 세부 정보를 확인하세요.

이 가이드에서는 Figma Make가 무엇인지, 어떻게 작동하는지, 어떤 기능이 중요한지, 누가 사용할 수 있는지, AI 크레딧 작동 방식, 게시 및 내보내기 방법, 한계가 어디에 있는지 설명합니다. 도구 중 하나를 선택하는 경우 당사의 Figma Make 대 Anima Playground 비교 대안을 다룹니다.

Figma Make는 무엇입니까?

Figma는 Figma Make를 아이디어와 기존 Figma 디자인을 기능적 프로토타입, 웹 앱 및 대화형 UI로 생생하게 구현할 수 있는 AI 기반 앱 프롬프트 도구라고 설명합니다. 실시간 미리보기 옆에서 채팅으로 작업하고 빌드하는 모든 것이 코드로 지원되므로 미리보기, 포인트 앤 클릭 편집 및 코드 자체 간에 전환할 수 있습니다.

Figma는 Config 2025에서 Make를 선보였으며 단일 구성 요소 아이디어에서 계획 모드, 코드 편집기, 백엔드, 게시 및 통합을 갖춘 전체 제품으로 성장했습니다. Figma Design와는 별개입니다. 초안에서 Make 버튼을 사용하여 다른 Figma 파일을 만드는 것과 동일한 방식으로 Make 파일을 만듭니다.

이퀄라이저가 포함된 생성된 대화형 오디오 설정 패널 옆에 재생 설정 모달을 요청하는 Figma Make 채팅 프롬프트
이미지: Figma. 프롬프트와 첨부된 디자인은 대화형 설정 패널이 됩니다.

Figma Make로 무엇을 만들 수 있나요?

  • 사용자와 함께 테스트할 흐름 또는 기능의 클릭 가능한 프로토타입입니다.
  • 전환 및 로직을 갖춘 기존 Figma 디자인의 대화형 버전입니다.
  • 데이터 및 로그인을 위한 백엔드가 포함된 작은 웹 앱 또는 내부 도구입니다.
  • 공개 URL에 게시할 수 있는 랜딩 페이지 또는 마이크로사이트입니다.

Figma Make 작동 방식, 단계별

  1. Make 파일을 만듭니다. Figma 파일 브라우저에서 초안을 열고 다음을 클릭하세요. Make 오른쪽 상단에 있습니다. 템플릿에서 시작하거나 GitHub 저장소를 복제하여 시작할 수도 있습니다.
  2. 프롬프트를 작성하세요. 채팅에서 무엇을 만들고 싶은지 설명하세요. 입력하거나 받아쓰기할 수 있습니다. 사용자, 주요 작업 및 화면을 구체적으로 설명하세요.
  3. 맥락을 추가하세요. Figma 디자인을 첨부하거나 프레임을 채팅에 붙여넣고, Figma 라이브러리(유료 플랜)에서 스타일 컨텍스트를 가져오고, 백엔드를 추가하고, MCP 커넥터를 통해 도구를 연결하거나, Make가 웹을 검색하거나 URL을 가져올 수 있도록 하세요.
  4. 통제를 원한다면 먼저 계획을 세우세요. 유료 플랜에서 플랜 모드는 코드를 작성하기 전에 편집할 수 있는 구조화된 플랜을 생성합니다.
  5. 미리보기를 검토하세요. Make는 앱을 구축하고 실시간으로 보여줍니다. 사용자가 원하는 방식으로 클릭하세요.
  6. 정제. 계속 채팅하고, 포인트 앤 편집을 사용하여 특정 요소를 변경하고, 주석을 추가하여 함께 보내거나, 코드 편집기를 열고 코드를 직접 변경하세요.
  7. 공유하거나 게시하세요. 댓글과 함께 피드백을 위해 파일을 공유하고, 미리보기를 레이어로 Figma Design에 다시 복사하고, 공개 URL에 게시하거나, 코드를 다운로드하세요.
왼쪽에 AI 채팅이 있는 Figma Make 작업 공간(미디어 플레이어를 요청하는 프롬프트, 오른쪽에 라이브 앱 미리 보기)
이미지: Figma. 왼쪽에는 채팅 메시지가 표시되고 오른쪽에는 생성된 앱의 실시간 미리보기가 표시됩니다.

Figma 문서의 실용적인 팁 중 하나는 Figma 파일에 링크를 붙여넣는 대신 프레임이나 구성 요소를 첨부하는 것입니다. Make는 URL에서 디자인을 읽지 않으며 붙여넣은 링크로 인해 예상치 못한 출력이 발생할 수 있습니다.

주요 Figma Make 기능

특징 기능
계획 모드 생성이 시작되기 전에 편집 가능한 계획을 생성하므로 먼저 의도를 명확히 할 수 있습니다.
첨부파일 모델을 안내하기 위해 디자인, 이미지, 비디오, 오디오, 텍스트 파일 및 PDF를 첨부할 수 있습니다.
포인트 앤 편집 미리보기에서 요소를 클릭하여 스타일을 변경하거나 교체하거나 변경 사항을 표시하세요.
주석 여러 요소를 선택하고 변경 사항을 설명하여 한 번에 모델에 보냅니다.
코드 편집기 생성된 코드를 보고 편집하고, 자신의 파일을 추가하고, Make가 따르는 지침을 추가하세요.
Make 키트 npm 패키지, 라이브러리 스타일 및 지침을 동기화하여 충실도가 높은 프로토타입을 생성합니다.
MCP 커넥터 문서 및 작업과 같은 외부 도구에서 컨텍스트를 가져옵니다.
버전 기록 이전 버전, AI 또는 매뉴얼을 미리 보고 즐겨찾기에 추가하거나 복원할 수 있습니다.
댓글과 모바일 프로토타입에 대한 피드백을 수집하고 휴대폰에서 확인하세요.
템플릿 및 맞춤형 기술 입증된 작업 흐름을 재사용하거나 Make에 대한 자체 지침을 패키지하십시오.
Figma Make 지정 및 편집: 노래가 재생될 때 타임스탬프를 애니메이션하도록 요청하는 프롬프트 상자가 있는 선택된 제목 요소
이미지: Figma. 지정하여 편집하면 미리보기에서 요소를 선택하고 변경을 요청할 수 있습니다.

Figma Make vs Figma 코드 레이어 vs Figma Sites

이 세 사람은 혼란스러워집니다. Figma Make는 앱을 빌드하고 게시하는 전용 파일에서 작동합니다. 코드 레이어를 사용하면 Figma Design 캔버스의 디자인 옆에서 대화형 아이디어를 탐색할 수 있습니다. 가이드를 참조하세요 Figma 코드 레이어 및 사양. Figma Sites는 Figma로 디자인된 웹사이트를 게시하기 위한 것입니다. 출력이 앱처럼 작동해야 할 경우 Make를 선택하고, 정적 디자인 옆에 대화형 요소를 원할 경우 코드 레이어를 선택하세요.

누가 Figma Make를 사용할 수 있으며 AI 크레딧 비용은 얼마입니까?

Figma Make는 Starter(제한 있음), Professional, Organization, Enterprise, 교육용(고등 교육 기관 및 부트캠프 사용자) 및 정부 요금제에서 사용할 수 있습니다. 귀하의 좌석에 따라 귀하가 할 수 있는 일이 결정됩니다:

좌석 Figma Make에서 할 수 있는 작업
가득한 모든 것: 폴더 및 팀에서 Make 파일 생성, 공유, 게시, 코드 편집기 사용 및 코드 내보내기.
데브 초안 및 내보내기 코드에서 Make를 사용해 보세요.
공동작업 및 보기 초안에서 Make를 사용해 보세요.

Make는 AI 크레딧으로 실행됩니다. 모든 좌석에는 크레딧이 포함되어 있으며 매월 재설정되며 공유하거나 롤오버할 수 없습니다. 2026년 10월 Figma 문서 기준:

플랜(전석) 월별 AI 크레딧
Starter 500(일일 한도 150 추가)
Professional 3,000
Organization 3,500
Enterprise 4,250

프롬프트에서 사용하는 크레딧 수는 선택한 모델과 작업에 따라 다릅니다. Figma의 자체 예제는 2026년 2월 기본 모델을 기반으로 약 30개 이상의 크레딧에서 글꼴을 업데이트하고 약 75개 이상의 크레딧에서 첨부된 디자인을 대화형으로 만드는 등 작은 변경을 적용했습니다. 작은 편집에는 더 가벼운 모델을 선택하고 대규모 빌드에는 계획 모드를 사용하면 크레딧을 지속하는 데 도움이 됩니다.

게시, 백엔드 및 작업 수행

게시

게시를 클릭하고 제목을 설정하면 Make가 다음과 같은 공개 URL을 제공합니다. three-random-words.figma.site. 지원되는 계획에 따라 사용자 정의 도메인을 연결할 수 있습니다. 게시된 앱은 Cloudflare를 통한 라우팅을 통해 Amazon Web Services에서 호스팅되며 기본적으로 검색 엔진에 의해 인덱싱되지 않으며 Make에는 내장 분석 대시보드가 ​​없지만 설정에서 Google Analytics ID를 추가할 수 있습니다.

게시된 웹 사이트 디자인 그리드 위에 강조 표시된 Figma Make 게시 버튼
이미지: Figma. Make 앱을 공개 URL에 게시합니다.

백엔드

데이터를 저장하고 로그인을 지원하려면 Make에 데이터베이스, 파일 저장소, 인증 및 관리 패널이 포함된 Payload 기반 백엔드를 생성하도록 요청하거나 Make 설정에서 자신의 Supabase 프로젝트를 연결할 수 있습니다.

제목 및 날짜와 함께 이벤트를 나열하고 데이터를 저장하는 백엔드를 보여주는 CMS 패널 옆의 Figma Make 앱 미리보기
이미지: Figma. CMS가 포함된 백엔드를 사용하면 Make 앱이 데이터를 저장하고 관리할 수 있습니다.

코드 내보내기

Full 또는 Dev 시트가 있는 사용자는 파일 탭의 파일 작업에서 Make 파일의 모든 파일을 ZIP으로 다운로드할 수 있습니다. 다운로드를 프로토타입 코드베이스로 취급하십시오. 로컬에서 실행하고 검토한 후 빌드하기 전에 리팩터링하십시오.

15개의 코드 변경 사항, 변경 사항 검토, PR 생성 버튼 및 새 분기 생성이 포함된 분기 메뉴를 보여주는 Figma Make 채팅 패널
이미지: Figma. Make가 생성한 코드 변경 사항을 검토하고 브랜치에서 작업합니다.

디자인을 Figma로 다시 이동

유료 플랜에서는 현재 미리보기를 디자인 레이어로 복사하여 Figma Design에 붙여넣을 수 있습니다. 레이어는 편집 가능하지만 스냅샷입니다. 대화형이 아니며 Make 파일에 연결되지 않으며 디자인 시스템에 자동으로 연결되지 않습니다.

시작하기 전에 알아야 할 Figma Make 제한

  • 대부분의 기능에는 유료 요금제에 대한 전체 좌석이 필요하며 대규모 빌드에서는 크레딧이 빠르게 소진될 수 있습니다.
  • 프로토타입과 간단한 앱용으로 제작되었습니다. 생산 소프트웨어에는 여전히 엔지니어링 검토, 테스트, 보안 및 유지 관리가 필요합니다.
  • Figma Design에서 복사된 레이어에 대한 변경 사항은 Make 파일로 다시 흐르지 않습니다.
  • 모델에 Supabase를 사용하도록 요청했는데 통합이 연결되지 않은 경우 작동하는 연결 대신 모의 코드를 생성할 수 있습니다.
  • 게시된 사이트의 경우 SEO 제어 및 분석이 최소화됩니다.
  • Figma 링크를 전달하고 파일을 읽을 것이라고 기대할 수는 없습니다. 프레임을 부착하거나 붙여 넣습니다.

실제 프런트 엔드 코드, 웹 사이트 복제 또는 Figma 외부에 있는 앱이 필요한 경우 다음과 같은 대안을 살펴보십시오. Anima Playground. 솔직하게 비교해드립니다 Figma Make 대 Anima Playground.

Figma Make에 대한 프롬프트 아이디어

사용자 이름, 작업 및 상태를 지정하는 특정 프롬프트는 더 나은 첫 번째 결과를 생성합니다. 다음을 시도해보세요:

  • “예산 앱의 3단계 온보딩 흐름을 구축하세요. 진행률 표시기를 표시하고, 각 필드의 유효성을 검사한 후 성공 화면에서 종료하세요.”
  • “첨부된 가격 프레임을 대화형 페이지로 전환하세요. 각 계획 카드에 월간 및 연간 토글과 마우스 오버 상태를 추가하세요.”
  • “티켓을 분류하는 상담원을 위한 지원 대시보드를 만듭니다. 필터, 빈 상태 및 로드 상태를 포함합니다.”
  • “손님 체크아웃, 주소 확인, 주문 확인 기능을 갖춘 모바일 체크아웃 프로토타입을 만드세요.”

Anima Playground로 작동하는 앱 구축

내보내고 배송할 수 있는 실제 웹사이트나 앱을 선호하시나요? 설명하면 Anima가 이를 구축합니다.

Figma Make FAQ

Figma Make는 무엇입니까?

Figma Make는 Figma의 AI 기반 프롬프트 앱 도구입니다. 프롬프트 또는 기존 Figma 디자인을 기능적 프로토타입, 웹 앱 또는 대화형 UI로 전환하여 채팅이나 코드에서 미리 보고 편집하고 게시할 수 있습니다.

Figma Make는 무료인가요?

Starter 플랜은 한 달에 500 AI 크레딧 및 일일 한도를 포함하여 한도가 있는 Figma Make를 무료로 탐색할 수 있습니다. 유료 플랜의 전체 좌석은 더 많은 크레딧과 팀 라이브러리 컨텍스트, 플랜 모드, 공유 및 게시와 같은 기능을 얻습니다. 계획이 변경되므로 Figma의 가격을 확인하세요.

Figma Make를 어떻게 사용하나요?

Figma 초안에서 Make를 클릭하고, 채팅에 프롬프트를 작성하고, 디자인이나 스타일 컨텍스트가 있는 경우 첨부하고, 전송하고 채팅, 지정 및 편집 또는 코드 편집기를 통해 결과를 구체화하세요. 그런 다음 공유, 게시 또는 내보냅니다.

Figma Make는 코드를 내보낼 수 있나요?

예. Full 또는 Dev 시트가 있는 사용자는 파일 탭에서 Make 파일의 코드를 ZIP으로 다운로드할 수 있습니다. 프로덕션에 사용하기 전에 검토하는 프로토타입 코드베이스로 취급하는 것이 가장 좋습니다.

Figma Make 앱을 게시할 수 있나요?

예. 전체 시트는 공개 figma.site URL에 게시할 수 있으며, 초보자 사용자는 Figma Community에도 게시하는 경우에만 공개적으로 게시할 수 있습니다. 지원되는 계획에 사용자 정의 도메인을 추가할 수 있으며 게시된 앱은 기본적으로 검색 엔진에 의해 인덱싱되지 않습니다.

Figma Make와 Anima Playground의 차이점은 무엇입니까?

Figma Make는 Figma 생태계 내에서 프로토타입과 앱을 구축합니다. Anima Playground는 프롬프트, Figma 디자인, URL 또는 이미지에서 시작하여 내보내고 전달하고 게시할 수 있는 편집 가능한 HTML 또는 React를 생성하는 독립형 작업 공간입니다. 자세한 내용은 비교를 참조하세요.

|

Co-founder & CEO