2026년 3월 24일, Figma가 use_figma MCP를 오픈 베타로 공개했습니다. AI 에이전트가 Figma 캔버스에 디자인을 직접 생성하고 수정할 수 있는 도구입니다.
지금까지 디자이너가 Figma에서 프레임을 그리면 개발자가 코드를 작성했습니다. 작업은 design-to-code 방향으로 흘렀고, Figma의 Dev Mode MCP도 디자인 정보를 추출해 코드 생성을 도왔습니다. use_figma는 반대 방향인 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 TD
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가 팀 컨벤션을 알 수 없어 일관성 없는 결과가 나올 수 있습니다.
마무리
use_figma로 AI 에이전트가 Figma 캔버스에 쓸 수 있게 됐습니다. 캔버스는 개발자에게 넘기는 “전달물”에서 에이전트와 함께 고치는 “라이브 아티팩트”로 역할이 바뀝니다.
몇 주 전 Google Stitch가 AI 네이티브 디자인의 가능성을 보여줬다면, Figma는 기존 디자인 생태계 위에서 AI를 통합하는 방향을 택했습니다. AI가 이미 구축된 디자인 시스템, 라이브러리, 팀 워크플로우를 그대로 쓰므로 실무에 바로 도입할 수 있습니다.
지금 할 수 있는 것들:
- 팀의 디자인 시스템 정리 — 명확한 이름, 변수 정의, 컴포넌트 구조
- Skills 작성 — 팀 컨벤션을 마크다운으로 문서화
- 작은 프로젝트부터 시작 — 컴포넌트 라이브러리 자동 생성 같은 저위험 작업
관련 글
- Chrome DevTools MCP — 브라우저 세션에 연결하는 MCP
- OpenGenerativeUI 살펴보기 — 생성형 UI를 오픈소스로 실험하기