Figma와 Claude Code를 연결

 

Figma와 Claude Code를 연결하는 MCP 기반 Figma Skill 총정리

Figma 디자인과 AI 코딩 도구인 Claude Code를 연결해 주는 MCP(Model Context Protocol) 기반의 주요 Figma Skill 기능들을 정리해 드립니다.

이 구조를 활용하면 Figma와 Claude Code가 서로 유기적으로 연동되어 디자인 생성부터 코드 구현까지의 워크플로우를 대폭 단축시킬 수 있습니다.

🛠️ 핵심 연결 구조

• Figma <<<< MCP (연결장치) >>>> Claude Code

MCP(Model Context Protocol)는 Figma의 디자인 자산과 Claude Code의 AI 코딩 엔진을 실시간으로 이어주는 다리 역할을 합니다.

📌 Figma Skill 주요 기능 상세

1. 캔버스 제어 및 파일 생성

• figma-use (캔버스 쓰기·조작) : Figma 캔버스 상의 요소를 직접 조작하고 작성합니다.
• create-new-file (새 파일 생성) : 필요에 따라 새로운 Figma 디자인 파일을 즉시 생성합니다.

2. 디자인 및 라이브러리 생성

• generate-design (디자인 생성) : 프롬프트 및 명령어를 바탕으로 Figma 내에서 디자인 레이아웃을 자동 생성합니다.
• generate-library (라이브러리 생성) : 재사용 가능한 디자인 시스템 요소 및 라이브러리를 생성합니다.

3. 코드 구현 및 디자인 시스템 연동 

• implement-design (디자인 $\rightarrow$ 코드 구현) : Figma에 완성된 디자인을 실제 개발 코드(React, HTML/CSS 등)로 전환합니다.
• code-connect (컴포넌트 코드 연결) : Figma UI 컴포넌트와 실제 개발 코드베이스의 컴포넌트를 1:1로 매핑하여 연결합니다.
• design-system-rules (디자인 시스템 규칙) : 브랜드 스타일 가이드, 스페이싱, 컬러 등 디자인 시스템의 규칙을 AI가 인식하도록 적용합니다.

Figma MCP 연결장치를 통해 Claude Code와 Figma가 직접 소통하며, 디자인 생성부터 코드 변환까지 한 번에 자동화할 수 있습니다

Figma로 그려둔 초안을 Claude Code에서 json코드로 변환한다음  Claude를 이용해 자유롭게 편집한다음 다시 Figma로 디자인을 올려 완성시키는 작업입니다.

 

 

이를 사용하기 위해 아래 링크 들을 설치해야합니다....

 

 

https://code.claude.com/docs

Overview - Claude Code Docs

 

https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server

Claude Code and Figma: Set up the MCP server

 

https://www.figma.com/ko-kr/community/ai-skills?resource_type=skills