피그마, 협업 캔버스에 AI 어시스턴트 추가

Figma가 협업 캔버스에 도입한 AI 어시스턴트는 Figma Design을 시작점으로 단계적으로 확대될 예정이다. 기술적으로 이 어시스턴트는 멀티모달 LLM 기반으로 동작하며, 캔버스의 벡터 객체와 레이어 구조, 컴포넌트 메타데이터, Auto Layout 규칙 등을 컨텍스트로 입력받아 디자이너의 자연어 명령을 실제 노드 조작 명령으로 변환한다. 단순한 텍스트-이미지 생성기와 달리, Figma의 어시스턴트는 디자인 시스템의 토큰(컬러, 타이포그래피, 스페이싱)과 기존 컴포넌트 라이브러리를 참조하여 일관성 있는 결과물을 생성하는 것이 핵심이다. 내부적으로는 RAG(Retrieval-Augmented Generation) 방식으로 파일 내 컴포넌트와 변수(Variables)를 검색하고, 함수 호출(function calling) 패턴으로 Figma의 노드 API를 직접 조작하는 구조로 추정된다.

개발자/엔지니어 입장에서 가장 큰 영향은 디자인-개발 핸드오프(handoff) 사이클이 단축된다는 점이다. 그동안 프론트엔드 엔지니어는 디자이너가 만든 시안을 받아 React/Vue 컴포넌트로 옮기는 과정에서 스페이싱·정렬·반응형 처리에서 모호한 부분을 반복적으로 확인해야 했지만, AI 어시스턴트가 Auto Layout과 디자인 시스템 규칙을 자동으로 강제하면 시안 자체의 정합성이 올라가 변환 비용이 줄어든다. 또한 Dev Mode와 결합될 경우 컴포넌트 단위로 코드 스니펫을 더 정확한 prop 구조로 추출할 가능성이 있고, MCP(Model Context Protocol) 기반 Figma 연동을 활용하면 Claude Code·Cursor 같은 코딩 에이전트가 디자인 컨텍스트를 직접 읽어 컴포넌트 코드를 생성하는 워크플로우가 한층 매끄러워진다.

엔지니어가 실무에서 챙겨야 할 포인트는 세 가지다. 첫째, 디자인 시스템의 토큰·컴포넌트 명명 규칙을 엄격하게 정리해 두어야 AI가 생성한 산출물의 품질이 보장된다. AI는 결국 메타데이터를 근거로 추론하기 때문에, 변수명이 모호하거나 컴포넌트가 분리되지 않은 파일에서는 오히려 일관성 없는 결과를 양산한다. 둘째, AI가 생성한 디자인이 코드로 변환될 때 접근성(a11y) 속성, 시맨틱 마크업, 다크모드 변형 등은 여전히 사람의 검수가 필요하므로 Storybook·Chromatic 같은 시각 회귀 테스트 파이프라인을 강화해 두는 것이 좋다. 셋째, 사내 디자인 파일을 외부 LLM이 학습 데이터로 사용할 가능성에 대비해 Figma의 엔터프라이즈 플랜의 데이터 옵트아웃 정책과 조직 단위 AI 사용 권한 설정을 미리 확인하고, 민감한 프로토타입은 별도 워크스페이스로 격리하는 거버넌스 정책을 수립해 두어야 한다.