Figma가 캔버스의 쓰기 권한을 AI 에이전트에게 열었다. 읽기만 되던 MCP 서버에 write 기능이 붙으면서, Claude Code나 Cursor 같은 도구가 컴포넌트를 만들고, 변수를 적용하고, 실제 디자인 에셋을 직접 조작할 수 있게 됐다. 이 변화의 핵심은 기술 자체가 아니라, 디자인 시스템의 위상이 근본적으로 달라진다는 점이다.

무슨 일이 벌어졌나

올해 초 Figma는 Dev Mode용 MCP 서버를 공개했다. 처음엔 읽기 전용이었다. 에이전트가 파일에서 레이아웃 데이터, 컴포넌트 구조, 변수 값을 가져와 코드 생성에 활용하는 수준. 그런데 3월 업데이트로 write 권한이 추가됐다. 이제 에이전트가 캔버스 위에 프레임을 만들고, 기존 라이브러리의 컴포넌트를 배치하고, 디자인 토큰을 적용할 수 있다.

베타 기간 동안 무료로 제공되며, Augment, Claude Code, Codex, Copilot, Cursor, Warp 등 주요 MCP 클라이언트가 이미 지원한다.

토큰이 에이전트의 어휘가 되는 구조

Figma 블로그에서 흥미로운 표현을 썼다. "Design systems become a productivity coefficient for AI-powered workflows." 허풍이 아니라 구조적으로 맞는 말이다.

에이전트가 캔버스에 뭔가를 그리려면 규칙이 필요하다. 색상은 뭘 쓰고, 간격은 어떻게 잡고, 버튼은 어떤 variant가 있는지. 이걸 매번 프롬프트에 적어줄 수는 없다. 컴포넌트 라이브러리와 토큰이 잘 정리되어 있으면, 에이전트는 그걸 참조해서 브랜드에 맞는 결과물을 알아서 만든다. 정리가 안 되어 있으면? 에이전트가 임의로 #3B82F6 같은 값을 하드코딩하기 시작한다.

그동안 "토큰 잘 정리해야 한다"는 말은 주로 핸드오프 효율 이야기였다. 개발자가 inspect 창에서 값을 바로 가져갈 수 있도록. 하지만 에이전트 시대에 토큰의 역할은 더 커진다. color.primary.500이라는 이름이 존재하면 에이전트는 그 이름으로 색을 참조한다. 이름이 없으면 맥락 없는 raw value를 흩뿌린다.

한국 서비스 중 올리브영이 Figma 변수를 Style Dictionary로 추출해서 멀티 플랫폼에 동기화하는 자동화 파이프라인을 공개한 적 있다. 이런 구조가 깔려 있는 팀은 MCP write를 도입했을 때 바로 효과를 볼 수 있다. 반면 토큰 없이 파일만 잔뜩 쌓아둔 팀은 에이전트한테 캔버스를 열어줘도 쓸모가 제한적이다.

Skills — 마크다운 한 장이면 된다

같이 공개된 Skills 시스템이 꽤 영리하다. 에이전트가 캔버스에서 어떻게 행동해야 하는지를 마크다운 파일로 정의한다. 플러그인 개발도 코드도 필요 없다.

기본 제공되는 /figma-use 스킬이 있고, 팀별로 커스텀 스킬을 만들 수 있다. "우리 팀은 8px 그리드를 쓴다", "카드 컴포넌트는 반드시 elevation 토큰을 참조한다" 같은 규칙을 마크다운에 적어두면 에이전트가 그대로 따른다. 디자이너가 에이전트의 행동 규칙을 직접 통제할 수 있다는 점에서, 단순한 자동화 스크립트와는 결이 다르다. 코드를 모르는 디자이너도 에이전트의 "행동 가이드라인"을 작성할 수 있다는 게 핵심이다.

실무 워크플로우가 달라지는 지점

가장 현실적인 변화는 프로토타이핑 속도다. PM이 "이런 화면 만들어줘"라고 에이전트한테 요청하면, 팀의 라이브러리에서 컴포넌트를 꺼내 캔버스에 배치한다. 디자이너는 백지에서 시작하는 게 아니라 초안을 검토하고 다듬는 것부터 시작하게 된다.

개발자 쪽도 변한다. VS Code에서 Copilot이 디자인을 읽어서 코드를 생성하는 건 이미 가능했는데, 이제는 반대 방향도 된다. 코드에서 렌더링된 UI를 캔버스에 편집 가능한 프레임으로 밀어넣을 수 있다. 디자인 → 코드 단방향이 아니라 양방향 흐름이 생긴 셈이다.

다만 기대만큼 매끄럽지 않을 부분도 있다. 에이전트가 만든 레이어 구조가 인간 디자이너의 정리 습관과 다를 수 있고, auto layout 규칙을 엉뚱하게 적용할 가능성도 높다. 베타라서 아직 거친 부분이 많다는 점은 감안해야 한다.

남은 질문들

유료 전환 시 가격 책정, 에이전트가 만든 디자인의 버전 관리, 팀 단위 권한 체계 설계. Figma 측은 "에이전틱 행동을 유료 좌석에 어떻게 반영할지 학습 중"이라고만 밝혔다. 결국 이 도구가 정착하려면 가격 모델이 팀 규모에 비례해서 합리적이어야 한다. 그 전까지는 베타 기간을 최대한 활용하되, 토큰과 라이브러리 정리부터 시작하는 게 현실적인 수순이다.