이슈 16호: 프로세스를 믿으세요 | Figma 블로그 (새 탭에서 열림)

AI와 에이전트 도구의 발전으로 디자인과 개발 workflow가 빠르게 결합되고 있다. 하지만 제작 속도보다 중요한 것은 올바른 방향을 선택하고, 실제로 가치 있는 결과물을 출시하는 판단력이다. 이 글은 Figma의 MCP, Weave, 디자인-코드 왕복 작업 등을 통해 속도·맥락·완성도를 함께 높이는 방법을 소개한다.

빠른 제작보다 중요한 출시 판단

• AI는 제품 아이디어와 결과물을 빠르게 만들어 주지만, 잘못된 방향으로 빠르게 나아갈 위험도 키운다.
• “충분히 괜찮은 결과물”에 머무르지 않고, 경쟁 제품과 차별화되는 결과를 만들려면 무엇을 출시할지 판단하는 능력이 필요하다.
• Figma의 Chief Product Officer Yuhki Yamashita는 AI 시대의 제품팀이 터널 비전을 피하고, 사용자와 제품에 실질적인 가치를 주는 방향을 검증해야 한다고 설명한다.

MCP로 디자인 맥락을 코드에 연결

• Model Context Protocol(MCP)은 에이전트형 코딩 도구가 Figma 파일과 디자인 시스템의 정보를 활용하도록 해준다.
• 코드 작성 도구가 컴포넌트, 스타일, 레이아웃 등 디자인 의도를 직접 참고할 수 있어 디자인과 구현 사이의 불일치를 줄인다.
• Figma MCP 서버는 디자인 결정이 코드가 작성되는 환경으로 전달되도록 하며, 결과적으로 실제 구현물이 원래 디자인에 더 가까워진다.
• 디자이너와 개발자는 MCP가 제공하는 맥락을 더 구조화하고 명확하게 관리할수록 에이전트의 결과 품질을 높일 수 있다.

Figma Weave를 활용한 시각 자산 제작

• Figma Weave는 영상, 사진, 일러스트레이션, 3D 효과 등 다양한 시각 작업에서 AI 이미지 생성과 정밀한 편집을 지원한다.
• 단순히 프롬프트 하나로 이미지를 생성하는 것이 아니라, 시각적 언어와 제작 규칙을 반복적으로 적용하는 workflow가 중요하다.
• 두 개의 참고 이미지만으로도 전체 자산 라이브러리를 확장할 수 있으며, 20개 이상의 workflow 템플릿이 이를 지원한다.
• 주요 작업 방식은 다음과 같다.
  • 이미지 생성
  • 기존 이미지 편집
  • 프롬프트의 구조와 의도 조정
  • 여러 자산에 일관된 스타일 적용
  • 반복 가능한 시각 제작 프로세스 구축

디자인과 코드의 왕복 작업

• 오늘날 팀은 캔버스에서 코드를 만들고, 코드에서 다시 캔버스로 돌아오는 방식으로 작업한다.
• 디자인과 개발이 분리된 순차 과정이 아니라 서로 영향을 주고받는 반복 루프로 변하고 있다.
• 실제 제품 상태를 디자인 캔버스로 가져오면 디자이너가 정적인 목업이 아니라 실제로 출시될 화면과 상호작용을 다듬을 수 있다.
• 이러한 왕복 작업은 다음 효과를 준다.
  • 디자인과 코드 사이의 간극 축소
  • 구현 결과에 대한 빠른 피드백
  • 제품 상태와 예외 상황을 디자인에 반영
  • 개발 속도를 유지하면서도 완성도 향상

실무 workflow와 생산성 팁

• Figma MCP를 활용해 비디오 export flow의 문제를 점검하고, 실제 제품 상태를 캔버스에 반영하는 사례가 소개된다.
• 팀이 빠르게 제작할수록 디자인과 코드가 서로 다른 방향으로 움직일 가능성도 커지므로, 두 환경을 연결하는 장치가 중요하다.
• Figma Make를 자주 사용하는 사용자를 위해 크레딧을 효율적으로 사용하고 작업 속도를 높이는 7가지 팁도 제공된다.
• AI 도구의 활용도는 단순 사용 횟수보다 프롬프트 품질, 맥락 제공, 반복 가능한 프로세스 설계에 좌우된다.

AI 도구를 도입할 때는 생성 속도만 평가하지 말고, 디자인 맥락이 코드까지 전달되는지, 결과를 반복적으로 개선할 수 있는지, 실제 출시 가치가 있는지를 함께 검토하는 것이 좋다. Figma MCP와 Weave 같은 도구를 활용하되, 최종 방향과 품질 기준은 사람이 명확히 관리해야 한다.