Figma Make를 소개 (새 탭에서 열림)

Figma Make는 자연어 프롬프트를 이용해 정적인 디자인을 실제로 조작 가능한 앱과 프로토타입으로 바꾸는 기능이다. 기존 Figma 프레임의 구조와 메타데이터를 유지하면서 애니메이션, 데이터, 반응형 동작 등을 빠르게 실험할 수 있으며, 디자이너와 제품팀이 코드 작성 없이 아이디어를 검증하도록 돕는다. Figma는 이를 디자인을 대체하는 도구가 아니라, 디자인 의도를 보존한 채 탐색과 구현을 가속하는 도구로 설명한다.

디자인에서 바로 시작하는 프롬프트 기반 제작

• 사용자는 빈 화면에서 시작할 필요 없이 Figma Design의 기존 프레임을 Figma Make로 복사할 수 있다.
• 복사 과정에서 디자인의 구조와 메타데이터가 보존되어 원래 의도와 컴포넌트 계층을 유지한다.
• 이후 “설정 패널을 열고 닫을 때 애니메이션을 추가해줘”처럼 자연어로 원하는 동작을 설명한다.
• 현재 Figma Make는 Claude 3.7 Sonnet을 사용하며, 향후 다른 모델도 도입할 예정이다.

정적 디자인을 인터랙티브 프로토타입으로 전환

• 버튼, 애니메이션, 실시간 피드백 등을 추가해 정적인 화면을 실제 사용 가능한 프로토타입으로 바꿀 수 있다.
• 파일 업로드나 정보 시각화처럼 동적 데이터를 사용하는 기능도 시험할 수 있다.
• 모바일 앱 디자인을 데스크톱 화면으로 확장하는 등 다양한 폼팩터에 맞춘 반응형 디자인을 검증할 수 있다.
• 향후 서드파티 데이터베이스와 디자인 시스템 연동도 지원할 계획이다.

실시간 협업과 역할 장벽 제거

• Figma 플랫폼 안에 통합되어 있어 여러 팀원이 같은 파일에서 실시간으로 탐색하고 수정할 수 있다.
• 디자이너, 제품 관리자 등 기술 배경이 다른 구성원도 기능 추가, 데이터 적용, 인터랙션 모델 테스트에 참여할 수 있다.
• 별도의 코딩 도구나 컨텍스트 전환 없이 하나의 작업 공간에서 아이디어 정의부터 반복 개선까지 진행한다.
• 이를 통해 팀의 공통 기준점인 단일 소스 오브 트루스를 유지한다.

포인트 앤 프롬프트 방식의 정밀한 편집

• 특정 요소를 직접 선택한 뒤 변경 내용을 자연어로 지시할 수 있다.
• 예를 들어 버튼에 애니메이션을 연결하거나, 특정 요소가 스크롤에 반응하도록 만들 수 있다.
• 디자인 의도와 실제 동작 구현 사이의 간극을 줄이는 것이 목표다.
• 구조화된 편집 방식은 디자인 시스템과 컴포넌트 계층을 보존해 기능을 추가하면서도 시각적 충실도를 유지한다.

캔버스에서 코드와 게시까지 이어지는 흐름

• Figma Make는 Figma Design 및 Figma Sites와 직접 연결된다.
• 초기 아이디어를 디자인하고, 인터랙티브 프로토타입으로 검증한 뒤, 게시 가능한 사이트로 발전시키는 과정을 하나의 흐름으로 통합한다.
• 별도 도구로 작업물을 다시 만들거나 맥락을 전환할 필요를 줄인다.

디자인 가능성의 확장

• Figma Make의 목적은 디자이너의 세밀한 반복 작업을 대체하는 것이 아니다.
• 더 많은 디자인 방향을 빠르게 탐색하고, 아이디어의 실현 가능성을 조기에 검증하며, 팀에 개념을 효과적으로 전달하도록 지원한다.
• 결과적으로 디자이너가 사고와 제작 사이를 빠르게 오가면서도 디자인의 완성도와 의도를 유지하도록 돕는다.

실무에서는 초기 아이디어 검증, 인터랙션 테스트, 반응형 화면 탐색처럼 반복 비용이 큰 단계에 우선 활용하는 것이 효과적이다. 다만 생성 결과를 최종 제품 코드로 바로 간주하기보다는, 팀의 디자인 시스템과 기술 요구사항에 맞춰 검토·정제하는 프로토타이핑 도구로 사용하는 것이 적절하다.