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가 생성한 결과를 실행해 본 뒤 작은 단위로 기능을 추가한다. - 상태와 컴포넌트의 관계를 프롬프트에 명시한다. - 큰 변경 전에는 되돌릴 수 있는 상태를 확보한다. - 오류가 반복되면 현재 결과를 계속 수정하기보다 이전 버전으로 돌아가 다른 구현 방향을 시도한다.
원문 읽기(새 탭에서 열림)
