awdr74100/figwright

해결하는 문제

Figwright는 AI 코드 에이전트(Claude Code 또는 Cursor 등)와 Figma 사이의 양방향 브리지 역할을 합니다. 에이전트가 디자인 데이터를 읽어 코드를 생성할 뿐만 아니라, Figma 캔버스를 직접 편집하고 작성할 수 있게 하여 유료 Figma Dev Mode 라이선스가 필요 없도록 합니다.

작동 방식

이 프로젝트는 MCP(Model Context Protocol) 서버와 동반되는 Figma 플러그인으로 구성됩니다. MCP 클라이언트(AI 에이전트)는 stdio를 통해 서버와 통신하고, 서버는 로컬 WebSocket을 통해 명령을 Figma 플러그인에 전달합니다. 이 구조로 모든 데이터는 로컬 머신에 머무르게 됩니다. 코드 생성의 정확도를 높이기 위해 "프로바이더 우선" 접근 방식을 사용하며, 사용자의 기존 코드베이스 컴포넌트와 토큰에 Figma 데이터를 매핑하고, 일반적인 마크업을 사용하지 않습니다.

대상 사용자

Figma에서 디자인을 구현하거나 프로토타입을 만들 때 AI 에이전트를 사용하는 개발자 및 디자이너. 특히 공식 Dev Mode MCP 도구의 유료 대안을 찾는 사용자에게 적합합니다.

주요 특징

• 양방향 기능: 캔버스에서 레이아웃, 스타일, 변수 검사(읽기) 및 프레임, 텍스트, 오토레이아웃 생성(쓰기)을 포함한 총 112개의 도구 제공.
• 프로바이더 우선 코드 생성: 사용자의 특정 프레임워크와 스타일링 시스템을 감지하여 기존 컴포넌트와 아이콘을 재사용.
• 로컬 우선 보안: 모든 통신은 로컬 루프백을 통해 이루어져 디자인이 외부 서버로 전송되지 않습니다.
• 확장 가능한 기능: figma-codegen 및 figma-build와 같은 설치 가능한 "스킬"을 제공하여 특정 워크플로우를 조율합니다.
• 무료 계정 호환: 유료 Dev Mode 라이선스 없이 무료 Figma 계정에서도 작동합니다.