Figmates가 Figma AI를 활용해 즐거움의 차원을 한 단계 높인 방법 | Figma 블로그

Figma 팀은 연례 April Fun Day를 위해 Figma Make, Weave, MCP를 활용해 며칠 만에 여섯 개의 미니게임을 제작하고 캔버스에 일주일간 공개했다. 이 과정에서 AI는 아이디어를 빠르게 프로토타이핑하고 시각 요소를 확장하며, 디자인과 코드 사이의 협업을 가속하는 역할을 했다. 글의 결론은 적절한 AI 도구를 사용하면 디자이너와 개발자 모두가 제작 과정에 참여하면서 더 빠르게 실험하고 완성도 높은 결과물을 만들 수 있다는 것이다.

놀이를 실험의 장으로 활용한 April Fun Day

• Figma의 April Fun Day는 매년 커뮤니티를 위한 이스터 에그와 새로운 경험을 선보이는 행사다.
• 올해는 기존의 추억을 불러일으키는 콘텐츠를 넘어, 캔버스 안에서 직접 즐길 수 있는 미니게임 플랫폼 FigCade를 제작했다.
• 팀은 평소 업무 영역을 벗어나 새로운 도구와 제작 방식을 시험하는 기회로 행사를 활용했다.
• FigCade는 단 며칠 만에 완성됐으며, 일주일 동안 사용자에게 제공됐다.

빠른 프로토타이핑과 반복

• Figma Make를 사용해 아이디어를 즉시 작동하는 프로토타입으로 만들었다.
• 예를 들어 2Fast2Figma 퀴즈의 초기 아이디어는 일요일 아침에 시작해 그날 오후 작동하는 프로토타입이 됐다.
• 아이디어 수만큼 다양한 프로토타입을 만든 뒤, 빠르게 공유하고 반응을 확인하며 방향을 조정했다.
• 제작 과정의 기본 원칙은 “먼저 보여주고, 반응하고, 정렬한 뒤, 반복한다”는 방식이었다.
• 2Fast2Figma에서는 사용자가 30초 동안 Figma 관련 질문에 최대한 많이 답하도록 구성했다.

Figma Weave를 활용한 시각적 탐색

• Figma Weave는 게임의 시각적 스타일과 질감 요소를 빠르게 탐색하는 데 사용됐다.
• 디자이너 Lesley Moon은 펠트 느낌의 커서 등 FigCade의 질감 있는 그래픽 요소를 몇 시간 만에 제작했다.
• AI로 펠트 소재 에셋을 대량 생성하면서 시도할 수 있는 시각적 테마와 질감의 범위가 넓어졌다.
• 생성 결과물을 그대로 사용하는 데 그치지 않고, 이를 기반으로 추가 제작과 수정 작업을 이어갔다.

하루 만에 제작한 홍보 영상

• Weave는 FigCade의 April Fun Day 트레일러 제작에도 활용됐다.
• 제품 관리자 Tara Nadella가 Weave에서 영상 콘셉트를 구상하고 필요한 요소를 생성했다.
• 모션 디자이너 Fifi Law는 이를 Lesley의 시각 자료와 결합해 최종 영상을 제작했다.
• 스토리보드에 필요한 요소를 빠르게 생성할 수 있었고, 트레일러 전체를 하루 만에 만들었다.

Figma MCP로 디자인과 코드를 연결

• Figma MCP 서버는 디자인 탐색 결과를 실제 코드로 구현하는 데 사용됐다.
• 개발자는 Claude와 GitHub Copilot을 Figma MCP에 인증한 뒤, 특정 디자인 컴포넌트 링크를 에이전트에 전달했다.
• 에이전트는 해당 디자인 사양을 참고해 UI 변경에 필요한 코드를 생성했다.
• 이를 통해 개발자는 디자인 맥락을 직접 확인하면서 시각적 요구사항에 맞는 코드를 작성할 수 있었다.
• 프로젝트 전반에서 팀은 디자인과 코드 사이를 반복적으로 오가며 구현 결과를 조정했다.

실용적인 결론

• 아이디어 단계에서는 Figma Make로 빠르게 여러 프로토타입을 만들고, 사용자 반응을 기준으로 선별하는 방식이 효과적이다.
• 시각적 에셋과 영상은 Figma Weave로 다양한 방향을 먼저 탐색한 뒤 사람이 다듬는 것이 적합하다.
• Figma MCP는 디자인 컴포넌트와 코드의 연결을 강화하므로, UI 중심 개발에서 특히 유용하다.
• AI를 완성품 자동 생성 도구보다 빠른 탐색과 협업을 돕는 도구로 활용할 때 가장 큰 효과를 얻을 수 있다.