디자이너 없이 AI가 만든 화면, 이쁘긴 한데 우리 디자인 시스템이랑 전혀 안 맞잖아요. Figma가 이 문제를 정면으로 풀었어요.
이게 뭔데?
2026년 3월 24일, Figma가 use_figma라는 새로운 MCP 도구를 오픈 베타로 출시했어요. 이름 그대로, AI 에이전트가 피그마 캔버스에 직접 쓰기(write)를 할 수 있게 해주는 도구예요.
기존에도 Figma MCP 서버가 있었지만, "읽기" 위주였어요. 디자인 컨텍스트를 가져와서 코드를 생성하거나, generate_figma_design으로 코드를 피그마 레이어로 변환하는 정도였죠. 이번에 추가된 use_figma는 차원이 다릅니다. AI 에이전트가 여러분의 디자인 시스템을 참조하면서 캔버스에 직접 컴포넌트를 생성하고 수정할 수 있어요.
현재 Claude Code, Codex, Cursor, Copilot CLI, VS Code, Augment, Factory, Firebender, Warp 등 주요 MCP 클라이언트를 지원해요. OpenAI Codex 팀의 Ed Bayes는 "Codex가 피그마 안의 모든 중요한 디자인 컨텍스트를 찾아서 활용할 수 있게 됐다"고 말했어요.
그리고 이 도구의 진짜 핵심은 함께 출시된 Skills예요. Skills는 마크다운 파일로 작성하는 에이전트 지침서인데, 에이전트가 피그마 캔버스에서 어떻게 작업해야 하는지—어떤 컴포넌트를 쓰고, 어떤 변수를 적용하고, 어떤 순서로 진행해야 하는지—를 정의해요. 플러그인 개발이나 코딩 없이, 마크다운만으로 만들 수 있어요.
Skills = 디자인 시스템의 기계 번역
지금까지 디자인 시스템은 인간을 위한 문서였어요. Skills는 이걸 AI가 따를 수 있는 규칙으로 바꿔줍니다. 팀의 컨벤션이 문서장 속에서 잠자지 않고, 에이전트가 매번 실행할 때마다 적용돼요.
Anthropic의 Claude Code 제품 책임자 Cat Wu는 "Skills는 Claude Code가 디자인 캔버스에서 직접 작업하는 법을 가르쳐서, 팀의 의도와 판단에 충실한 방식으로 빌드할 수 있게 해준다"고 설명했어요.
출시와 함께 9개의 커뮤니티 스킬이 공개됐는데, Uber의 접근성 스펙 자동 생성, Edenspiekermann의 디자인 시스템 연결, Firebender의 토큰 싱크 등 실전 사례들이 포함돼 있어요.
뭐가 달라지는 건데?
핵심 변화를 한 마디로 정리하면: AI가 만든 디자인이 더 이상 "맥락 없는 와이어프레임"이 아니게 된 거예요. 이전에는 AI에게 화면을 요청하면, 여러분의 폰트도 모르고, 컴포넌트 라이브러리도 모르고, 간격 시스템도 모르는 상태에서 그냥 "그럴듯한" 화면을 뱉어냈거든요.
| 기존 AI 디자인 생성 | use_figma + Skills | |
|---|---|---|
| 디자인 시스템 인식 | 없음 — 제네릭 컴포넌트 생성 | 팀 라이브러리의 실제 컴포넌트/변수 사용 |
| 출력물 품질 | 스크린샷/이미지 수준, 편집 불가 | 네이티브 피그마 프레임 — 오토 레이아웃, 변수 바인딩 포함 |
| 팀 컨벤션 적용 | 매번 프롬프트에 설명 반복 | Skills에 한 번 정의 → 매 실행마다 자동 적용 |
| 자기 수정 능력 | 없음 | 스크린샷 찍어서 결과 확인 후 자동 수정 |
| 보안 | 외부 API로 데이터 전송 | 로컬 실행 옵션 지원 (기업용) |
특히 주목할 건 self-healing loop이에요. 에이전트가 디자인을 생성한 뒤 스크린샷을 찍어서 의도와 다른 부분을 자동으로 수정해요. 이때 픽셀을 패치하는 게 아니라, 실제 컴포넌트 속성과 변수를 조정하는 거라서 시스템 구조가 유지돼요.
Uber는 이미 Figma MCP를 활용해 수백 개 컴포넌트의 스펙 문서를 수 주 → 수 분으로 단축하는 시스템을 구축했어요. 스크린리더 스펙(VoiceOver, TalkBack, ARIA) 3가지 플랫폼 분을 단일 프롬프트로 2분 안에 생성하고 있고요.
Muzli의 분석이 핵심을 잘 짚었어요 — "디자인 시스템의 품질이 곧 에이전트 출력의 품질을 결정한다. 지저분한 시스템은 지저분한 결과를 만들고, 잘 정리된 시스템은 진짜 쓸 만한 결과를 만든다".
핵심만 정리: 시작하는 법
- Figma MCP 서버 연결
MCP 클라이언트(Claude Code, Cursor, VS Code 등)에서 리모트 서버 URLhttps://mcp.figma.com/mcp을 추가하세요. Claude Code라면claude mcp add --transport http figma https://mcp.figma.com/mcp한 줄이면 돼요. - 기본 스킬 설치
Figma의 기본 스킬/figma-use를 설치하세요. 이 스킬이 에이전트에게 피그마의 구조와 핵심 원칙을 알려줘요. Claude Code는claude plugin install figma@claude-plugins-official로 플러그인 설치하면 스킬이 포함돼요. - 디자인 시스템 정리
에이전트가 참조할 컴포넌트, 변수, 오토 레이아웃이 잘 정리되어 있어야 해요. 레이어 이름을 시맨틱하게 지정하고(CardContainer,Group 5말고), Code Connect로 코드 컴포넌트와 연결해두면 최상의 결과를 얻어요. - 커스텀 Skills 작성
팀 고유의 컨벤션을 마크다운 파일로 정의하세요..claude/skills/또는 클라이언트별 스킬 디렉토리에SKILL.md를 만들면 돼요. "어떤 라이브러리를 먼저 검색하고, 어떤 변수 네이밍을 따르고, 어떤 컴포넌트를 쓸지" 같은 규칙을 넣으면 됩니다. - 프롬프트하고 확인
"이 피그마 파일에서 기존 컴포넌트를 사용해서 로그인 화면을 만들어줘"처럼 요청하세요. 결과를 확인하고, Skills를 계속 다듬어가면 돼요. 베타 기간에는 무료이니 부담 없이 실험하세요.
베타 기간 한정 무료
use_figma는 향후 사용량 기반 유료 API가 될 예정이에요. 지금 베타 기간에 무료로 써보면서 워크플로우를 만들어두는 게 좋아요.
