Figma 에이전트 연동

한 줄 정의

Model Context Protocol (MCP) 표준 프로토콜을 통해 Claude Code 등의 개발 에이전트를 Figma 디자인 툴 및 컴포넌트 라이브러리와 연동하여, 디자인 생성, 다이어그램 시각화, 슬라이드 덱 작성 및 디자인 시스템 정합성 감사(audit)를 자동화하는 워크플로우다.

핵심 요지

MCP 프로토콜 기반 연동: claude mcp add figma 및 /plugin 연동 절차를 통해 에이전트와 Figma 계정 간의 인증 및 보안 채널을 확보한다.
다중 에셋 내보내기: 에이전트는 단일 세션 내에서 생성한 지식 결과물을 FigJam 다이어그램, Figma 디자인 시안, Figma Slides 덱 등 다양한 피드백 양식으로 상호 전환해 내보낼 수 있다.
디자인 시스템 정합성(Drift) 통제: 커뮤니티 스킬을 결합해 Figma 내의 컴포넌트 오버라이드, 연결 해제된 토큰, 코드 구현 컴포넌트 간의 물리적 괴리를 정적으로 분석하고 동기화한다.

Claude Code에서 Figma로 실제 레이아웃을 생성할 때 figma-generate-design 스킬을 사용하여 디자인을 추출하며, [빌드할 내용 설명] figma.com/design/new?node-id-% 프롬프트 양식을 활용한다. (출처: raw/Claude Code를 위한 Figma 스킬 완벽 가이드.md)
figma-generate-diagram 스킬을 사용하면 show a pipeline diagram for food retailer와 같이 코드베이스와 명세를 입력받아 FigJam 내에 편집 가능한 다이어그램으로 즉각 변환하여 협업 비용을 최소화한다. (출처: raw/Claude Code를 위한 Figma 스킬 완벽 가이드.md)

상세

1. 연동 및 셋업 절차

MCP 설치: 터미널에서 다음 명령어를 실행하여 Figma MCP 서버를 연동한다.
```
claude mcp add figma
```
인증 및 연동: 에이전트 세션 내에서 /plugin 명령어를 실행해 Figma 계정 연결을 허용하고, Figma Plugin 상태(Enabled)와 Figma MCP 연결 및 인증(Connected & Authenticated)을 확인한다.

2. Figma 네이티브 스킬 6종

figma-use: Figma 파일의 읽기/쓰기를 지원하는 가장 기본적인 스킬이다. 파일 내 디자인 구성 정보 획득, 컴포넌트 속성 참조에 호출된다.
figma-generate-design: 빈 Figma 파일 링크와 구현 사양 프롬프트를 토대로, 에이전트가 Figma 내에 실제 UI 디자인 프레임을 배치하고 구현한다.
figma-use-figjam: 브레인스토밍, SWOT 분석 등을 위해 FigJam 보드 내에 스티커 메모, 섹션, 커넥터, 표 등을 배치하고 구조화한다.
figma-generate-diagram: 코드베이스, 명세서, 사용자 요구사항을 FigJam 내에 플로우차트, 시퀀스, ERD, Gantt 차트 등의 편집 가능한 다이어그램으로 자동 시각화한다.
figma-use-slides: Figma Slides 덱 내의 섹션 구성, 테마 스타일링, 발표자 노트 추가 및 프레젠테이션 자동화를 수행한다.
figma-code-connect: Figma 컴포넌트와 실제 개발 소스코드의 구현 경로를 1대1 매핑하여 개발자 모드(Dev Mode)에서 코드로 바로 이동할 수 있게 연결한다 (Enterprise/Organization 플랜 필요).

3. 디자인 시스템 연계 커뮤니티 스킬 3종

apply-design-system: 신규 UI 디자인 시안을 검토하고 기존에 구축된 사내 디자인 시스템 컴포넌트 및 토큰에 연결해 일관성을 부여한다.
audit-design-system: 피그마 디자인과 실제 디자인 시스템 간의 괴리(Drift)를 감사한다. 누락된 공유 컴포넌트나 로컬 덮어쓰기(local overrides), 스타일/토큰에 연결되지 않은 상태를 점검한다.
create-voice: AI 에이전트가 작성한 UI 컴포넌트용 마크다운 명세(.md)를 입력받아, Figma 디자인 파일에 주석 프레임(annotation frames)으로 시각적인 가이드를 자동 생성한다.

Figma 스킬셋 명령어 및 파라미터 구성

figma-use-slides: [슬라이드 덱 생성 및 내보내기 지시] https://www.figma.com/slides/%link% 형식으로 Figma Slides 덱을 빌드합니다.
figma-use-figjam: /figma-use-figjam [FigJam 생성 내용] [FigJam 링크] 형식으로 SWOT 분석 및 브레인스토밍 다이어그램을 신속하게 렌더링합니다.

예시

FigJam 다이어그램 자동 생성 워크플로우:
```
/figma-use-figjam create a SWOT for OpenAI https://www.figma.com/board/new?node-id=%
```
이 명령어 실행 시 에이전트가 FigJam 보드 템플릿을 식별하고 SWOT의 4대 영역(Strengths, Weaknesses, Opportunities, Threats) 스티커를 색상별로 자동 배치한다.
Figma 슬라이드 변환:
```
/figma-use-slides turn this information into slides and post it here https://www.figma.com/slides/MY_SLIDE_ID
```
이전 단계에서 요약한 텍스트 분석 내용을 바탕으로 슬라이드 덱에 카드와 목차, 강조 도형을 생성한다.

실제 FigJam SWOT 분석 생성 예시:

/figma-use-figjam create a SWOT for OpenAI https://www.figma.com/board/new?node-id=%

실제 Figma Slides 변환 예시:

/figma-use-slides turn this information into slides and post it here https://www.figma.com/slides/%link%

LLM Wiki

탐색기