Figma가 코드 레이어·모션·셰이더 지원과 AI 기반 커스텀 플러그인 기능을 도입

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

TL;DR

Figma가 코드 레이어, 모션·셰이더 지원, 그리고 AI 기반 커스텀 플러그인 생성 기능을 도입해 디자인 캔버스에서 코드와 시각적 표현을 더 밀접하게 결합할 수 있게 되었다. 이 업데이트는 기존의 별도 툴에서 애니메이션과 셰이더를 만들고 변환하던 과정을 캔버스 내부로 끌어들여 프로토타이핑 흐름을 단축한다. 또한 Weavy 인수로 확보한 노드 기반 워크플로를 캔버스에 통합하고 Claude Code와 Codex 같은 코드 보조 에이전트와의 연계를 강화해 디자인-개발 간 핸드오프를 부드럽게 만든다.

새로운 코드 레이어는 레포지토리 복제와 코드에서 디자인 레이어로의 흐름 추출을 허용해 사용자가 빠르게 아이디어를 실험하고 시각적 테스트를 실행할 수 있도록 설계되었다. 애니메이션, 전환, 3D 변환과 같은 모션 요소는 이제 외부 변환 없이 캔버스 내에서 구성할 수 있으며 AI는 셰이더 효과와 채우기(fill)를 생성해 디자인 자산을 보강한다. 향후 업데이트로 Weavy 워크플로를 Figma 내부에서 직접 생성할 수 있게 되어 다중 모델 비교와 출력물 선택이 더 쉬워진다.

AI 어시스턴트의 '스킬' 기능을 통해 사용자는 텍스트 프롬프트로 반복 가능한 작업을 정의하고 Notion, Granola, Excel, GitHub 같은 외부 도구를 연결해 에이전트가 문맥을 가진 작업을 수행하도록 할 수 있다. 커스텀 플러그인 생성 기능은 레이아웃 생성기나 벡터 경로 추적기 같은 도구를 프롬프트로 설계해 개발 역량이 제한적인 디자이너도 반복 도구를 만들 수 있게 한다. 이 변화는 초기 반복과 프로토타이핑 속도를 크게 올릴 수 있지만, 제품 수준의 품질 높은 코드가 필요한 단계와의 경계는 여전히 존재한다.

섹션별 상세

Figma는 코드 레이어를 캔버스에 직접 추가해 레포지토리 복제와 코드로부터 디자인 레이어를 추출하는 워크플로를 제공하며, 사용자는 코드 입력을 통해 시각적 레이어를 생성하고 캔버스에서 바로 테스트 가능한 출력물을 얻을 수 있다. 이 기능은 디자이너와 엔지니어가 초기 아이디어를 빠르게 반복하는 데 초점을 두며, Figma의 최고 제품책임자는 멀티플레이어 캔버스 환경에서는 코드 품질보다 탐색 속도가 중요하다고 설명했다. 캔버스 내 코드 레이어는 기존에 분리돼 있던 디자인-코드 핸드오프 과정을 줄여 협업 반복 주기를 단축시키는 효과가 기대된다.

캔버스 좌측에 디자인, 중앙에 프로토타입 UI, 우측에 코드 에디터가 동시에 보이는 스크린샷이다. — Screenshot이 이미지는 코드 레이어 기능이 디자인 캔버스와 코드 편집 환경을 나란히 배치해 동시 작업을 가능하게 하는 점을 시각적으로 보여준다. 코드에서 UI 흐름을 추출해 캔버스에 배치하고 즉시 시각적 테스트를 진행하는 사용 사례를 직접적으로 전달하므로 본문 내용의 핵심 기능을 이해하는 데 도움이 된다.

근거

Figma가 코드 레이어를 추가해 팀이 레포지토리를 복제하고 코드로부터 디자인 레이어를 추출해 캔버스에서 테스트할 수 있게 했다. — 기사 도입부 및 Figma 최고제품책임자 발언이 포함된 문단

애니메이션과 전환, 3D 변환에 대한 직접적인 지원이 추가되어 디자이너가 외부 툴에서 만든 애니메이션을 변환할 필요가 없어졌고, AI를 활용해 셰이더 효과와 채우기를 생성하는 기능이 도입되었다. 입력으로는 디자이너의 속성 설정이나 프롬프트가 들어가고 내부 엔진이 모션 계산·변환 또는 셰이더 코드를 생성해 캔버스에 적용하는 출력물을 만든다. 이 변경은 프로토타입 제작 단계의 도구 이동을 줄여 시각적 실험을 빠르게 수행할 수 있게 하는 것이 핵심이다.

근거

Figma는 애니메이션, 전환, 3D 변환 지원을 추가했으며 AI로 셰이더 효과와 채우기를 생성할 수 있도록 한다. — 애니메이션과 셰이더 지원을 언급한 본문 중간 문단

