이제 FigJam은 코딩 에이전트의 화이트보드이기도 합니다 | Figma 블로그

FigJam이 코딩 에이전트의 작업을 시각화하고 팀과 함께 검토하는 협업 공간으로 확장된다. Figma는 figma-use-figjam, 확장된 generate_diagram, get_figjam 등의 MCP 도구와 스킬을 통해 에이전트가 코드베이스와 문서를 분석하고, FigJam에 아키텍처를 작성하며, 팀 피드백을 다시 구현 단계로 전달하도록 한다. 이를 통해 빠른 에이전트 개발로 발생하는 숨은 복잡성을 줄이고, 코딩 전에 설계를 검토할 수 있다는 것이 글의 결론이다.

에이전트 개발 속도와 코드 복잡성의 간극

• 에이전트 덕분에 과거 몇 분기 걸리던 기능을 몇 주 만에 구현할 수 있다.
• 그러나 사람이 충분히 검토하지 않은 에이전트 생성 PR이 쌓이면 코드베이스에 다음 문제가 생긴다.
  • 숨은 복잡성 증가
  • 기존 구조와 새로운 구현 간의 불일치
  • 팀원이 전체 시스템 변화를 파악하기 어려움
• 글의 저자는 이러한 문제를 한눈에 파악하고 논의하기 위해 텍스트 문서보다 시각적인 시스템 표현이 필요하다고 설명한다.

FigJam과 MCP 도구의 결합

• 기존 use_figma MCP 도구는 AI 에이전트가 실제 Figma 컴포넌트를 사용해 디자인을 생성하거나 수정하도록 한다.
• create_new_file은 에이전트가 새 Figma 파일 안에 디자인을 생성할 수 있게 한다.
• 새롭게 확장된 generate_diagram은 단순한 다이어그램을 넘어 다음과 같은 복잡한 시각 자료를 생성한다.
  • 시스템 아키텍처 다이어그램
  • ERD(Entity Relationship Diagram)
  • 서비스 및 데이터 관계 구조
• figma-use-figjam MCP 스킬은 에이전트가 FigJam 보드를 직접 읽고 쓸 수 있도록 한다.
• generate-project-plan 같은 워크플로 스킬은 문서, 코드베이스, 대화 내용을 시각적인 프로젝트 계획으로 변환한다.

1단계: 조사와 계획을 시각화

• 먼저 코딩 에이전트가 새 기능에 필요한 맥락을 수집한다.
  • 관련 MCP 서버 문서
  • 코드베이스 구조
  • 기존 구현 패턴
  • 영향을 받는 서비스와 파일
• 에이전트는 가능한 구현 방안과 트레이드오프를 조사한다.
• 이후 작업을 여러 개의 stacked PR로 나누고 테스트 전략을 세운다.
• 기존에는 이 결과가 긴 Markdown 문서로 남았지만, 이제 FigJam 보드로 변환할 수 있다.
• 보드에는 다음 자료를 함께 배치할 수 있다.
  • generate_diagram으로 생성한 아키텍처 및 ER 다이어그램
  • figma-use-figjam으로 작성한 노트
  • 코드 블록
  • 주석과 설계 근거
• 텍스트 중심의 계획보다 팀원이 구조와 대안을 빠르게 비교하고, 적절한 아키텍처를 논의하기 쉬워진다.

2단계: 코드 작성 전 협업

• 생성된 FigJam 보드를 팀에 공유해 구현 전에 기술적 피드백을 받는다.
• 팀원은 다이어그램 위에서 질문과 결정을 직접 남길 수 있다.
  • 특정 도구가 디자인 파일 외에 여러 파일 형식을 지원해야 하는가?
  • folderId를 입력받을 것인가?
  • 새 파일은 사용자의 Drafts 폴더에 생성할 것인가?
• 원격 팀도 회의실에서 화이트보드를 사용하는 것처럼 기술 맥락을 공유하고 논의할 수 있다.
• 에이전트가 만든 다이어그램도 사람이 검토하는 협업 산출물로 활용된다.

3단계: FigJam의 결정을 구현으로 전달

• 리뷰가 끝나면 에이전트가 보드의 결과를 다시 읽어 구현 계획을 갱신한다.
• get_figjam 도구를 사용하면 다음 정보를 코딩 환경으로 가져올 수 있다.
  • 아키텍처 다이어그램
  • 팀의 결정 사항
  • 보드의 주석과 논의 내용
• 과거처럼 다이어그램을 캡처하고 댓글을 수동으로 요약해 에이전트에게 설명할 필요가 줄어든다.
• 최종 PR에는 FigJam 보드 링크를 함께 연결해 설계 맥락을 보존할 수 있다.
• 아키텍처가 코드 작성 전에 이미 검토되므로 PR 리뷰와 병합이 더 수월해진다.

에이전트에게 구현을 맡기더라도 계획·아키텍처·팀 의사결정은 사람이 먼저 검토하는 흐름을 만드는 것이 중요하다. FigJam과 MCP 도구를 함께 사용하면 에이전트의 빠른 실행력과 팀의 설계 검토를 연결해, 코드 품질과 협업 가시성을 높일 수 있다.