6가지 뛰어난 Figma 제작 사례 (새 탭에서 열림)

Figma Make-a-thon에는 1만 명이 넘는 창작자가 참여해, 아이디어를 빠르게 인터랙티브 프로토타입으로 구현했다. 수상작들은 단순히 작업을 지시하는 데 그치지 않고 제품 구조와 상태 관리, 컴포넌트 상호작용까지 명확히 정의하며 AI와 반복적으로 협업했다. 특히 실험과 되돌리기를 적극 활용하면 코딩 경험이 부족해도 복잡한 도구를 발전시킬 수 있다는 점을 보여준다.

Figma Make-a-thon의 목적과 규모

• Figma Make는 콘셉트와 실제 제작 사이의 간극을 줄이고, 아이디어를 빠르게 탐색·수정할 수 있도록 설계된 도구다.
• Contra와 함께 글로벌 Make-a-thon을 개최했다.
• 1만 명 이상의 창작자가 참여했으며, 총상금은 10만 달러, 그중 대상 상금 규모는 5만 달러였다.
• 출품작에는 디자이너를 위한 Severance 테마 가상 방 탈출 게임, “Figma-Kart” 레이싱 게임 등이 포함됐다.
• 심사 기준은 다음과 같았다.
  • 아이디어의 창의성과 실행력
  • Figma Make를 활용한 프로토타입 제작의 혁신성
  • AI 프롬프트를 설계하고 활용한 방식의 영리함

작업 단위가 아니라 제품 구조를 정의하기

세바스찬 룸비의 Frame by frame SVG animator는 손으로 만든 애니메이션 제작 방식을 디지털 환경으로 옮긴 도구다.

• Figma에서 SVG를 복사해 앱에 붙여넣으면 프레임 애니메이션을 만들 수 있다.
• 완성한 애니메이션은 GIF로 내보낼 수 있다.
• 화면 구조는 크게 나뉜다.
  • 상단: 프레임을 그리는 캔버스
  • 하단: 프레임을 확인하고 새 프레임을 추가하는 영역
• 제작자는 구현 전에 다음과 같은 기술적 요소를 조사했다.
  • Figma Make에서 상태를 관리하는 방법
  • 여러 컴포넌트가 서로 상호작용하는 방식
  • 앱 구조를 어떻게 나누어야 디버깅하기 쉬운지
• 단순히 “애니메이션 앱을 만들어라”라고 요청하는 대신, 캔버스와 프레임 목록이라는 핵심 구조를 프롬프트에 포함했다.

AI와의 반복적인 대화 및 실험

• 처음에는 구체적인 프롬프트 전략 없이 AI와 대화하듯 기능을 추가했다.
• 초기 프롬프트는 두 개 정도였지만, 이후 약 80개의 프롬프트를 사용하며 계속 실험했다.
• 완성된 계획을 한 번에 전달하기보다 결과를 확인하고 다음 아이디어를 추가하는 방식으로 발전시켰다.
• 이런 방식은 빠른 프로토타이핑에는 유리하지만, 앱 구조를 이해하지 못하면 이후 버그 수정이 어려워질 수 있다.

되돌리기 기능을 안전망으로 활용하기

• Figma Make의 revert 기능은 새로운 아이디어를 부담 없이 시도하게 해준다.
• 실험 결과가 좋지 않거나 앱이 충돌하면 현재 상태를 억지로 수정하기보다 이전 시점으로 돌아갈 수 있다.
• 복잡한 버그를 해결할 때는 기존 코드를 계속 고치는 것보다, 문제가 발생하기 전 상태에서 다른 접근을 시도하는 편이 효과적일 수 있다.

비개발자에게도 필요한 기술적 이해

• 직접 코딩하지 않더라도 앱에 필요한 기본 개념을 이해하면 AI 결과를 더 잘 통제할 수 있다.
• 상태 관리, 컴포넌트 간 상호작용, 화면 구조 같은 개념을 알고 있으면 프롬프트를 구체적으로 작성할 수 있다.
• Figma Make가 코드를 생성하므로, 원하는 코드 구조와 동작 방식을 명확히 설명할수록 이후 디버깅이 쉬워진다.
• 기술적인 판단이 어렵다면 다른 AI에게 상태 관리나 아키텍처에 대한 추천을 먼저 받아볼 수도 있다.

실용적인 적용 방법

• 처음부터 모든 기능을 설명하기보다 핵심 화면 구조와 사용자 흐름부터 정의한다.
• AI가 생성한 결과를 실행해 본 뒤 작은 단위로 기능을 추가한다.
• 상태와 컴포넌트의 관계를 프롬프트에 명시한다.
• 큰 변경 전에는 되돌릴 수 있는 상태를 확보한다.
• 오류가 반복되면 현재 결과를 계속 수정하기보다 이전 버전으로 돌아가 다른 구현 방향을 시도한다.