Figma Canvas (AI agent canvas)

Figma Canvas란?

Figma Canvas는 이 Figma 블로그 포스트에서 설명된 대로, AI 에이전트가 Figma 파일 내부에서 직접 디자인할 수 있도록 Figma의 캔버스 워크플로를 개방한 것입니다. 핵심 목적은 에이전트가 Figma에서 팀이 유지하는 동일한 디자인 컨텍스트(예: 디자인 시스템, 컴포넌트, 변수, 팀 규칙)를 사용하면서 디자인 자산을 생성하고 업데이트할 수 있게 하는 것입니다.

이 포스트는 또한 Figma를 개발자 워크플로에 연결하는 베타 Figma MCP 서버를 소개하며, LLM 기반 도구가 기존 디자인 구조와 연결된 방식으로 디자인 작업을 생성하고 수정할 수 있게 합니다.

주요 기능

AI 에이전트가 캔버스에서 Figma 파일에 직접 작성할 수 있어 생성된 작업이 팀이 디자인을 반복하는 동일한 장소에서 생성되거나 수정됩니다.
베타 Figma MCP 서버로 Figma를 개발자/LLM 워크플로에 도입하여 디자인 기반 코드 생성과 디자인 자산 작업을 지원합니다.
캔버스 작업을 위한 use_figma 도구로 MCP 클라이언트(포스트에서 언급된 Claude Code와 Codex 포함)가 디자인 시스템과 연결된 디자인 자산을 생성하고 수정할 수 있습니다.
코드와 캔버스 간 공유 컨텍스트로 에이전트가 코드 기반 UI 업데이트와 Figma 내 디자인 세밀 조정 사이를 유연하게 이동할 수 있습니다.
마크다운 지침으로 에이전트 동작을 안내하는 스킬로, 스킬이 Figma에서 따라야 할 워크플로 단계, 순서, 규칙을 정의합니다.

Figma Canvas 사용 방법

Figma MCP 서버를 지원하는 MCP 클라이언트 사용 (포스트에서 Claude Code와 Codex 같은 도구 언급)으로 MCP를 통해 Figma 기능을 액세스합니다.
use_figma 도구 사용으로 에이전트가 디자인 시스템 컨텍스트를 활용해 Figma 내부에서 컴포넌트와 기타 디자인 자산을 생성하거나 업데이트하도록 지시합니다.
스킬로 지침 추가하여 에이전트가 Figma에서 작업을 실행하는 방법을 마크다운 기반 지침으로 제공합니다(포스트에서 언급된 기본 /figma-use 스킬 포함).
HTML/코드에서 시작할 때 generate_figma_design으로 라이브 UI와 동기화한 후, 기존 컴포넌트와 변수를 사용해 디자인을 편집하기 위해 use_figma로 전환합니다.

사용 사례

코드베이스를 초기 Figma 컴포넌트로 변환: 코드베이스에서 Figma의 새 컴포넌트를 생성하는 /figma-generate-library 같은 스킬을 사용합니다.
기존 컴포넌트와 변수를 사용해 새 화면 생성: 자유 형식 레이아웃 대신 컴포넌트/변수에 의존해 Figma에서 디자인을 구축하도록 /figma-generate-design을 사용합니다.
UI 설명에서 접근성 사양 적용: UI 사양에서 화면 판독기 사양(VoiceOver, TalkBack, ARIA)을 생성하는 create-voice를 사용합니다.
시스템 인식 규칙으로 간격 규칙 적용: Figma에서 계층적 간격 패턴을 적용하는 rad-spacing을 사용합니다.
기존 디자인을 시스템 컴포넌트에 연결 또는 재매핑: 디자인을 분리된 레이어로 두지 않고 시스템 컴포넌트에 맞추는 apply-design-system을 사용합니다.

자주 묻는 질문

유료 기능인가요?

블로그 포스트에 따르면 Figma 캔버스에서 AI 에이전트 지원은 결국 사용량 기반 유료 기능이 되지만, 베타 기간 동안 무료로 사용할 수 있습니다.

Figma에서 에이전트 작업을 가능하게 하는 도구는 무엇인가요?

포스트는 에이전트가 디자인 시스템 컨텍스트를 사용해 캔버스에서 작업하는 use_figma 도구를 설명합니다. 또한 라이브 앱/웹사이트의 HTML을 편집 가능한 Figma 레이어로 변환하는 기존 generate_figma_design 도구를 언급합니다.

이 워크플로에서 “스킬”이란 무엇인가요?

포스트에서 스킬은 마크다운 파일로 작성된 지침 세트로, 에이전트가 Figma에서 작동하는 방식을 형성합니다—워크플로 단계, 순서, 규칙, 브랜드 일치 디자인을 위한 도메인 지식을 다룹니다.

스킬 작성에 플러그인을 만들어야 하나요?

아니요. 포스트에 따르면 누구나 스킬을 작성할 수 있으며, 플러그인 제작이나 코드 작성 없이 가능합니다.

언급된 도구는 특정 에이전트(예: Claude Code) 전용인가요?

포스트는 **Claude Code와 Codex**를 use_figma를 사용할 수 있는 MCP 클라이언트로 명시하고, “기타 MCP 클라이언트”도 설명합니다. 완전한 호환성 매트릭스는 나열하지 않습니다.

대안

직접 캔버스 에이전트 편집 없는 디자인-투-코드 변환 워크플로: Figma 외부에서 디자인을 생성하거나 Figma를 읽기 전용 대상으로 취급한 후, Figma에서 자산을 수동으로 재구축할 수 있습니다. 이는 캔버스 내 디자인 시스템과 연계된 직접 에이전트 편집이 없다는 점에서 다릅니다.
기존 Figma 전용 자동화 또는 플러그인 사용: AI 에이전트 없이 일관된 컴포넌트와 변수를 필요로 한다면 Figma 플러그인이나 템플릿 기반 접근을 사용할 수 있습니다. 이는 에이전트 자율성을 더 결정론적인 동작으로 교환합니다.
Figma 외부에서 디자인 아티팩트를 생성하는 에이전트 워크플로: 일부 LLM 도구 체인이 디자인 파일이나 사양을 출력하여 디자이너가 구현할 수 있습니다. 여기에 설명된 접근과 비교해 에이전트는 use_figma를 통해 동일한 Figma 컴포넌트/변수를 직접 수정하지 않습니다.
HTML-투-Figma 변환만: 기존 UI를 Figma로 가져오는 데 초점(generate_figma_design 유형 기능 사용)을 맞추고 에이전트 캔버스 편집 루프를 생략한다면 복잡성을 줄일 수 있지만, 디자인 시스템과 정렬하기 위해 더 많은 수동 후속 작업이 필요할 수 있습니다.