arinspunk/claude-talk-to-figma-mcp
Developer tools이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기
arinspunk/claude-talk-to-figma-mcp는 [[T0]에서 임포트한 MCP 서버 후보입니다.
개요
arinspunk/claude-talk-to-figma-mcp는 [[T0]에서 임포트한 MCP 서버 후보입니다.
개요(AI 번역)
AI 에이전트가 Figma 디자인을 읽고 분석하며 수정할 수 있도록 하세요.
좋아하는 에이전트 도구와 함께 작동합니다:
- 클로드 데스크톱
- 클로드 코드
- 커서
- 반중력
- 윈드서핑
- VS 코드 + GitHub Copilot
- 클라인
- 루 코드
👩🏽 💻 누구를 위한 거야
UX/UI 팀
반복적인 디자인 작업을 자동화하고 수작업 없이 브랜드 일관성을 유지하세요:
- 자동 접근성 감사 - 대비 문제를 몇 초 만에 감지하고 수정
- 대량 스타일 업데이트 - 문서 전체의 색상, 타이포그래피, 간격을 단일 명령어로 변경할 수 있습니다
- 시각적 계층 분석 - 디자인 구조에 대한 즉각적인 피드백 받기
개발자
설계에서 직접 운영 준비가 된 코드를 생성하세요:
- React/Vue/SwiftUI 컴포넌트 - 디자인에서 코드까지 한 단계로 진행
- 디자인 토큰을 사용하는 코드 - 디자인과 개발을 동기화 유지하기
- 인수분 마찰 감소 - 설계팀과의 상호 고용 반복 감소
주요 장점: Figma 공식 MCP가 개발자 모드 라이선스를 요구하는 것과 달리, 이 MCP는 **모든 Figma 계정(무료 계정도 포함)에서 작동합니다.
💡 실제 사용 사례
접근성:
이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요.
README
원문 README의 일부입니다. 원문 보기.
Claude AI Agents Talk to Figma MCP
Enable your AI agents to read, analyze, and modify Figma designs.
Works with your favorite agentic tools:
👩🏽💻 Who it’s for
UX/UI Teams
Automate repetitive design tasks and maintain brand consistency without manual effort:
- Automated accessibility audits - Detect and fix contrast issues in seconds
- Bulk style updates - Change colors, typography, or spacing across the entire document with a single command
- Visual hierarchy analysis - Get instant feedback on your design structure
Developers
Generate production-ready code directly from designs:
- React/Vue/SwiftUI components - From design to code in one step
- Code with design tokens - Keep design and development in sync
- Reduce handoff friction - Fewer back-and-forth iterations with the design team
Key advantage: Unlike Figma’s official MCP which requires a Dev Mode license, this MCP works with any Figma account (even free ones).
💡 Real-world use cases
Accessibility:
“Find all text with contrast ratio <4.5:1 and suggest colors that meet WCAG AA”
Rebranding:
“Change #FF6B6B to #E63946 in all primary buttons throughout the document”
Design analysis:
“Analyze the visual hierarchy of this screen and suggest improvements based on design principles”
Developer handoff:
“Generate the React component for ‘CardProduct’ including PropTypes and styles in CSS modules”
⚡️ Quick installation
Setup: 5 minutes | First automation: 2 minutes
Requirements
- Node.js installed
- Figma Desktop
- AI client:
Step 1: Install and start the websocket
Enables the Agent to send commands to Figma.
설치
npx -p claude-talk-to-figma-mcp@latest claude-talk-to-figma-mcp-server설정
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": ["-p", "claude-talk-to-figma-mcp@latest", "claude-talk-to-figma-mcp-server"]
}
}
}