Figma 디자인 에이전트 공개

(figma.com)

캔버스 위에서 바로 동작하는 Figma 전용 디자인 에이전트가 출시되어, 디자이너가 도구 전환 없이 AI 협업과 직접 조작을 오갈 수 있는 환경 제공
컴포넌트, 토큰, 표준, 베스트 프랙티스 등 디자인 시스템 컨텍스트를 깊이 이해하도록 파인튜닝되어, Figma 파일 편집에 최적화된 출력 생성
디자인 레이어 어디서나 프롬프트 시작, 병렬 프롬프트(parallel prompt) 로 여러 아이디어 동시 탐색, 에이전트와 사용자가 동시에 편집 가능
변수 일괄 변경, 컴포넌트 교체, 다크모드 전환, lorem ipsum 교체 등 반복적인 잡무(busywork) 자동화에 활용
향후 몇 주에 걸쳐 베타로 점진적 출시, 베타 기간에는 크레딧 미소모, Professional/Organization/Enterprise 플랜의 Full seat 사용자 대상 제공

출시 배경과 포지셔닝

디자이너에게 필요한 핵심 요소는 탐색, 실험, 협업, 정밀성이며, Figma는 이를 가능케 하는 멀티플레이어 캔버스로 설계됨
팀들이 에이전트 도구를 도입하면서 "속도 vs 정밀성", "AI 생성 vs 직접 조작" 같은 잘못된 양자택일(false choices) 이 등장하고 있으나, 둘 중 하나를 선택할 필요는 없다는 입장
올해 초 서드파티 에이전트에 Figma 캔버스를 개방한 데 이어, 이번에는 캔버스와 좌측 레일(left rail)에 직접 내장된 Figma 에이전트 출시
목표는 Figma에 능숙하고 팀 작업 방식에 네이티브한 에이전트를 만드는 것으로, 서드파티 도구로는 불가능한 수준으로 Figma 자체를 모델이 읽을 수 있게(legible) 만듦

Figma 에이전트
- 캔버스에서 작업할 때 사용, 내장형이며 디자인 시스템에 대한 추가 컨텍스트 보유
- 별도 설정이나 컨텍스트 전환 없이 캔버스에 상주
MCP 서버
- 코드를 캔버스로 가져오거나(pull), 디자인을 코드로 다시 내보낼 때(push) 사용
- use_figma와 함께 코드-캔버스 간 워크플로우를 담당

같은 파일 내에서 팀과 함께 동작하는 진정한 협업자(true collaborator) 로서 캔버스 옆에서 작동
Figma 파일 편집에 맞춰 파인튜닝되어 디자인 컨텍스트에 맞는 출력 생성, 직접 조작이 가능하도록 설계되어 사용자가 통제권 유지
MCP 서버와 달리 캔버스에 직접 상주하여 별도 설정·컨텍스트 전환 불필요
- 어떤 디자인 레이어에서든 프롬프트 시작 가능
- 여러 아이디어를 동시에 펼쳐보는 병렬 프롬프트(parallel prompting) 지원
- 에이전트가 작업하는 동안 사용자도 동시에 편집·반복 작업 가능

최고의 디자인은 첫 아이디어나 첫 프롬프트에서 나오지 않으며, 방향 탐색·접근 비교·반복이 디자인의 핵심
넓게 가기 (Go wide)
- 동일한 문제에 대해 서로 다른 스타일적 접근을 빠르게 생성
- 비즈니스 목표별로 최적화된 여러 체크아웃 플로우 비교
- 세 가지 다른 정보 아키텍처 요청 가능
깊게 가기 (Go deep)
- 한 방향을 선택해 반복, 구현 비교, 기존 디자인 재검토를 디자인 시스템과 정합성을 유지한 채 수행
- 가장 자주·최근에 사용한 컴포넌트를 출발점으로 활용
- 특정 라이브러리 선택, @ 멘션으로 토큰/변수/컴포넌트 지정해 출력 방향 제어 가능 — 디자인 시스템의 단축키 같은 개념
Figma Make와의 연계
- Figma Design에서 에이전트로 디자인 레이어를 생성해 플로우·상태·카피·구조의 의도를 명확화 → Make로 보내 코드 레이어 생성 → 다시 Figma Design에 임베드
- 또는 Figma Make에서 시작 → 프레임을 Figma Design으로 복사 → 에이전트로 반복 → 다시 Make로 전송
AI로 디자인 생성이 쉬워질수록 평범한 결과물을 출시할 위험이 커지며, 에이전트는 더 많은 방향을 탐색해 옳은 것을 고르도록 설계됨
일단 방향이 정해지면 직접 손으로 작업하는 것이 종종 더 빠르고 자연스러우며 토큰 효율적(token efficient)

에이전트가 캔버스에서 함께 작동함으로써 AI 어시스턴스와 직접 조작 사이를 자유롭게 전환 가능
컨텍스트와 정밀성이 필요한 지루한 작업들을 자동화
- 일관성을 위한 변수 이름 일괄 변경
- 여러 화면에 걸친 동일 컴포넌트 교체
- 전체 플로우에 패딩 변경 반복 적용
- 다수 프레임에 현실적인 콘텐츠 채우기
구체적 활용 예시
- 파일 전체의 타이포그래피 업데이트
- 그리드 전반의 lorem ipsum 카피와 이미지 교체
- 모든 chip 컴포넌트를 active 상태로 설정
- 수동으로 fill과 대비를 조정하지 않고도 다크모드로 화면 전환
디자인 시스템 운영자에게 특히 유용
- 라이브러리 전반의 설명, 태그, 사용 사례 일괄 업데이트
- 네이밍 컨벤션 표준화
- 모든 상태와 변형을 포함한 컴포넌트 문서화
- 팀 작업물 예시 공유를 통한 품질 가이드
Figma MCP 서버와의 핸드오프
- 코드와 Figma 간 작업이 충실도를 잃지 않고 이동
- 코드에서 시작 → code-to-canvas 기능으로 Figma에 가져와 반복하거나 디자인 시스템 적용 → MCP 서버로 다시 전송, 모든 것이 동기화 유지

디자인 작업에는 비평 노트, 이해관계자 반응, 미해결 질문 등 코멘트와 파일 곳곳에 흩어진 피드백이 누적됨
팀 전체가 같은 파일에서 작업하므로 에이전트가 이미 컨텍스트를 보유, 새로운 협업자에게 브리핑하는 것이 아니라 이미 같은 방에 있는 사람과 생각을 정리하는 느낌
활용 방식
- 피드백 요약, 주제 식별, 입력을 다음 단계로 전환
- 다양한 관점에서 디자인 압력 테스트 — 매출에 집중하는 VP의 반응 모델링 가능
- 긴 코멘트 스레드를 실행 가능한 계획으로 정리
- 비평(crit) 전 생각을 정리해 방향 다듬기

향후 몇 달간 디자인 시스템 지원 개선, UX 개선, 파일 전반 검색 기능 확장, 커스터마이즈 방식 추가에 집중 예정
베타 출시 조건
- 향후 몇 주에 걸쳐 점진적 베타 롤아웃
- 베타 기간 동안 크레딧 미소모, 일반 출시(GA) 시 AI 크레딧 적용
- 대기자 명단 등록 가능, 등록이 접근을 보장하지는 않음
사용 가능 플랜
- Professional, Organization, Enterprise 플랜의 Full seat 사용자 대상
- Collab 및 Dev seat은 drafts에서 에이전트 사용 가능
- Starter, Education, Government 플랜은 제외