Figma MCP 서버를 활용하면 Figma 컨텍스트를 불러와 코드베이스와 디자인 의도에 맞는 고품질 코드를 생성할 수 있습니다. MCP 서버로 Figma Design 또는 Make 파일에서 코드 리소스를 가져오고, 아이디어를 프로덕션 앱으로 전환하세요.
**주요 기능:**
• **선택한 프레임 또는 노드에서 코드 생성** - Figma에서 프레임을 선택하거나 노드 URL을 입력하면 AI 에이전트가 디자인을 코드로 변환합니다.
• **레이어에서 디자인 컨텍스트 추출** - 디자인에서 변수, 컴포넌트, 레이아웃을 추출하여 빌드가 디자인 패턴을 준수하도록 합니다.
• **Code Connect로 스마트한 코딩** - 실제 컴포넌트를 재사용하여 출력 품질을 향상시키며, MCP 서버는 Code Connect 정보를 기반으로 AI 에이전트에게 기존 컴포넌트를 안내합니다.
• **다이어그램으로 플로우 시각화** - Figma MCP 서버는 Claude 프롬프트를 플로우 차트, 간트 차트 또는 기타 다이어그램으로 FigJam에 변환할 수 있습니다.
**참고:** get_screenshot 도구는 현재 Claude 및 Claude Code에서 호출 시 Figma의 스크린샷 설명 반환으로 기능이 제한됩니다. 개발자 약관은 [여기](https://www.figma.com/legal/developer-terms/)에서 확인하세요.
도구
- generate_diagram
- get_design_context
- get_screenshot
- get_metadata
- create_design_system_rules
- get_variable_defs
- get_code_connect_map
- get_figjam
- whoami
신뢰할 수 있는 개발자의 커넥터만 사용하세요. Anthropic은 개발자가 제공하는 도구를 통제하지 않으며, 도구가 의도대로 작동하거나 변경되지 않음을 보장할 수 없습니다.
관련 커넥터
Canva 디자인 검색, 생성, 자동 완성, 내보내기
유료 광고, SEO, 이메일, 소셜, 분석을 위한 AI 마케터
정적인 양식을 대화로 전환하는 AI 컨시어지
Adobe 전문가 툴로 아이디어를 구상하고, 제작하고, 완성하세요
몇 분 만에 웹사이트 또는 웹 앱을 구축하세요! B12가 제공하는 웹사이트 생성, 디자인, 코드 작성 및 카피 제작 기능입니다. 문의: hello@b12.io
monday.com 프로젝트 관리 및 CRM으로 프로젝트, 작업, 포트폴리오, 보드, 워크플로우, 마일스톤, 종속성, 양식, 대시보드를 관리하세요.