🤖 피그마 캔버스가 AI에게 열렸다 — 스킬(Skills)로 달라지는 디자인의 모든 것

 

AI가 만든 디자인은 왜 항상 어색할까요?

AI 이미지 생성 도구들이 쏟아지는 시대, 디자이너들도 한 번쯤은 써봤을 거예요. "버튼 컴포넌트 만들어줘", "이 화면 레이아웃 짜줘" 하고 요청했더니 결과물이 나왔는데 — 어딘가 낯설죠. 색상 팔레트가 어긋나고, 여백 기준도 맞지 않고, 버튼 스타일도 우리 팀 것이 아닙니다.

이유는 간단합니다. AI가 우리 팀의 디자인 규칙을 전혀 몰랐으니까요.

팀이 수년간 쌓아온 디자인 시스템 — 어떤 색상 변수를 어떤 상황에 쓰는지, 버튼 여백은 몇 픽셀인지, 타이포그래피 위계는 어떻게 구성하는지 — 이 모든 맥락에 AI는 접근할 방법이 없었습니다. 그냥 "그럴듯하게" 만들어낼 뿐이었어요.

2026년 3월 24일, 피그마가 이 문제를 정면으로 돌파하는 업데이트를 발표했습니다. AI 에이전트가 우리 팀의 디자인 시스템을 이해하고, 그 기반 위에서 피그마 캔버스에서 직접 디자인을 만들 수 있게 된 거예요.

단순한 기능 업데이트가 아닙니다. 디자인 작업의 본질이 달라지는 이야기입니다.

MCP가 뭔지 모르는 분들을 위한 쉬운 비유

이번 업데이트를 이해하려면 MCP(Model Context Protocol)라는 개념이 등장합니다. 어렵게 들리지만 비유하면 이렇습니다.

요리사(AI)가 주방(피그마)에서 일하려면 어디에 재료가 있고, 이 식당의 레시피 규칙이 무엇인지 알아야 해요. 그냥 주방에 던져놓으면 아무 요리나 만들겠죠. MCP는 그 요리사에게 "냉장고 위치, 재료 목록, 레시피 원칙"을 정확하게 알려주는 표준화된 소통 방식이에요.

피그마 MCP 서버는 Claude Code나 OpenAI Codex 같은 AI 에이전트에게 "우리 팀의 디자인 파일이 어떻게 구성되어 있고, 어떤 컴포넌트와 변수가 있는지"를 실시간으로 전달합니다. 이제 AI는 우리 주방(디자인 시스템)을 알고 요리(디자인 작업)할 수 있게 됐습니다.

핵심 도구 use_figma — 읽기에서 쓰기로

피그마 MCP 서버는 2025년 6월에 이미 베타로 출시됐었어요. 그때 제공된 기능은 AI가 피그마 파일을 읽어서 코드를 만드는 것이었습니다. 디자인 → 코드 방향이었죠.

이번에 새로 추가된 use_figma 도구는 반대 방향을 엽니다. 코드 → 디자인입니다.

Claude Code나 Codex 같은 AI 에이전트가 이 도구를 통해 피그마 파일 안에서 직접 컴포넌트를 생성하고, 레이아웃을 구성하고, 변수를 적용할 수 있게 됩니다. 사람이 피그마를 열고 손으로 작업하듯이, AI가 캔버스 위에서 직접 일하는 거예요.

기존 generate_figma_design 도구가 라이브 웹사이트의 HTML을 피그마 레이어로 변환하는 방식이었다면, use_figma는 팀의 컴포넌트와 변수를 기반으로 새 에셋을 생성하거나 기존 디자인을 수정하는 방식입니다. 두 도구는 상호 보완적이에요. 실제 화면을 피그마로 가져온 다음, 거기서 디자인 시스템 기반으로 수정하고 발전시키는 식으로 함께 쓸 수 있습니다.

'스킬(Skills)'이 진짜 혁신인 이유

use_figma 도구보다 더 중요한 개념이 바로 스킬(Skills)입니다. 이게 이번 업데이트의 진짜 핵심이에요.

스킬을 한 마디로 설명하면 "AI 에이전트에게 주는 작업 매뉴얼"입니다. 마크다운 파일 형태로 작성된 지침인데, 이 안에는 이런 내용이 들어갑니다.

피그마에서 컴포넌트를 만들 때 어떤 순서로 작업하는가, 우리 팀의 네이밍 규칙은 무엇인가, 어떤 변수를 어떤 상황에 적용하는가, 오토 레이아웃은 어떻게 구성하는가, 접근성 사양은 어떻게 처리하는가 — 이 모든 걸 문서 하나에 담을 수 있습니다.

이 스킬 파일을 한 번 작성해두면, AI 에이전트는 이걸 읽고 그대로 따릅니다. 코드를 짤 줄 몰라도 됩니다. 플러그인을 개발할 필요도 없어요. 팀의 경험과 노하우를 마크다운 문서로 정리하면, 그게 곧 에이전트의 행동 규칙이 되는 구조입니다.

지금 바로 쓸 수 있는 11가지 스킬 목록

피그마는 출시와 함께 커뮤니티에서 쓸 수 있는 스킬들을 공개했어요. 피그마 공식 제공 스킬과 커뮤니티 기여 스킬로 나뉩니다.

