Claude Code와 MCP로 Figma 디자인 프로세스 자동화하기
중급23분2026-03-25
Claude Code와 Figma MCP를 연동하여 자연어 명령만으로 디자인 요소를 직접 생성하고 조작하는 워크플로우를 구축합니다. AI 에이전트가 자동으로 설계한 UI 프레임, 색상 변수, 오토레이아웃이 적용된 Figma 디자인 파일을 최종 결과물로 생성합니다.
이 코칭은 터미널에서 진행됩니다
오른쪽 패널에서 설치 명령어를 복사하세요이런 걸 배워요
- Figma MCP 서버를 구성할 수 있다
- AI에게 프롬프트를 통해 Figma 디자인 요소를 생성하게 할 수 있다
- 디자인 변수 및 오토레이아웃을 자동화할 수 있다
어떻게 진행해요
1. Figma MCP 서버 연결하기
2. Figma API 토큰 발급 (수동)
3. Figma 플러그인 설치
4. 기본 UI 프레임 생성 자동화
5. 디자인 시스템 변수 등록
6. 오토레이아웃 정렬 및 최종 확인
AI 튜터가 각 단계를 하나씩 안내해줄 거예요