🤖 피그마 캔버스가 AI 에이전트에 열렸다, 이게 왜 대단한 일일까?

 

AI가 만든 디자인, 왜 항상 어딘가 어색했을까요

AI 도구로 화면을 만들어본 경험이 있으신가요? 열심히 프롬프트를 입력하고 결과물을 보면 뭔가 어색합니다. 폰트도 다르고, 버튼 스타일도 낯설고, 우리 팀이 수개월에 걸쳐 다듬어온 디자인 시스템과는 완전히 동떨어진 결과물이 나오죠.

사실 이건 AI의 실력 문제가 아니었어요. AI 에이전트가 팀의 색상 팔레트, 버튼 여백, 타이포그래피, 컴포넌트 명명 규칙 같은 맥락을 전혀 모르는 상태에서 작업했기 때문입니다. 결과물이 낯설고 비슷비슷하게 느껴질 수밖에 없었던 이유가 바로 여기에 있었어요.

그런데 2026년 3월 말, 피그마(Figma)가 이 문제를 정면으로 돌파했습니다.

use_figma, 단순한 기능 추가가 아니다

2026년 3월 24일, 피그마는 use_figma라는 새로운 도구를 베타로 공개했습니다. 한마디로 요약하면, AI 에이전트가 피그마 캔버스에 직접 쓰기(write) 권한을 갖게 된 겁니다.

기존에도 AI가 피그마에 결과물을 넘겨주는 방식은 있었어요. generate_figma_design이라는 도구가 HTML을 피그마 레이어로 단방향 변환해주는 역할을 했습니다. 하지만 use_figma는 차원이 다릅니다. 에이전트가 여러분 팀의 디자인 시스템을 진리의 원천(source of truth)으로 삼고, 피그마 파일에 직접 컴포넌트를 생성하고 수정합니다.

비유하자면, 예전 AI는 "대충 이런 화면이요"라는 스케치를 던져줬다면, 이제는 우리 팀 부품함에서 진짜 컴포넌트를 꺼내 조립해주는 것과 같습니다. 컴포넌트, 변수, 토큰, 명명 규칙, 라이브러리 구성 방식까지 팀이 쌓아온 디자인 조직의 운영 원칙이 AI 에이전트의 작업에 직접 반영됩니다.

스킬(Skills), 에이전트를 팀 문화에 맞게 훈련시키는 방법

이번 발표에서 use_figma 못지않게 중요한 것이 바로 스킬(Skills)이라는 개념입니다. 스킬은 에이전트가 피그마 캔버스에서 어떻게 행동해야 하는지를 정의하는 마크다운 파일이에요. 팀의 관행, 작업 순서, 어떤 컴포넌트를 쓸지, 예외 상황은 어떻게 처리할지가 모두 담깁니다.

가장 큰 장점은 누구나 작성할 수 있다는 점입니다. 플러그인 개발도, 별도의 코딩도, 승인 절차도 필요 없어요. 마크다운 파일 하나면 됩니다. 피그마는 출시 시점에 9개의 예시 스킬을 함께 공개했는데, 대표적인 것들을 보면 이렇습니다.

/figma-generate-library는 코드베이스를 바탕으로 피그마 신규 컴포넌트를 자동 생성해줍니다. /figma-generate-design은 기존 컴포넌트와 변수를 활용해 새 화면을 설계하고, /apply-design-system은 기존 디자인을 시스템 컴포넌트에 연결합니다. /create-voice는 접근성 스크린 리더 명세를 자동 생성하고, /sync-figma-token은 코드와 피그마 변수 간 디자인 토큰을 동기화합니다. 심지어 /multi-agent로 병렬 워크플로우까지 지원합니다.

모든 스킬의 기반에는 /use-figma가 있습니다. 이 스킬은 피그마의 구조부터 핵심 원칙까지, 피그마가 어떻게 작동하는지에 대한 공통된 이해를 에이전트에게 제공하는 역할을 합니다.

Claude Code, Codex, Cursor — 이미 연동 중

현재 use_figma 도구는 Claude Code, OpenAI Codex, Cursor, Copilot CLI, Augment, Factory, Firebender, Warp 등 다양한 MCP 클라이언트와 통합되어 있습니다.

OpenAI 코덱스 팀의 디자인 리드는 피그마 내의 디자인 맥락을 참조할 수 있게 되면서 더 높은 품질의 제품을 효율적으로 만들 수 있게 됐다고 전했습니다. Anthropic의 Claude Code 팀도 파트너로 깊이 관여했는데, 스킬이 Claude Code에게 디자인 캔버스에서 어떻게 작업하는지 가르쳐줌으로써 팀의 의도와 판단에 충실한 방식으로 개발할 수 있게 해준다고 밝혔습니다.