Figma는 지난해 인수한 Weavy의 노드 기반 워크플로를 캔버스와 더 긴밀하게 통합할 계획을 밝히며, 향후 업데이트에서 사용자가 Figma 내부에서 직접 Weavy 워크플로를 생성할 수 있게 한다. Weavy 워크플로는 서로 다른 모델과 처리 단계를 연결해 출력물을 비교하는 구조로, 입력으로 여러 모델의 결과를 받아 비교 및 선택 가능한 출력물을 생성한다. 이 통합은 디자인 실험에서 다양한 모델 출력을 한 곳에서 평가할 수 있게 해 반복 실험의 효율을 높인다.

근거

Figma는 Weavy 인수를 통해 노드 기반 워크플로를 확보했으며 향후 Figma 내에서 Weavy 워크플로를 직접 생성할 수 있게 한다. — Weavy 인수 및 통합 계획을 다룬 문단

AI 어시스턴트의 스킬 기능 확장으로 사용자는 텍스트 프롬프트로 반복 가능한 스킬을 정의하고 Notion, Granola, Excel, GitHub 같은 외부 도구를 연결하거나 파일을 첨부해 더 많은 문맥을 에이전트에 제공할 수 있다. 입력된 프롬프트와 연결된 외부 리소스가 에이전트의 처리 과정에 사용되며, 결과는 캔버스 상의 자동 작업이나 리포트 형태로 출력될 수 있다. 이러한 스킬과 커스텀 플러그인 생성 기능은 반복적 검사나 레이아웃 생성 같은 작업을 자동화해 팀의 생산성을 높이지만, 프로덕션 품질의 코드와 캔버스 실험용 코드 사이의 역할 분리는 유지될 필요가 있다.

스킬과 명령어 목록을 선택하는 UI와 컨텍스트 도움말이 함께 보이는 인터페이스 캡처이다. — Screenshot이 이미지는 사용자가 슬래시 명령 형태의 스킬을 선택해 반복 작업을 실행하고, 각 스킬에 대한 설명을 통해 어떤 규칙이나 접근 방식이 적용되는지를 확인할 수 있음을 보여준다. 이는 본문에서 설명한 텍스트 프롬프트 기반 스킬과 외부 도구 연결이 실제로 캔버스 내에서 어떻게 드러나는지를 설명하는 근거가 된다.

근거

사용자는 텍스트 프롬프트로 반복 가능한 스킬을 작성하고 Notion, Granola, Excel, GitHub 같은 도구를 연결해 AI가 더 많은 문맥을 바탕으로 작업하도록 설정할 수 있다. — AI 스킬과 외부 도구 연동을 설명한 문단

용어 해설

코드 레이어(Code Layer): — 디자인 캔버스 위에 코드 스니펫이나 레포지토리 흐름을 직접 배치해 디자인 요소와 코드 사이의 맥락을 연결하는 기능으로, 입력으로 코드 저장소나 스니펫을 받아 디자인 레이어로 추출하고 시각적 프로토타입 테스트용 출력물을 생성하는 방식으로 작동한다. 개발-디자인 협업의 초기 반복 속도를 높여 손쉬운 탐색과 실험을 가능하게 하는 점에서 중요하다.
셰이더(Shader): — 렌더링 파이프라인에서 픽셀·버텍스 등의 시각적 속성을 계산해 특정 그래픽 효과를 만드는 프로그램 코드로, 입력으로는 색상·빛·텍스처 값이 들어오고 GPU에서 수학적 변환을 수행해 화면에 적용되는 출력물을 만든다. 디자인 툴에서 AI로 셰이더를 생성하면 복잡한 시각 효과를 빠르게 프로토타이핑할 수 있다.
AI 스킬(AI Skill): — 사용자가 텍스트 프롬프트로 정의한 반복 가능한 작업 단위로, 입력 프롬프트와 연결된 외부 도구나 파일을 처리하여 지정된 작업 순서를 실행하고 결과를 반환하는 에이전트 동작 패턴이다. 디자인 캔버스와 연동되면 반복 검사·변환·데이터 수집 같은 작업을 자동화해 협업 효율을 높인다.
Weavy 워크플로(Weavy Workflow): — Weavy가 제공하는 노드 기반 워크플로로, 서로 다른 AI 모델이나 처리 단계를 연결해 여러 대안을 비교·평가하는 파이프라인을 구성하는 방식이며 입력 데이터에 따라 모델을 차례로 호출해 각 단계 출력물을 다음 단계 입력으로 사용하는 구조다. Figma 내 통합 시 디자인-모델 반복 실험을 캔버스 안에서 제어할 수 있게 한다.

기술

Claude Code
Codex
Weavy
Notion
Granola
Excel
GitHub

활용 사례

디자인-코드 핸드오프를 단축하는 프로토타이핑
캔버스 내 애니메이션과 셰이더 빠른 실험
반복 디자인 검사 자동화와 커스텀 플러그인 생성