디자이너가 Figma에서 프레임을 그리고, 개발자가 코드를 작성합니다. 이 흐름은 항상 design-to-code 방향이었습니다. Figma의 Dev Mode MCP도 이 방향을 따랐습니다 — 디자인 정보를 추출하여 코드 생성을 돕는 것이었죠.
2026년 3월 24일, Figma가 방향을 뒤집었습니다. AI 에이전트가 Figma 캔버스에 직접 디자인을 생성하고 수정할 수 있는 use_figma MCP를 오픈 베타로 공개했습니다. code-to-design 시대의 시작입니다.
use_figma MCP란
use_figma MCP는 AI 에이전트가 Figma 캔버스에 네이티브 콘텐츠를 직접 생성하고 수정할 수 있게 해주는 MCP(Model Context Protocol) 도구입니다. 기존 Dev Mode MCP가 “읽기 전용”이었다면, use_figma는 **“읽기 + 쓰기”**를 지원합니다.
에이전트가 할 수 있는 작업은 다음과 같습니다.
- 프레임, 컴포넌트 생성 및 편집
- 변수(Variables) 관리 및 스타일 적용
- 텍스트, 이미지 배치
- 오토 레이아웃 설정
- Variant 구성
- 기존 디자인 시스템과의 통합
핵심은 사용자의 디자인 시스템을 그대로 활용한다는 점입니다. AI가 임의로 디자인을 만드는 것이 아니라, 팀이 정의한 컴포넌트와 토큰을 기반으로 작업합니다.
sequenceDiagram
participant A as AI 에이전트<br/>(Claude Code 등)
participant M as Figma MCP 서버
participant F as Figma 캔버스
A->>M: use_figma 도구 호출<br/>(디자인 생성 요청)
M->>F: Figma API<br/>(캔버스 쓰기 명령)
F-->>M: 생성 결과 반환
M-->>A: 구조화된 응답
A->>M: search_design_system<br/>(컴포넌트 검색)
M-->>A: 재사용 가능한 컴포넌트 목록
A->>M: use_figma<br/>(컴포넌트 배치)
M->>F: 캔버스에 컴포넌트 배치주요 도구 구성
use_figma MCP 서버는 여러 도구를 제공합니다. 각 도구는 명확한 역할을 가집니다.
| 도구 | 역할 |
|---|---|
use_figma | 일반 목적의 캔버스 쓰기 도구 |
generate_figma_design | 웹 페이지를 Figma 디자인으로 변환 |
get_design_context | 구조화된 디자인 표현 생성 (React + Tailwind 등) |
get_variable_defs | 디자인 토큰과 스타일 추출 |
search_design_system | 라이브러리에서 재사용 가능한 컴포넌트 검색 |
get_design_context는 기존 디자인의 구조를 코드 형태로 추출합니다. use_figma는 반대로 AI가 생성한 결과를 캔버스에 반영합니다. 이 두 도구의 조합이 양방향 워크플로우의 핵심입니다.
설치 및 설정
Claude Code
가장 간단한 방법입니다. 터미널에서 한 줄이면 됩니다.
claude plugin install figma@claude-plugins-official설치 후 Figma 계정 인증을 진행하면 바로 사용할 수 있습니다.
VS Code
- Command Palette를 엽니다 (
⌘ Shift P) - **“MCP: Add Server”**를 선택합니다
- HTTP를 선택합니다
- URL에
https://mcp.figma.com/mcp를 입력합니다
Cursor
추천 방법은 커맨드를 사용하는 것입니다.
/add-plugin figma설정에서 수동으로 MCP 서버를 추가할 수도 있습니다.
https://mcp.figma.com/mcp에 접속하고, Desktop 방식은 Figma 데스크톱 앱을 통해 로컬에서 실행합니다.
지원하는 AI 에이전트/IDE
Claude Code 외에도 다양한 환경에서 사용할 수 있습니다.
- OpenAI Codex, Copilot CLI
- Cursor, VS Code
- Augment, Factory, Firebender, Warp
- 기타 MCP 호환 클라이언트
Skills: AI에게 디자인 규칙 가르치기
use_figma MCP의 가장 흥미로운 기능은 Skills 프레임워크입니다. 마크다운 파일로 에이전트의 행동을 정의하는 가이드를 작성할 수 있습니다. 코딩이 전혀 필요 없습니다.
Skills의 구조
# 스킬 제목
## When to use
이 스킬이 적용되어야 하는 상황을 설명합니다.
## Instructions
에이전트가 따라야 할 단계별 지침을 작성합니다.
## Examples
구체적인 입력/출력 예시를 제공합니다.
## Edge Cases
예외 상황과 처리 방법을 정의합니다.Skills는 팀의 디자인 컨벤션과 워크플로우를 재사용 가능한 지침으로 패키징합니다. “버튼은 항상 8px 패딩을 사용해야 한다”, “다크 모드에서는 이 색상 토큰을 써야 한다” 같은 규칙을 자연어로 정의하면 됩니다.
커뮤니티 Skills 예시
Figma는 출시와 함께 커뮤니티와 공동 개발한 Skills를 공개했습니다.
| Skill | 용도 |
|---|---|
figma-generate-library | 코드베이스에서 디자인 시스템 라이브러리 자동 구축 |
figma-generate-design | 기존 컴포넌트를 사용한 새 스크린 생성 |
apply-design-system | 디자인 시스템 규칙 자동 적용 |
sync-figma-token | 코드와 Figma 간 디자인 토큰 동기화 |
실전 활용 시나리오
1. 자동 컴포넌트 라이브러리 구축
코드베이스에 React 컴포넌트가 있지만 Figma 라이브러리는 없는 상황. AI 에이전트에게 코드를 읽고 대응하는 Figma 컴포넌트를 생성하라고 요청할 수 있습니다.
"src/components 디렉토리의 Button, Card, Modal 컴포넌트를 분석해서
Figma 라이브러리에 동일한 구조의 컴포넌트를 생성해줘.
variant도 코드와 동일하게 맞춰줘."2. 디자인-코드 동기화
제품이 진화하면서 코드는 업데이트되었지만 Figma 디자인은 이전 버전에 머물러 있는 경우. AI 에이전트가 코드 변경사항을 감지하고 Figma를 자동으로 업데이트합니다.
3. 접근성 주석 자동 생성
UI 디자인에서 접근성 관련 정보를 자동으로 추출하고, Figma 캔버스에 접근성 주석 레이어를 생성합니다. 탭 순서, 색상 대비, ARIA 레이블 등을 시각적으로 표시합니다.
4. 스크린 배리언트 대량 생성
하나의 기본 스크린에서 다양한 상태(로딩, 에러, 빈 상태, 데이터 있는 상태)를 자동으로 생성합니다. 기존 디자인 시스템의 컴포넌트를 재사용하므로 일관성이 보장됩니다.
Dev Mode MCP와의 차이점
Figma에는 이미 Dev Mode MCP가 있었습니다. 두 도구의 역할은 명확히 다릅니다.
| 구분 | Dev Mode MCP | use_figma (AI Agent Design) |
|---|---|---|
| 방향 | Figma → 개발 환경 | AI Agent → Figma 캔버스 |
| 주용도 | 디자인 정보 추출, 코드 생성 | 네이티브 Figma 콘텐츠 생성/수정 |
| 데이터 흐름 | Design-to-code | Code-to-design |
| Skills | 선택사항 | 핵심 기능 |
| 캔버스 수정 | 불가 (읽기 전용) | 가능 (읽기 + 쓰기) |
두 도구를 함께 사용하면 진정한 양방향 워크플로우가 완성됩니다. get_design_context로 현재 디자인을 파악하고, 코드를 구현하고, 다시 use_figma로 디자인을 업데이트하는 순환 구조입니다.
flowchart LR
A["Figma 디자인"] -->|"get_design_context<br/>(Dev Mode MCP)"| B["코드 구현"]
B -->|"use_figma<br/>(AI Agent Design)"| C["Figma 업데이트"]
C -->|"변경사항 반영"| A레이트 리미트와 가격
현재 오픈 베타 기간으로 무료로 사용할 수 있습니다. 다만 플랜별 레이트 리미트가 적용됩니다.
| 플랜 | 일일 호출 한도 | 분당 한도 |
|---|---|---|
| Enterprise | 600 calls | 최고 등급 |
| Pro / Organization (Full/Dev) | 200 calls | 15-20/분 |
| Starter (Full/Dev) | 제한적 | 10/분 |
| View / Collab (모든 플랜) | 월 6 calls | - |
주의사항과 제한사항
use_figma MCP를 도입하기 전에 알아야 할 점들이 있습니다.
- 디자인 시스템이 정리되지 않은 상태에서는 기대 이하의 결과가 나올 수 있습니다. 컴포넌트 이름이 모호하거나, 변수 정의가 불완전하면 AI도 부정확한 결과를 냅니다.
- 베타 단계입니다. 기능이 변경되거나 제거될 수 있습니다. 프로덕션 워크플로우에 전면 도입하기보다는 점진적으로 시작하는 것을 권장합니다.
- 복잡한 인터랙션은 아직 제한적입니다. 정적 레이아웃과 컴포넌트 배치에 강하지만, 복잡한 프로토타이핑 인터랙션을 AI가 완벽히 구현하기는 어렵습니다.
- 팀 워크플로우에 Skills를 먼저 정의하세요. Skills 없이 사용하면 AI가 팀 컨벤션을 알 수 없어 일관성 없는 결과가 나올 수 있습니다.
마무리
Figma 캔버스가 AI 에이전트에게 열렸습니다. 이것은 단순한 기능 추가가 아니라, 캔버스의 역할이 “전달물”에서 **“라이브 아티팩트”**로 전환되는 패러다임 변화입니다.
몇 주 전 Google Stitch가 AI 네이티브 디자인의 가능성을 보여줬다면, Figma는 기존 디자인 생태계 위에서 AI를 통합하는 방향을 택했습니다. 이미 구축된 디자인 시스템, 라이브러리, 팀 워크플로우를 AI가 그대로 활용한다는 점이 실무 도입의 가장 큰 강점입니다.
지금 할 수 있는 것들:
- 팀의 디자인 시스템 정리 — 명확한 이름, 변수 정의, 컴포넌트 구조
- Skills 작성 — 팀 컨벤션을 마크다운으로 문서화
- 작은 프로젝트부터 시작 — 컴포넌트 라이브러리 자동 생성 같은 저위험 작업
디자인 시스템에 투자한 시간이 이제 AI 에이전트의 성능으로 직결됩니다. 잘 정리된 시스템을 가진 팀이 가장 먼저 혜택을 누릴 것입니다.