피그마 최고제품책임자(CPO) 유키 야마시타는 "초기 디자인 구상부터 디자인 시스템 구축 및 업데이트에 이르기까지, 에이전트 활용 범위를 한층 넓힐 수 있게 됐다"고 말했습니다.

실제로 써보면 어떨까 — 테스트 결과와 한계

구체적인 테스트 결과도 나오고 있습니다. 버튼 컴포넌트의 모든 속성과 변형을 포함한 코드를 에이전트에게 주었을 때, 정확한 변형과 올바른 스타일, 깔끔한 레이어 네이밍이 적용된 피그마 컴포넌트 세트가 생성되었습니다. 컴포넌트 없이 화면을 만들어야 하는 상황에서는 에이전트가 먼저 필요한 기본 컴포넌트를 파악해 만들고, 이를 재사용해 화면을 구성하는 합리적인 접근을 보여줬습니다.

기존 디자인 정리도 가능합니다. 하드코딩된 색상 값이 올바른 토큰으로 교체되고, 일반 프레임이 라이브러리의 실제 컴포넌트로 대체되는 과정이 실제로 동작했습니다.

다만 솔직하게 짚어야 할 부분도 있어요. 독립적인 테스터들은 MCP 서버를 통해 피그마의 SVG 기반 노드 트리를 웹 코드로 변환할 때 스타일 부정확도가 상당히 높다고 보고했습니다. 반응형 레이아웃을 위한 미디어 쿼리 적용이 정확하게 반영되지 않는 경우가 있었고, 레이어 구조가 복잡하거나 설정이 중첩된 경우에도 원하는 결과와 다르게 출력되는 사례가 있었습니다. 베타라는 점을 감안해도 아직 완성도보다는 방향성을 보여주는 단계에 가깝습니다.

디자인 시스템이 잘 갖춰진 팀이 AI 시대에 압도적으로 유리하다

이 발표가 단순한 기능 추가가 아닌 이유가 있습니다. 피그마는 캔버스를 하나의 공유 인프라로 꾸준히 재정의해왔어요. 코드와 디자인이 만나는 곳, 의사결정이 이루어지는 곳, 어디서 시작하든 제품 작업이 가시화되는 공간으로 말이죠.

에이전트가 디자인 시스템에 접근하며 피그마 안에서 직접 작업할 수 있게 되면, 캔버스는 더 이상 최종 결과물이 아닙니다. 에이전트와 디자이너가 함께 작업하는 살아있는 산출물이 됩니다.

그리고 이 변화는 디자인 시스템에 대한 투자 가치를 전례 없이 높입니다. 디자인 시스템의 품질이 이제 에이전트 산출물의 품질을 직접 결정하게 됐어요. 지저분한 시스템은 지저분한 결과물을 낳고, 잘 정리된 성숙한 시스템은 진정으로 유용한 결과물을 만들어냅니다.

제품 오너(PO)나 기획자 관점에서 다시 읽어보면 이렇습니다. 디자인 시스템이 잘 갖춰진 팀일수록 AI 에이전트의 혜택을 압도적으로 더 많이 가져갑니다. 설계 초기부터 컴포넌트 구조, 토큰 네이밍, 레이어 명명 규칙에 공을 들인 팀이 결국 AI 시대에 생산성 격차를 만들어냅니다. 디자인 시스템 정비를 미루고 있는 팀이라면, 이 소식을 그 계기로 삼을 만합니다.

요금과 베타 정책 — 지금이 탐색 적기

현재는 베타 기간으로 무료로 제공되고 있으며, 이후 사용량 기반 유료 API 형태로 전환될 예정입니다. 캔버스에 쓰기 작업을 하려면 Full 시트가 필요하고, Dev 시트는 초안(Drafts)에서만 사용할 수 있습니다.

피그마는 충분한 팀들이 베타 기간 동안 스킬을 만들고 use_figma를 워크플로에 녹여넣으면, 유료로 전환될 때도 떠나지 않을 것이라는 데 베팅하고 있습니다. 플랫폼이 항상 써온 전략이죠. 무료로 쓸 수 있는 지금이 탐색하기에 가장 좋은 시기입니다.

Claude Code, Cursor, Codex 중 하나를 이미 쓰고 있다면, 이미 시작할 준비가 된 겁니다.

마무리

피그마가 캔버스를 AI 에이전트에게 개방한 것은 디자인 도구가 AI 에이전트의 작업 공간으로 진화하는 전환점입니다. 핵심 메시지는 하나예요. 디자인 시스템에 투자한 팀이 AI 시대에 생산성 격차를 만든다는 것. AI 에이전트는 이제 디자이너의 대체자가 아니라 디자인 시스템을 이해하는 협업자로 작동하기 시작했습니다. 디자인 시스템을 잘 갖춘 팀이라면 지금 바로 베타 버전을 탐색해볼 가치가 있습니다.