개발자가 코드로 구현한 화면이 14개나 됐는데 피그마에는 4개밖에 없었어요. 에이전트가 나머지 10개를 찾아서 피그마 캔버스에 직접 올렸습니다. 디자인 시스템 컴포넌트로요.

3초 요약
코드 구현 완료 → 에이전트가 상태 탐색 → 디자인 시스템 컴포넌트로 프레임 생성 → 디자이너 캔버스에서 리뷰·수정 → Dev Mode 핸드오프

이게 뭔 기능인데?

2026년 5월, Figma가 MCP 서버에 에이전트 쓰기 권한(Write to Canvas)을 공식 추가했어요. 이전까지 Figma MCP는 "디자인→코드" 방향만 가능했어요. 피그마 디자인을 AI가 읽어서 코드로 변환해주는 거였죠. 이번에 반대 방향 — 에이전트가 직접 피그마 캔버스에 프레임을 생성하고 수정하는 게 가능해진 거예요.

핵심 도구는 두 가지예요. use_figma는 에이전트가 디자인 시스템의 컴포넌트·변수·토큰을 이용해 캔버스에 프레임을 생성하고 수정하는 도구고, generate_figma_design은 라이브 앱의 HTML을 피그마 레이어로 변환하는 도구예요.

9개
공식 Skills 런칭
4→14
에이전트가 발견한 구현 상태
10+
지원 MCP 클라이언트

지원 클라이언트도 대폭 늘었어요. Claude Code, Cursor, Codex, Warp, Augment, Factory, Firebender, VS Code Copilot까지 — MCP를 지원하는 거의 모든 AI 코딩 도구에서 쓸 수 있어요.

그리고 이번 업데이트의 진짜 포인트는 Skills 시스템이에요. Skills는 팀 컨벤션을 마크다운 파일로 패키징한 재사용 가능한 지침 세트예요. "우리 팀은 항상 디자인 토큰을 사용한다", "이 컴포넌트 라이브러리에서만 가져온다" 같은 규칙을 한번 써두면, 에이전트가 매번 그 규칙을 따르게 돼요.

뭐가 달라지는 건데?

기존 Figma MCP(읽기 전용)와 새로운 Write to Canvas는 같은 듯 보이지만 완전히 다른 게임이에요. 읽기 전용 시절에는 에이전트가 피그마에서 디자인 정보를 가져와서 코드를 잘 짜는 데 쓰는 거였거든요. 이제는 에이전트가 피그마에 직접 뭔가를 만들어요. 그것도 디자인 시스템 컴포넌트로요.

기존 Figma MCP Write to Canvas
에이전트 권한 읽기 전용 (디자인 데이터 추출) 읽기 + 쓰기 (프레임 생성·수정)
디자인 시스템 활용 코드 생성 시 참고 실제 컴포넌트·변수·토큰으로 생성
협업 방식 개발자 도구 → 피그마 수동 업데이트 캔버스가 코드베이스와 자동 연결 유지
팀 컨벤션 적용 프롬프트마다 다시 설명 Skills 파일 한 번 → 항상 일관 적용

Bitovi의 Ali Shouman이 실제로 테스트해봤는데, 에이전트가 화면을 만들 때 "필요한 베이스 컴포넌트를 먼저 만들고, 그걸 재사용해서 화면을 조립하는" 방식으로 작동했다고 해요. 그냥 이미지를 찍어서 올리는 게 아니라, 피그마의 컴포넌트 계층 구조를 실제로 이해하고 있다는 거예요.

단, 한계도 명확해요. 지시가 없으면 연결된 디자인 시스템을 자동으로 인식하지 않고, 변수 대신 하드코딩하는 경향이 있어요. 이게 바로 Skills가 필요한 이유예요. Skills 없이 쓰면 비결정적인 결과가 나와요.

핵심 포인트

디자인 시스템이 잘 정리된 팀일수록 Write to Canvas 효과가 커요. 네이밍 컨벤션, 컴포넌트 구조, 토큰 체계가 명확할수록 에이전트 출력도 깔끔해요.

핵심만 정리: 시작하는 법

  1. MCP 서버 연결
    리모트 서버(추천): claude mcp add --transport http figma https://mcp.figma.com/mcp
    Figma Professional Plan + Full seat 필요. Dev seat은 읽기 전용이에요.
  2. Skills 파일 등록
    Figma Community에서 공식 Skills 9개를 다운로드해요. /figma-use, /sync-figma-token 등이 있어요. 팀 컨벤션에 맞게 수정해서 MCP 클라이언트 설정에 등록하세요.
  3. 파일 URL로 컨텍스트 제공
    프롬프트에 피그마 파일 URL을 직접 붙여넣으세요. "이 파일에 버튼 컴포넌트 세트 만들어줘: figma.com/file/..." 형태로요.
  4. 작은 것부터 테스트
    복잡한 화면보다 컴포넌트 하나부터 시작하세요. 20KB 출력 제한이 있어서 큰 작업은 단계를 나눠야 해요.
  5. Draft에서 먼저 실험
    프로덕션 파일이 아닌 Draft에서 먼저 시도하세요. 에이전트가 생각과 다르게 동작할 수 있어요. 베타 품질이라 수동 검토는 필수예요.

주의

이미지 에셋과 커스텀 폰트는 아직 지원 안 돼요. 퍼블리시되지 않은 컴포넌트도 Code Connect 통합에서 제외돼요.

🔗

더 깊이 파고 싶다면

Agents, Meet the Figma Canvas
Write to Canvas 기능의 공식 발표 블로그. 배경과 비전을 가장 정확하게 설명해요.
Workflow Lab: Expanding the Canvas with Figma MCP
에이전트 워크플로우 3가지를 실제 팀 시나리오로 보여주는 가이드예요.
Write to Canvas — Figma Developer Docs
use_figma 도구의 기술 스펙, 제한사항, 지원 클라이언트 목록을 담은 공식 문서예요.
Figma MCP Write Access 실전 테스트
6가지 시나리오로 실제 테스트한 결과 리뷰. 강점과 한계를 모두 솔직하게 다뤘어요.
Figma MCP Server 쓰기 권한의 의미
마케터·디자이너·개발자 관점의 활용 사례를 고루 다룬 분석이에요.
디자이너에게 AI 에이전트 캔버스가 의미하는 것
디자인 시스템 품질이 에이전트 출력을 결정한다는 핵심 인사이트가 담겨 있어요.