이 논문은 Figma와 AI(특히 Claude Code)를 연결하는 새로운 도구인 figma-cli를 제안한다. 기존의 AI-Figma 연결 도구들이 일반적으로 사용하는 "MCP(Multi-Cloud Platform)" 접근 방식의 단점, 즉 과도한 토큰 소비, 컨텍스트 윈도우 오버로드, 느린 실행 속도를 지적하며, figma-cli는 이러한 문제를 해결하기 위해 보다 직접적인 연결 방식을 채택한다.

figma-cli의 핵심 방법론은 다음과 같다.

1. 직접적인 연결 (Direct Connection) 및 CLAUDE.md 기반 제어: figma-cli는 별도의 MCP 서버 없이 Claude Code와 Figma Desktop 애플리케이션 간에 직접적인 통신 채널을 구축한다. 이 통신의 핵심은 CLAUDE.md 파일에 있다. CLAUDE.md는 Claude Code가 이해하고 실행할 수 있는 모든 명령어, 일반적인 요청 매핑, 디자인 패턴 및 모범 사례를 포함하는 Markdown 파일이다. Claude Code는 사용자의 자연어 요청을 이 CLAUDE.md에 정의된 내용과 비교하여 해석하고, 이를 기반으로 Figma에서 실행할 구체적인 작업을 결정한다. 사용자가 "Create a card component"와 같이 자연어로 요청하면, Claude는 CLAUDE.md를 참조하여 해당 요청에 맞는 일련의 Figma 작업을 생성한다.
2. Figma Plugin (FigCli)을 통한 브릿징: figma-cli 프로젝트에는 Figma Desktop에서 실행되는 전용 플러그인인 FigCli가 포함되어 있다. 이 플러그인은 figma-cli 터미널 프로세스(Claude Code가 실행되는 곳)와 Figma Desktop 애플리케이션 사이의 브릿지 역할을 한다. Claude가 CLAUDE.md를 통해 생성한 명령들은 이 플러그인을 통해 Figma API에 전달되어 실제 디자인 작업이 수행된다.
3. 두 가지 연결 모드:
   • Safe Mode: 사용자가 Figma 내에서 FigCli 플러그인을 수동으로 시작하여 연결을 설정하는 방식이다. 이 모드에서는 figma-cli 백그라운드 데몬이 시작되고 플러그인과의 연결을 기다린다.
   • Yolo Mode: 고급 사용자를 위한 모드로, Figma Desktop 애플리케이션을 한 번 패치하여 직접적인 WebSocket 연결을 활성화한다. 이 모드에서는 Figma가 localhost에 무작위 디버그 포트를 열고, figma-cli가 이 포트에 직접 연결된다. 이를 통해 매 세션마다 플러그인을 수동으로 시작할 필요 없이 완전히 자동화된 연결이 가능해진다.

이러한 접근 방식은 프로토콜 오버헤드를 제거하여 다음과 같은 이점을 제공한다.

• 더 빠른 실행: 명령 실행 시간이 수 초에서 약 100-200ms로 단축된다.
• 토큰 사용량 감소: 불필요한 데이터 전송이 없어 AI의 컨텍스트 윈도우가 효율적으로 사용된다.
• 향상된 컨텍스트 유지: 컨텍스트 윈도우가 불필요한 정보로 채워지지 않아 Claude가 작업 컨텍스트를 더 잘 기억한다.
• 높은 커스터마이징 가능성: CLAUDE.md 파일만 편집하면 Claude의 새로운 기능이나 워크플로우를 추가할 수 있으며, 코드 수정이나 새로운 도구 정의가 필요 없다.

figma-cli는 Shadcn/UI 컴포넌트 전체 생성, Lucide, Material Design 등 50개 이상의 아이콘 셋 통합, 디자인 토큰 관리 및 CSS/Tailwind 형식으로 내보내기, 색상/타이포그래피/간격 감사, WCAG AA/AAA 대비 확인과 같은 접근성 분석, PNG, SVG, PDF 및 React JSX, Storybook, CSS, Tailwind config로 디자인 결과물 내보내기, FigJam 지원, 팀 라이브러리 활용 등 광범위한 기능을 자연어 명령을 통해 제공한다.