Figma 디자인을 코드베이스로, 코드 상태를 다시 Figma로 옮기는 Claude Code 스킬과 스타일 시스템 거버넌스 스킬입니다.
silships/figma-cli
API 키 없이 AI assistant가 로컬 Figma Desktop 앱에서 실제로 편집 가능한 디자인을 만들고 수정할 수 있게 해주는 CLI입니다.
대체할 수 있는 제품:Figma MCP
- 스타
- 1,084
- 포크
- 130
- 열린 이슈
- 29
- 마지막 커밋
- 14일 전
어떤 프로젝트인가요?
figma-cli는 Claude Code나 Cursor 같은 AI 코딩 assistant와 Figma Desktop 앱을 연결하는 명령줄 브리지입니다. assistant가 명령을 실행해 열려 있는 Figma 파일에 프레임, 컴포넌트, variants, variables를 직접 만듭니다. 따라서 결과물은 단순한 이미지가 아니라 편집 가능한 Figma 콘텐츠입니다. 연결은 Chrome DevTools Protocol을 통해 로컬에서 이뤄지므로 Figma API 토큰이 필요하지 않고 Figma의 클라우드 REST API를 거치지도 않습니다.
이 도구는 세 가지 연결 모드를 지원합니다. Yolo는 데스크톱 앱에 작은 패치를 적용하고, Browser는 앱을 수정하지 않은 채 Chromium 브라우저에서 Figma를 제어하며, Safe는 함께 제공되는 Figma 플러그인을 사용합니다. DESIGN.md 파일, Tailwind 설정, CSS 사용자 지정 속성, W3C design-tokens JSON, Storybook에서 디자인 토큰을 가져올 수 있으며, 파일의 디자인 시스템을 DESIGN.md로 내보낼 수도 있습니다. 결정론적으로 동작하는 `check` 명령은 모델을 사용하지 않고 열려 있는 파일을 저장된 스냅샷과 비교해 차이, 토큰 바인딩 누락, 기하 구조의 변경을 보고합니다.
핵심 기능
- 01AI assistant를 통해 실제 Figma 프레임, 컴포넌트, variants, variables를 만들고 수정합니다.
- 02API 키나 요청 제한 없이 로컬 Figma Desktop 앱에 CDP로 연결합니다.
- 03DESIGN.md, Tailwind 설정, CSS 변수, W3C 토큰 JSON에서 디자인 토큰을 가져옵니다.
- 04변수 모드와 별칭을 포함해 Figma 파일의 디자인 시스템을 DESIGN.md로 내보냅니다.
- 05CI에서 변경 사항과 바인딩되지 않은 하드코딩 색상을 감지하는 결정론적 `check` 명령을 제공합니다.
활용 사례
- Claude Code나 Cursor에 설명해 Figma에서 UI 화면을 만듭니다.
- 코드베이스의 브랜드 디자인 토큰을 Figma 파일과 동기화합니다.
- Figma 파일 간에 디자인 시스템을 문서화하거나 이전합니다.
- 지속적 통합에서 디자인 시스템의 변경 사항과 토큰 바인딩을 자동으로 검사합니다.
빠른 시작
- 1
Figma Desktop을 설치하고 실행합니다
- 2
GitHub에서 figma-cli 프로젝트를 다운로드하거나 clone한 뒤, 해당 폴더에서 터미널을 엽니다
- 3
CLI의 종속 항목을 설치합니다(Node 18 이상 필요)
npm install - 4
프로젝트 폴더에서 Claude Code를 열고 "connect to Figma"라고 입력합니다
사용 전 알아둘 점
- Figma Desktop을 설치하고 실행해야 합니다. 기본 모드에서는 figma.com만으로 작동하지 않습니다.
- 기본 Yolo 모드는 Figma Desktop 앱에 패치를 적용하며, macOS에서는 이를 위해 앱 관리 권한이 필요할 수 있습니다.
- Node.js 18 이상과 Claude Code 또는 Cursor 같은 AI 코딩 어시스턴트가 필요합니다.
토픽
자주 묻는 질문
- figma-cli은(는) 무엇인가요?
- API 키 없이 AI assistant가 로컬 Figma Desktop 앱에서 실제로 편집 가능한 디자인을 만들고 수정할 수 있게 해주는 CLI입니다. figma-cli는 Claude Code나 Cursor 같은 AI 코딩 assistant와 Figma Desktop 앱을 연결하는 명령줄 브리지입니다. assistant가 명령을 실행해 열려 있는 Figma 파일에 프레임, 컴포넌트, variants, variables를 직접 만듭니다. 따라서 결과물은 단순한 이미지가 아니라 편집 가능한 Figma 콘텐츠입니다. 연결은 Chrome DevTools Protocol을 통해 로컬에서 이뤄지므로 Figma API 토큰이 필요하지 않고 Figma의 클라우드 REST API를 거치지도 않습니다.
- figma-cli은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- figma-cli은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- figma-cli은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. figma-cli의 마지막 커밋은 2026년 10월 7일입니다.
- figma-cli은(는) 어디에 사용할 수 있나요?
- Claude Code나 Cursor에 설명해 Figma에서 UI 화면을 만듭니다. 코드베이스의 브랜드 디자인 토큰을 Figma 파일과 동기화합니다. Figma 파일 간에 디자인 시스템을 문서화하거나 이전합니다. 지속적 통합에서 디자인 시스템의 변경 사항과 토큰 바인딩을 자동으로 검사합니다.
- figma-cli는 어떻게 설치하나요?
- Figma Desktop을 설치하고 실행합니다 GitHub에서 figma-cli 프로젝트를 다운로드하거나 clone한 뒤, 해당 폴더에서 터미널을 엽니다 CLI의 종속 항목을 설치합니다(Node 18 이상 필요): npm install 프로젝트 폴더에서 Claude Code를 열고 "connect to Figma"라고 입력합니다
- figma-cli은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/silships/figma-cli
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
Claude Code, Cursor, Codex용 디자인 스킬로, AI 코딩 에이전트가 AI가 만든 듯한 티가 나지 않는 UI를 구현하도록 돕습니다.
Claude Code, Codex, Gemini CLI 같은 로컬 AI 코딩 에이전트를 Feishu, Slack, Telegram, Discord 등의 채팅 앱에 연결합니다.
한 번의 명령으로 웹사이트 디자인 시스템을 W3C 디자인 토큰으로 추출하는 CLI 도구입니다.
웹사이트, Git 저장소 또는 로컬 코드베이스의 디자인 시스템을 추출해 Claude Code가 참고할 파일로 저장하는 CLI
AI 에이전트가 여러 플랫폼의 콘텐츠를 읽고 검색하도록 채널을 설치·설정·상태 점검하는 CLI 및 스킬 레이어