가장 중요한 기반 스킬은 /figma-use입니다. 모든 스킬의 토대가 되는 필수 스킬로, 피그마의 구조와 컴포넌트 작동 방식 등 피그마 자체를 이해하는 공통 언어를 에이전트에게 제공합니다. 다른 모든 스킬은 이 위에 쌓입니다.

피그마 공식 스킬로는 /figma-generate-design과 /figma-generate-library가 있습니다. 전자는 기존 컴포넌트와 변수를 활용해 새 디자인을 생성하고, 후자는 코드베이스를 분석해 피그마 컴포넌트를 역방향으로 만들어냅니다.

커뮤니티 스킬로는 Uber 팀이 만든 /create-voice(스크린 리더 사양 자동 생성), Edenspiekermann의 /apply-design-system과 /audit-design-system(디자인 시스템 연결 및 감사), /rad-spacing(계층적 여백 적용), /cc-figma-component와 /cc-figma-tokens(JSON 기반 컴포넌트·토큰 생성), /sync-figma-token(코드-피그마 토큰 동기화), /edit-figma-design, /multi-agent(병렬 에이전트 실행) 등이 있습니다.

이 스킬들은 모두 현업 팀들이 실제로 쓰고 공유한 것들이라 바로 실전에 적용할 수 있다는 게 큰 장점입니다.

사람들이 놓치는 부분 — '자기 수정 루프'의 의미

스킬의 또 다른 중요한 특징이 있어요. 바로 자기 수정 루프(self-healing loop)입니다.

에이전트가 화면을 하나 생성하면, 그걸로 끝이 아닙니다. 생성된 화면의 스크린샷을 찍고, 원래 의도한 디자인과 다른 부분을 스스로 비교합니다. 차이를 발견하면 다시 수정하는 과정을 반복해요.

여기서 중요한 점은 픽셀을 이동시키는 방식이 아니라는 겁니다. 에이전트는 실제 컴포넌트, 변수, 오토 레이아웃 구조를 갖고 작업하기 때문에, 수정 작업도 시스템 자체와 상호작용하며 이루어집니다. 컴포넌트 속성을 바꾸는 방식으로 작동하는 거예요.

AI는 본질적으로 같은 프롬프트에 대해 매번 조금씩 다른 결과를 냅니다. 스킬은 이 불확실성을 줄여줍니다. 구체적인 단계, 따라야 할 규칙, 사용할 코드를 명시함으로써 에이전트의 행동을 더 예측 가능하게 만드는 겁니다.

디자이너 역할이 사라지는 건 아닙니다

이 질문이 제일 많이 나올 것 같아서 직접 답변드릴게요. 결론부터 말하면 아닙니다. 오히려 반대예요.

이번 기능이 잘 작동하려면 두 가지가 반드시 갖춰져 있어야 합니다. 잘 정의된 컴포넌트와 변수, 그리고 잘 작성된 스킬 문서입니다. 에이전트는 이것들을 따를 뿐, 스스로 만들지 않아요.

달리 말하면, 디자인 시스템을 체계적으로 구축한 팀일수록 이 기능에서 더 큰 레버리지를 얻습니다. 오랫동안 쌓아온 팀의 지식과 결정들이 에이전트를 통해 증폭되는 구조예요.

반대로 디자인 시스템 없이 즉흥적으로 작업해온 팀은 에이전트에게 줄 규칙 자체가 없어 큰 이점을 얻기 어렵습니다. 이 시점부터 팀 간 생산성 격차가 벌어질 수 있다는 신호로 읽어야 합니다.

지금 당장 시작할 수 있는 가장 작은 한 걸음

많은 팀에서 디자인 시스템은 "언젠가 만들어야 할 것"으로 미뤄지는 경우가 많죠. 하지만 이번 피그마 업데이트는 그 우선순위를 다시 생각하게 만들어요.

모든 걸 한꺼번에 갖출 필요는 없습니다. 지금 당장 시작할 수 있는 것부터 시작해보세요.

자주 쓰는 컴포넌트 하나를 제대로 정의해보세요. 버튼 하나라도 크기, 색상 상태, 텍스트 스타일을 변수로 관리하면 그게 시작입니다. 팀의 작업 방식을 짧게 글로 남겨보세요. "우리 팀은 새 컴포넌트를 만들 때 이런 순서로 한다"는 한 문단이 스킬의 씨앗이 됩니다.

베타 기간 동안 무료로 제공됩니다. 지금 Claude Code나 Cursor를 피그마 MCP에 연결해서 /figma-use 스킬 하나만 써보세요. 백 마디 설명보다 직접 써보는 15분이 훨씬 빠릅니다.

마무리

피그마가 AI 에이전트에게 캔버스를 개방했습니다. use_figma 도구와 Skills 기능을 통해 Claude Code, Codex 같은 AI 에이전트가 팀의 디자인 시스템을 그대로 따르며 직접 피그마에서 디자인 에셋을 만들 수 있게 됐어요. 디자인 시스템이 있는 팀과 없는 팀 사이의 생산성 격차가 앞으로 급격히 벌어질 수 있습니다. 지금이 체계를 갖출 최적의 타이밍입니다. 피그마 파일 한 번 열어보세요 — 컴포넌트가 잘 정리되어 있는지, 변수가 체계적으로 쓰이고 있는지 확인하는 것만으로도 첫걸음이 됩니다.