피그마, 프롬프트로 맞춤형 플러그인 만드는 디자인 에이전트 공개

피그마에서 작업할 때 레이어 이름을 일괄 변경하거나 실제 데이터를 채워 넣는 반복 작업을 자동화하려면, 지금까지는 커뮤니티 플러그인을 뒤지거나 개발자 동료에게 스크립트 제작을 부탁해야만 했습니다.

피그마가 6월 24일 연례 컨퍼런스 Config에서 캔버스에 직접 상주하는 새로운 디자인 에이전트를 공개했습니다. 가장 눈에 띄는 변화는 원하는 기능을 일상 언어로 설명하기만 하면, AI가 재사용 가능한 맞춤형 플러그인을 캔버스 위에서 즉시 만들어 준다는 점입니다.

캔버스에서 말 한마디로 도구를 만든다

새롭게 도입된 생성형 플러그인은 로컬 개발 환경이나 코딩 지식을 전혀 요구하지 않습니다. 피그마의 공식 컴포넌트 시스템인 PropsKit을 기반으로 만들어지기 때문에 겉모습과 사용성 모두 피그마 기본 기능처럼 자연스럽습니다.

프로덕트 디자이너 Edward Chechique는 HTML 코드를 캔버스 레이어로 변환하고 대시보드 레이아웃을 자동 구성하는 도구를 에이전트로 제작했습니다. 이전에는 개발자의 일정을 기다리거나 외부 AI 창을 오가며 코드를 복사해야 했지만, 이제는 작업 중인 파일 안에서 대화 몇 마디로 해결된다고 설명했습니다.

업무 자동화 스크립트에 그치지 않고 그래픽 효과도 직접 짭니다. WebGPU 렌더러를 바탕으로 디더링, 픽셀화, 노이즈, 수채화 질감 같은 WebGPU 셰이더 효과를 텍스트 프롬프트로 생성해 레이어에 바로 입힐 수 있습니다.

크리에이티브 테크놀로지스트 Anna Zhang은 사진 작업에 메탈 엠보싱과 빛 번짐 효과를 입히는 맞춤 셰이더를 만들었습니다. UI 구성은 에이전트에 맡겨두고 본인은 필요한 매개변수를 조율하는 데 집중할 수 있었다고 밝혔습니다.

맥락을 이해하는 맞춤형 에이전트

단순한 프롬프트 몇 줄로 쓸 만한 도구를 만들기 위해, 피그마는 에이전트의 맥락 인식 범위를 크게 넓혔습니다.

사용자 인터뷰 문서나 UX 라이팅 가이드, 데이터 보고서를 대화창에 직접 첨부할 수 있습니다. 다른 피그마 파일 링크를 붙여넣으면 단순 이미지가 아니라 컴포넌트 구조, 디자인 토큰, 스타일 규칙을 통째로 읽어냅니다.

웹 검색과 MCP 도구 연동도 지원합니다. 식당 예약 화면을 만들 때 가상의 의미 없는 텍스트 대신 실제 식당 이름과 최신 사진을 실시간으로 긁어와 채워 넣을 수 있습니다.

직접 만들었거나 팀원이 공유한 플러그인과 셰이더를 사용하는 것은 모든 요금제에서 무료입니다. 다만 에이전트를 호출해 새로운 도구나 셰이더를 생성하는 작업은 향후 정식 출시 시 AI 크레딧을 소모하게 됩니다.

왜 중요한가

우리는 피그마가 AI를 '화면을 대신 그려주는 기계'가 아니라 '디자이너의 도구를 만드는 도구'로 정의한 점을 매우 똑똑한 접근으로 봅니다. 시중의 텍스트 기반 UI 생성기는 실무에서 쓰기 힘든 난잡한 레이어를 뱉어내기 일쑤였기 때문입니다.

모든 디자인 팀에는 고유한 명명 규칙과 사내 데이터 포맷이 있습니다. 이런 자잘한 불편을 해소하려고 개발팀에 매번 티켓을 넣기는 어려웠는데, 비개발 직군이 5분 만에 사내 맞춤 스크립트를 조립할 수 있게 된 셈입니다.

업계 전반으로 봐도 디자인 도구의 성격을 바꿉니다. 도구를 소비하던 디자이너가 직접 도구 제작자가 되면서, 개인의 작은 팁이 조직 전체의 자산으로 즉각 전환됩니다.

다만 외부 API나 타사 AI 서비스를 연동하는 고도화된 기능은 여전히 기존 방식의 플러그인 개발이 필요합니다. 또한 코드를 전혀 모르는 디자이너가 도구 내부 로직 오류를 만났을 때, 에이전트의 재시도에 전적으로 의존해야 한다는 점은 풀어야 할 과제입니다.