에이전트, Figma 캔버스를 만나다 | Figma 블로그

Figma는 이제 AI 에이전트가 디자인 캔버스에서 직접 파일과 컴포넌트를 생성·수정할 수 있도록 지원한다. MCP 서버의 use_figma 도구와 Markdown 기반 스킬을 통해 에이전트가 팀의 디자인 시스템, 컴포넌트, 변수, 작업 규칙을 활용하게 되며, 결과적으로 코드와 디자인 사이의 단절을 줄이는 것이 목표다. 이 기능은 현재 베타 기간 동안 무료로 제공되지만 향후 사용량 기반 유료 기능으로 전환될 예정이다.

AI 에이전트가 Figma 캔버스에서 작업

• Claude Code, Codex 등 MCP 클라이언트가 use_figma 도구를 통해 Figma 파일과 컴포넌트를 직접 생성하고 수정할 수 있다.
• 에이전트는 색상, 버튼 패딩, 타이포그래피, 인터랙션 같은 팀의 디자인 결정을 Figma 안에서 참조한다.
• 기존처럼 AI가 일반적이고 브랜드와 동떨어진 디자인을 만드는 대신, 조직의 디자인 시스템에 연결된 결과물을 생성할 수 있다.
• 코드에서 시작한 작업도 Figma에서 검토·수정할 수 있고, Figma에서 결정한 내용을 다시 개발 과정에 반영할 수 있다.

generate_figma_design과 use_figma의 역할 분담

• generate_figma_design
  • 실제 웹사이트나 애플리케이션의 HTML을 Figma 레이어로 변환한다.
  • 코드와 디자인이 달라졌을 때 최신 UI를 Figma로 가져오는 데 사용된다.
• use_figma
  • Figma 캔버스에서 기존 디자인을 수정하거나 새로운 디자인 자산을 생성한다.
  • 팀의 컴포넌트, 변수, 자동 레이아웃 등 실제 디자인 시스템을 활용한다.
• 두 도구를 함께 사용하면 코드의 최신 상태를 Figma로 가져온 뒤, 에이전트가 디자인 시스템에 맞춰 재구성하고 개선할 수 있다.

Markdown으로 정의하는 Figma 스킬

• 스킬은 에이전트가 Figma에서 작업하는 방법을 설명하는 Markdown 파일 기반 지침이다.
• 특정 작업의 순서, 적용해야 할 규칙, 팀의 디자인 관례와 품질 기준을 명시할 수 있다.
• 플러그인을 개발하거나 별도의 코드를 작성하지 않아도 누구나 스킬을 만들 수 있다.
• 기본 스킬인 /figma-use는 Figma의 구조와 핵심 원칙을 에이전트에게 알려주며, 팀은 이를 확장해 자체 업무 방식에 맞출 수 있다.
• 스킬은 단순한 문서가 아니라 에이전트가 실제 작업 중 따라야 하는 실행 규칙으로 작동한다.

제공되는 스킬 사례

• /figma-generate-library: 코드베이스에서 Figma 컴포넌트 라이브러리 생성
• /figma-generate-design: 기존 컴포넌트와 변수를 사용해 새로운 디자인 생성
• /create-voice: UI 명세에서 VoiceOver, TalkBack, ARIA용 스크린 리더 사양 생성
• /apply-design-system: 기존 디자인을 디자인 시스템 컴포넌트와 연결
• /rad-spacing: 변수와 폴백을 사용해 계층적인 간격 적용
• /sync-figma-token: 코드와 Figma 변수 사이의 디자인 토큰 동기화 및 변경 감지
• /multi-agent: 여러 에이전트가 디자인 구현 작업을 병렬로 수행
• 커뮤니티 실무자가 만든 JSON 기반 컴포넌트 생성, 디자인 워크플로 오케스트레이션 등의 스킬도 제공된다.

구조 기반의 자기 수정

• 에이전트는 화면을 생성한 뒤 스크린샷을 찍고, 결과가 목표와 다른 부분을 확인해 반복적으로 수정할 수 있다.
• 수정 대상이 단순한 픽셀이 아니라 실제 컴포넌트, 변수, 자동 레이아웃, 레이어 구조이므로 디자인 시스템과 상호작용하며 개선된다.
• AI 모델의 비결정성 때문에 같은 프롬프트라도 결과가 달라질 수 있지만, 스킬이 작업 순서와 기준을 고정해 결과를 더 예측 가능하게 만든다.
• 기존의 디자인 규칙과 팀 관례가 정적인 문서에 머무르지 않고, 에이전트가 작업 중 실제로 적용하는 규칙이 된다.

실용적인 의미

팀은 use_figma와 /figma-use를 기반으로 자체 디자인 스킬을 만들고, 컴포넌트·변수·토큰 사용 규칙을 명시하는 것이 좋다. 특히 코드와 Figma가 자주 어긋나는 조직이라면 generate_figma_design으로 최신 UI를 동기화한 뒤, use_figma와 스킬을 이용해 브랜드와 디자인 시스템에 맞게 다듬는 워크플로가 효과적이다.