Figwright

무료 양방향 MCP 서버와 플러그인으로 AI 코딩 에이전트를 Figma에 연결하세요. 에이전트가 디자인을 코드로 읽고 캔버스에 직접 디자인을 작성할 수 있습니다 — 유료 Dev Mode 시트는 필요 없습니다.

개요

Model Context Protocol (MCP) 서버 (@figwright/mcp) 와 함께 제공되는 Figma 플러그인을 결합합니다. 이를 통해 AI 에이전트(Claude Code, Cursor, Codex, 모든 MCP 클라이언트)는 Figma 파일에 대한 양방향 액세스를 얻을 수 있습니다.

• 읽기: Figma 선택 영역 → 프레임워크 인식 코드(React, 스타일링 시스템, 기존 컴포넌트/토큰/아이콘 재사용) 생성.
• 쓰기: 캔버스에 → 프레임, 텍스트, 오토 레이아웃, 스타일, 변수, 컴포넌트, 페이지, 모션 애니메이션 생성/편집.

양방향을 모두 다루는 121개의 MCP 도구와 더불어 에이전트에 정확한 디자인 컨텍스트를 제공하는 접지 도구(get_design_context, component_map, token_map)도 포함됩니다.

차별점

• 무료 티어 – 공식 Dev Mode MCP는 유료 시트가 필요하지만, Figwright는 Figma의 무료 플랜에서 실행됩니다.
• 양방향 – 읽기 전용이 아닙니다. 에이전트가 디자인을 구축하고 편집할 수 있습니다.
• 프로바이더 우선 코드 생성 – 실제 스택을 감지하고 기존 컴포넌트와 스타일을 재사용하여 일반적인 마크업을 생성하지 않습니다.
• 멀티 에이전트 – 리더/팔로워 선출을 통해 여러 에이전트가 서로 다른 Figma 파일을 동시에 작업할 수 있습니다.
• 프라이버시 – 모든 것이 로컬에서 실행됩니다: 서버, 릴레이, 플러그인. 디자인이 기계를 벗어나지 않습니다.

작동 방식

1. MCP 클라이언트가 서버를 stdio로 시작합니다.
2. 서버는 로컬 WebSocket (127.0.0.1:3055)을 통해 Figma 플러그인으로 릴레이합니다.
3. 플러그인은 편집기 내에서 Figma Plugin API 호출을 실행합니다.

보안 게이트(Host/Origin 헤더)는 웹 페이지가 로컬 릴레이에 도달하지 못하게 방지합니다.

대상

AI 코딩 에이전트를 사용하여 디자인을 구현하거나 UI 코드를 생성하는 개발자와 디자이너를 대상으로 하며, 특히 Dev Mode 구독 없이 무료 양방향 Figma 통합을 원하는 사람들에게 적합합니다.