Claude Code와 Figma MCP를 활용한 디자인 자동화 가이드

커뮤니티 반응

작성자가 직접 경험한 상세한 튜토리얼과 한계점을 공유하여 긍정적인 반응을 얻었으며, 특히 디자인 시스템 정리의 중요성에 대해 공감대가 형성되었다.

주요 논점

01찬성다수

단순 반복적인 스타일 교체 및 변수 적용 작업에서 AI 에이전트가 압도적인 효율성을 제공한다.

02중립소수

레이아웃 배치 시 오토 레이아웃을 무시하는 등 구조적 결함이 발생하므로 전적으로 신뢰하기는 어렵다.

합의점 vs 논쟁점

합의점

AI의 출력 품질은 입력되는 디자인 시스템의 정리 상태(이름 규칙, 토큰 일관성 등)에 정비례한다.
Figma MCP 연결만으로는 부족하며 figma-use와 같은 구체적인 스킬 파일(SKILL.md) 설정이 필수적이다.

논쟁점

유료 플랜 사용자에게만 쓰기 권한이 제공되는 점과 향후 사용량 기반 과금 정책에 대한 부담이 존재한다.

실용적 조언

디자인 시스템의 Hex 값을 변수로 교체할 때 '/figma-use' 접두사를 사용한 프롬프트를 활용하여 시간을 단축하라.
에이전트가 레이아웃을 깨뜨린다면 이는 디자인 시스템의 컴포넌트 명명이나 변수 문서화가 부족하다는 신호로 받아들이고 시스템을 먼저 정비하라.

섹션별 상세

Figma MCP 설정 및 스킬 설치 과정을 단계별로 제시했다. 터미널에서 공식 Figma 플러그인을 설치한 후 Claude Code 데스크톱 앱에서 figma-use 및 figma-generate-design이라는 두 가지 핵심 SKILL.md 파일을 업로드하여 에이전트의 행동 양식을 정의해야 한다. 이 과정이 완료되어야 에이전트가 단순한 컨텍스트 읽기를 넘어 캔버스 위에서 직접적인 디자인 작업을 수행할 수 있다.

bash

claude plugin install figma@claude-plugins-official

Claude Code 터미널에서 Figma MCP 플러그인을 설치하는 명령

디자인 시스템의 발행(Publish) 여부가 AI의 출력 품질을 결정한다. 에이전트는 발행된 라이브러리만 읽을 수 있으며, 발행되지 않은 컴포넌트를 사용할 경우 시스템과 연결되지 않은 일반적인 결과물만 생성된다. 실제 테스트에서 하드코딩된 Hex 값을 라이브러리의 컬러 변수로 매칭하여 20분 분량의 수작업을 단 한 번의 프롬프트로 해결한 사례가 확인됐다.

AI 에이전트의 레이아웃 이해도 측면에서 한계점이 발견됐다. 특정 섹션에 카드 컴포넌트를 배치하도록 지시했을 때, 에이전트가 부모 프레임의 Auto Layout 설정을 무시하고 절대 좌표(Absolute Position)로 요소를 배치하여 레이아웃 구조를 깨뜨리는 현상이 발생했다. 이는 복잡한 레이아웃 구조 내에서의 정교한 배치 작업에는 여전히 인간의 검토가 필요함을 시사한다.

text

/figma-use apply my color variables to the frames of this section [section link]

설치된 스킬 접두사를 사용하여 특정 섹션에 컬러 변수를 적용하도록 지시하는 프롬프트 예시

디자인 완료 후 Expo Coding CLI를 연동하여 실제 앱으로 구현하는 확장성을 강조했다. Claude Code 내에서 크로스 플랫폼 웹 및 앱(iOS/Android) 빌드 명령을 실행하여 디자인 결과물을 즉시 코드로 변환하고 배포하는 전체 파이프라인 구축이 가능하다. 출력 품질이 낮을 경우 이는 에이전트의 문제라기보다 디자인 시스템의 명명 규칙이나 토큰 관리의 불일치 때문일 가능성이 높다는 분석이 제시됐다.

용어 해설

모델 컨텍스트 프로토콜(MCP): — AI 모델이 외부 도구, 데이터 소스 및 서비스와 표준화된 방식으로 상호작용할 수 있도록 Anthropic에서 공개한 개방형 프로토콜이다. 이를 통해 에이전트는 로컬 파일이나 외부 API의 컨텍스트를 읽고 활용할 수 있다.
피그마 유즈(figma-use): — Claude Code 내에서 Figma 캔버스에 직접적인 쓰기 및 편집 권한을 부여하는 기술적 스킬이다. 기존의 읽기 전용 접근을 넘어 디자인 시스템의 변수나 스타일을 실제 캔버스 요소에 적용할 수 있게 한다.
오토 레이아웃(Auto Layout): — Figma에서 요소의 크기가 변함에 따라 프레임 내의 레이아웃을 자동으로 조정해주는 기능이다. AI 에이전트가 요소를 배치할 때 이 설정을 무시하면 디자인의 반응형 구조가 깨질 수 있다.

언급된 도구

Claude Code추천

터미널 기반 AI 코딩 및 에이전트 실행 환경

Figma MCP추천

Figma 데이터와 AI 모델 간의 컨텍스트 연결 프로토콜

Expo추천

디자인된 앱을 실제 코드로 빌드하고 배포하기 위한 프레임워크

언급된 리소스

문서Figma Community Skills