피그마가 AI 에이전트에게 캔버스를 열어줬다 — MCP, 스킬, 그리고 디자인 도구의 다음 단계

피그마 캔버스 안에서 AI 에이전트가 직접 컴포넌트를 만들고 수정할 수 있게 됐어요. 그냥 "AI가 화면을 그려준다"가 아니라, 디자인 시스템의 변수와 컴포넌트 구조를 참조하면서 작업한다는 얘기입니다. 꽤 다른 이야기거든요.

클로드 코드, 코덱스, Cursor, Copilot CLI 같은 MCP 클라이언트들이 피그마의 MCP 서버에 연결돼요. 그리고 `use_figma`라는 도구를 통해 캔버스 안에서 바로 작업을 수행합니다. 여기에 피그마가 '스킬(Skill)'이라는 걸 붙였는데, 마크다운 파일 형태로 팀의 디자인 판단 기준과 작업 순서를 에이전트에게 알려주는 장치예요. (플러그인 만들 필요 없이 마크다운만 쓰면 된다니, 진입장벽을 확 낮춘 셈이죠.)

기존 도구와 뭐가 달라졌나

이전에도 `generate_figma_design`이라는 도구가 있었어요. HTML을 편집 가능한 피그마 레이어로 변환하는 역할이었죠. 근데 한계가 명확했어요. AI가 만든 디자인은 색상 체계, 버튼 여백, 타이포그래피, 인터랙션 같은 맥락을 모른 채 찍어낸 것이라 낯설고 비슷비슷하다는 지적이 반복됐거든요. 결국 돈 문제가 아니라 맥락 문제.

새 `use_figma` 도구는 접근 자체가 달라요. 에이전트가 피그마 캔버스 위에서 디자인 시스템의 변수와 컴포넌트 구조를 직접 참조하면서 수정하거나 새 자산을 만들 수 있게 합니다. 코드에서 시작하든, 피그마에서 시작하든 하나의 흐름으로 연결하겠다는 전략인데요. 오픈AI 코덱스 팀도 "피그마 안의 디자인 문맥을 활용해 더 높은 완성도의 제품을 더 효율적으로 만들 수 있다"고 평가했어요.

잠깐 딴 얘기인데, 디자인 도구가 "편집기"에서 "AI가 실제로 일하는 작업 공간"으로 바뀌는 거잖아요. 디자이너의 역할이 "직접 그리는 사람"에서 "에이전트에게 기준을 알려주는 사람"으로 이동하고 있다는 뜻이기도 해요. 다시 본론으로 오면.

스킬 9종 — 에이전트에게 팀의 규칙을 가르치는 법

피그마가 공개한 예시 스킬은 9개예요. 코드베이스에서 새 컴포넌트를 만드는 기능, 기존 컴포넌트와 변수를 활용해 새 화면을 구성하는 기능, 접근성을 위한 스크린 리더 명세 생성, 디자인 시스템 연결, 토큰 동기화 등이 포함돼 있어요. 사용자는 플러그인을 만들거나 코드를 짜지 않아도 스킬을 직접 작성할 수 있고요.

핵심은 간단해요. 에이전트가 "우리 팀은 이렇게 일한다"를 알게 되면, 막연한 화면을 찍어내는 게 아니라 팀의 의도와 기준에 맞춘 결과물을 내놓는다는 겁니다.

솔직히 이게 얼마나 잘 작동할지는 써봐야 알겠지만, 방향 자체는 맞다고 봐요. AI가 디자인을 "생성"하는 것보다 "팀의 언어로 작업"하는 쪽이 훨씬 실용적이니까요.

베타는 무료, 그 다음은 유료 — 그리고 남은 숙제

베타 기간 동안은 무료로 제공되지만 이후에는 사용량 기반 유료로 전환될 예정이에요. 현재 연동 가능한 MCP 클라이언트는 Augment, Claude Code, Codex, Copilot CLI, Cursor, Warp 등이고요.

아직 빠져 있는 것도 있어요. 이미지 지원이나 커스텀 폰트 같은 건 앞으로 추가될 예정이고, 피그마는 플러그인 API 수준에 가까운 기능 범위를 갖추겠다고 밝혔습니다. 결국 "에이전트가 피그마 안에서 할 수 없는 일"의 목록이 점점 줄어드는 거예요.

디자인 도구의 경쟁축이 바뀌고 있어요. 예전에는 "누가 더 예쁜 UI를 만들어주느냐"였다면, 지금은 "누가 AI 에이전트와 더 잘 연결되느냐"로 넘어가는 중이거든요. 피그마가 MCP를 전면에 내세운 건, 그 경쟁에서 먼저 판을 깔겠다는 선언이에요.