techlist.io
KREN
figma

디자인 맥락, 제품을 (새 탭에서 열림)

design-systemsai-agentmodel-context-protocolcode-generationcode-connectfigma-mcp-serveride-integration

Figma는 디자인 파일에 담긴 레이아웃, 상호작용, 디자인 시스템, 코드 구조 등의 맥락을 개발 환경 전반에서 활용할 수 있도록 Figma MCP 서버와 Code Connect를 확장했다. 원격 MCP 접속으로 IDE·AI 코딩 에이전트·브라우저에서 Figma에 연결할 수 있고, Figma Make의 실제 코드와 Code Connect의 프로덕션 컴포넌트 정보도 AI가 활용할 수 있다. 이를 통해 디자인에서 코드로 전환하는 과정의 마찰을 줄이고, 더 일관되고 효율적인 코드 생성을 지원한다.

디자인 맥락을 어디서나 공유

  • AI 기반 코드 생성은 프롬프트만으로는 충분하지 않으며, 디자인 시스템 구조와 코드베이스 작성 방식 같은 추가 맥락이 필요하다.
  • Figma 파일에는 반응형 레이아웃, 인터랙션 세부사항, 시각적 프로그램 등 단순한 이미지 이상의 정보가 담겨 있다.
  • Figma는 이러한 팀의 축적된 디자인·개발 지식을 Figma 캔버스 밖에서도 사용할 수 있도록 만드는 것을 목표로 한다.

원격 Figma MCP 서버

  • 기존에는 Dev Mode의 로컬 MCP 서버를 통해 개발자의 편집기에서 Figma 디자인 정보를 가져왔다.
  • 새 원격 접속 기능을 사용하면 데스크톱 앱 없이도 다음 환경에서 Figma에 연결할 수 있다.
    • IDE
    • AI 코딩 에이전트
    • 브라우저 기반 AI 모델
  • Android Studio, Replit, Warp 등 다양한 파트너 도구에서 Figma 디자인 맥락을 사용할 수 있다.
  • Figma MCP 파트너 카탈로그에서 사용하는 IDE나 에이전트를 찾아 쉽게 연동할 수 있다.
  • 디자인 시스템 규칙을 생성하는 기능 등 MCP 서버의 기능과 파트너 지원을 계속 확대할 예정이다.
  • Affirm은 MCP 서버를 사용해 주요 제품 플로우를 이틀 이내에 재구축했으며, 개발 속도가 “몇 배가 아니라 orders of magnitude” 향상됐다고 평가했다.

Figma Make와 MCP의 연결

  • Figma Make 파일을 MCP 클라이언트에서 사용하면 AI 모델이 렌더링된 프로토타입이나 이미지만 보는 것이 아니라 underlying code를 직접 확인할 수 있다.
  • MCP 서버는 Make 파일의 코드를 색인하고, 사용자가 요청한 파일이나 코드 일부를 선택적으로 제공한다.
  • 개발자와 AI 에이전트는 다음 방식으로 Make의 정보를 활용할 수 있다.
    • 특정 파일의 코드를 직접 재사용
    • 구현 로직과 디자인 패턴을 참고
    • 기존 코드 구조를 기반으로 새로운 기능 생성
  • Anthropic, Cursor, Windsurf, VS Code와 협력해 해당 기능을 제공한다.
  • 향후에는 외부 파트너의 MCP 서버를 Figma Make 안에서도 연결할 계획이다.

Code Connect의 컴포넌트 매핑 개선

  • Code Connect는 Figma 디자인 컴포넌트와 실제 코드베이스의 컴포넌트를 연결하는 기능이다.
  • 기존에는 터미널에서 매핑을 수동으로 설정해야 했지만, 이제 Figma 내부에서 직접 매핑할 수 있다.
    • Figma에서 컴포넌트 탐색
    • 연결할 코드와 파일 선택
    • 연결 완료 또는 누락된 항목 확인
  • 기존 Code Connect CLI도 계속 사용할 수 있으며, 다양한 프레임워크에 대해 속성(prop)과 변형(variant)이 매핑된 프로덕션 코드 스니펫을 Dev Mode에 제공한다.
  • MCP 서버와 Code Connect를 함께 사용하면 AI 에이전트가 다음 정보까지 얻을 수 있다.
    • 실제 코드 컴포넌트의 위치
    • 컴포넌트 사용 지침
    • 디자인과 코드 간의 연결 관계
  • 내부 평가와 초기 고객 테스트에서 다음과 같은 개선이 확인됐다.
    • 더 일관된 코드 생성
    • 코드 파일 탐색 속도 향상
    • AI 에이전트의 토큰 사용량 감소

연동 검토와 사용량 제한

  • Figma는 외부 도구와의 연결이 확대되는 만큼 연동의 안정성과 기반 시스템도 강화하고 있다고 밝혔다.
  • 글에서 해당 섹션의 세부 내용은 제공된 본문이 중간에 끊겨 있어 확인할 수 없다.

Figma를 사용하는 개발팀이라면 원격 MCP 서버로 IDE나 AI 에이전트에 디자인 정보를 연결하고, Code Connect로 핵심 UI 컴포넌트를 실제 코드와 매핑하는 방식이 효과적이다. 특히 Figma Make를 프로토타이핑 도구에 그치지 않고 코드 재사용과 AI 기반 구현의 출발점으로 활용할 수 있다는 점이 이번 업데이트의 실질적인 변화다.